react-images-uploading

Temporary publish of package until PR

Images uploader

A simple images uploader without UI. Building by yourself.

#Demo

Introduce blog

Install

With npm

npm install --save react-images-uploading

With yarn

yarn add react-images-uploading

Usage

import * as React from "react";

import ImageUploading from "react-images-uploading";
// { ImageUploadingPropsType, ImageListType, ImageType } is type for typescript

const maxNumber = 10;
const maxMbFileSize = 5 * 1024 * 1024; // 5Mb

class Example extends React.Component {
  onChange = (imageList) => {
    // data for submit
    console.log(imageList);
  };
  onError = (errors, files) => {
    console.log(errors, files);
  };

  render() {
    return (
      <ImageUploading
        onChange={this.onChange}
        maxNumber={maxNumber}
        multiple
        maxFileSize={maxMbFileSize}
        acceptType={["jpg", "gif", "png"]}
        onError={this.onError}
      >
        {({ imageList, onImageUpload, onImageRemoveAll }) => (
          // write your building UI
          <div>
            <button onClick={onImageUpload}>Upload images</button>
            <button onClick={onImageRemoveAll}>Remove all images</button>

            {imageList.map((image) => (
              <div key={image.key}>
                <img src={image.dataURL} />
                <button onClick={image.onUpdate}>Update</button>
                <button onClick={image.onRemove}>Remove</button>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    );
  }
}

Validate

...
  {({ imageList, onImageUpload, onImageRemoveAll, errors }) => (
    <div>
      {errors.maxNumber && <span>Number of selected images exceed maxNumber</span>}
      {errors.acceptType && <span>Your selected file type is not allow</span>}
      {errors.maxFileSize && <span>Selected file size exceed maxFileSize</span>}
      {errors.resolution && <span>Selected file is not match your desired resolution</span>}
    </div>
  )}
...

Resolution

• "absolute": resolutionWidth and resolutionHeight is equal with selected image absolutely
• "ratio": resolutionWidth/resolutionHeight ratio is equal with width/height ratio of selected image
• "less: image width must less than resolutionWidth and image height must less than resolutionHeight
• "more: image width must more than resolutionWidth and image height must more than resolutionHeight

Props

| parameter | type | options | default | description | | ---------------- | -------- | ----------------------------------------- | ------- | ------------------------------------------------------------------------------ | | multiple | boolean | | false | Set true for multiple choose | | maxNumber | number | | 1000 | Number of images user can select if mode = "multiple" | | onChange | function | | | Called every update | | onError | function | (errors, files) => void | | Called if have error on validate each update | | defaultValue | array | [{dataURL: ... }, ...] | | Init data | | acceptType | array | ['jpg', 'gif', 'png'] | [] | Supported image extension | | maxFileSize | number | | | Max image size(Byte) (will use in the image validation) | | resolutionType | string | "absolute" | "less" | "more" | "ratio" | | Using for validate image with your width - height resolution that you provide | | resolutionWidth | number | > 0 | | | | resolutionHeight | number | > 0 | | |

Exported options

| parameter | type | description | | ------------------------- | -------- | ------------------------------------------------------------------------- | | imageList | array | List of images for render. Each item in imageList has some options below. | | imageList[index].key | string | Generate filename | | imageList[index].dataURL | string | Url image or base64 | | imageList[index].onUpdate | function | Call function for replace a new image on current position | | imageList[index].onRemove | function | Call function for remove current image | | onImageUpload | function | Call for upload new image(s) | | onImageRemoveAll | function | Call for remove all image(s) | | errors | object | Export type of validation |

License

MIT ©