react-images-uploading

react-images-uploading

Images uploader

A simple images uploader without UI. Building by yourself.

#Demo

Article Medium

Install

npm install --save react-images-uploading

Break change in version 2.0.0

• Replace "mode" by "multiple" props.
• Fix bug images in defaultValue cannot update or delete.
• Add some more utilities props : acceptType, maxFileSize

Usage

import * as React from "react";

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

const maxNumber = 10;
class Example extends React.Component {
  onChange = imageList => {
    // data for submit
    console.log(imageList);
  };

  render() {
    return (
      <ImageUploading onChange={this.onChange} maxNumber={maxNumber} multiple>
        {({ 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>
    );
  }
}

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
defaultValue	array	[{dataURL: ... }, ...]		Init data
acceptType	array	['jpg', 'gif', 'png']	[]	Supported image extension
maxFileSize	number			Max image size(Mb) (will use in the image validation)

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 ©