Support for the latest Dropzone Clientside Image Resizing features?

[Krucial92]

Thanks so much for creating this, working great..

I was wondering if support will be added for the latest dropzone features, such as clientside image resizing? (http://www.dropzonejs.com/#config-resizeWidth)

Obviously the options "resizeWidth", "resizeHeight", etc do not currently work. Otherwise is there a possible mod I can make to get these features working? Cheers.

[damianobarbati]

+1

[felixrieseberg]

I'd love a pull request ❤️

[juanpablomx]

+1
According to dropzone's changelog there's no breaking changes between the version react-dropzone-component is using (4.3.0) and the last dropzone version (5.1.1) so technically just changing the dependencies version in package.json should do the work (haven't tested it yet).

[valoricDe]

Unfortunately image resizing doesn't work, as dropzone only resizes the image during upload. Is there any way to access the dropzone object from a function passed to the component?

[valoricDe]

Just want to share my workaround:

const componentConfig = {
  iconFiletypes: ['.jpg', '.png', '.gif'],
  showFiletypeIcon: true,
  postUrl: 'no-url',
};

const djsConfig = {
  addRemoveLinks: false,
  acceptedFiles: "image/jpg,image/jpeg,image/png,image/gif",
  autoProcessQueue: false,
};
...

process = (file) => {
    this.dropzone.createThumbnail.bind(this.dropzone)(file, null, config.image.maxHeight, 'contain', false, (dataURL, canvas) => {
      if (canvas !== null) {
        // The image has been resized
        dataURL = canvas.toDataURL(file.type, imageQuality);
      }

      this.props.processUpload(file.name, dataURL);
      this.dropzone._callbacks.success.forEach(func => func.bind(this.dropzone)(file));
      this.dropzone._callbacks.complete.forEach(func => func.bind(this.dropzone)(file));
    });
  };
...
<DropzoneComponent config={componentConfig}
                             eventHandlers={{
                               init: (dropzoneClass) => { this.dropzone = dropzoneClass },
                               addedfile: this.process,
                             }}
                             djsConfig={djsConfig} />

[valoricDe]

As requested by @mukeshmandala: my image quality is 0.9 and the dataURL is converted in node.js to file via:

export const saveFileFromBuffer = (dataURL, savePath, callback) => {
  const regexp = /^data:(.+)\/(.+);base64,/;
  const data = dataURL.replace(regexp, "");
  const buffer = new Buffer(data, "base64");
  writeFile(savePath, buffer, callback);
};