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

Usage no npm install needed!

<script type="module">
  import artsHologramImageUpload from '';


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.




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

Browser Support

  • Latest Firefox
  • Latest Chrome
  • IE 11 and Edge


npm install hologram-image-upload --save


import Hologram from 'hologram-image-upload';

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


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: '', 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) => {
    // do this and this and this
    // END OF FANCY TASKS, res) =>{
      if (err) return reject(err)

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

dropzoneConfig (optional)

Config of 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.

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.


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