Hologram Image Upload

React image uploader with dropzone and cropper function, which used React Dropzone and React Image Crop.

You can please feel free to open issues or pull request.

Demo

https://hologram.sardo.work/

Features

• Using dropzone to upload multiple image files
• Crop and preview image

Browser Support

• Latest Firefox
• Latest Chrome
• IE 11 and Edge

Installation

npm install hologram-image-upload --save

Usage

import Hologram from 'hologram-image-upload';

After version 2.5, you will not need require any css file now.

Props

defaultFiles (optional)

Mockup images of dropzone. You could pass the name, url, and type of file, then it will be add to dropzone when Hologram mounted.

<Hologram defaultFiles={[{name: 'dummy.jpg', url: 'https://s3-ap-southeast-1.amazonaws.com/dummy/dummy.jpg', type: 'image/jpeg'}]}/>

uploader (optional)

The post url of your upload handler. You need to pass this prop or a custom upload function for everything to work.

<Hologram uploader="upload.php"/>

maxFiles (optional)

If files more than this number, it will not be uploaded. However, if number is -1, user will be allow to upload unlimited number of image. Default Number is -1.

var maxFiles = 10;
<Hologram uploader="upload.php" maxFiles={maxFiles}/>

Custom Upload Function (optional)

If you want, you can pass in your custom upload function as a prop. The function takes two arguments: The file information and the actual file data. This function MUST return a promise

myUploadFunc(file, data) {
  return new Promise((resolve, reject) => {
    // FANCY TASKS HERE
    // do this and this and this
    // END OF FANCY TASKS
    request.post(FANCY_URL).send(MY_FANCY_DATA).end((err, res) =>{
      if (err) return reject(err)
      resolve(res)
    });
  });
}

<Hologram uploadFunction={this.myUploadFunc.bind(this)} ></Hologram>

dropzoneConfig (optional)

Config of React Dropzone. https://github.com/okonet/react-dropzone

var dropzoneConfig = {
            style : {
                textAlign: 'center',
                padding: '2.5em 0',
                background: 'rgba(0,0,0,0.5)',
                color: '#fff'
            }
    }

<Hologram uploader="upload.php" dropzoneConfig={dropzoneConfig}/>

cropperConfig (optional)

Config of React Image Crop. https://github.com/DominicTobias/react-image-crop

var crop = {
	x: 20,
	y: 10,
}

<Hologram uploader="upload.php" cropperConfig={crop} />

onComplete(result) (optional)

Callback function which trigger when image uploaded. It will pass a object which contain http response, you can use it to handler the result of upload.

Contributing

You can clone this repository then start develop at sandbox, or feel free to open issue on github.

Build package:

npm run build

Watch package change and build it:

npm run watch