Search code examples
file-uploadfine-uploader

Fine Uploader: resizing large files before upload?

I'm evaluating Fine Uploader compared to various other options, specifically JQuery File Upload.

I generally prefer the Fine Uploader approach as it's more lightweight, compared to JQuery File Uploader which has dependencies on Bootstrap and JQuery UI.

However it's important to be able to resize images: e.g., a user may select a large file from their camera and this may be very large - uploading the full resolution photo may take a very long time. JQuery File Upload doe this.

Additionally we don't have much use for very high resolution files.

If possible (I'm aware some browsers may not support this), I'd like to be able to resize images client size.

Is this possible?

Solution

  • Fine Uploader does not currently have any native support for image manipulation. This is a feature in our backlog, but we have not had many users tell us they are interested in this. This is one of the reasons why such a feature has yet to be implemented natively. There is a case, #707 that marks the start of native image-editing support for Fine Uploader. It is tentatively scheduled for 4.0.

    However, you can certainly make use of FileReader and Canvas to resize the image. You can then submit this resized image as a Blob to Fine Uploader via the addFiles API method. At that point, the file has been submitted and Fine Uploader is ready to upload the item.

    Essentially, the steps you would follow to handle this specific scenario, before Fine Uploader natively supports image manipulation:

    1. Provide your own file input element(s) or make use of Fine Uploader's file/folder drag and drop support to get a handle on some files selected by the user.
    2. Use FileReader to read the contents of the image.
    3. FileReader will provide you with a URL for the image, assign that to the src attribute of an img element.
    4. Draw the img onto a canvas element. This is where the resizing occurs.
    5. Grab the URL of the resized image from the canvas element (canvas.toDataURL(...)).
    6. Convert the URL to a Blob.
    7. Pass the Blob to the addFiles API method of Fine Uploader.

    The intent is to take care of most if not all of this for integrators such as yourself in the future by adding native image manipulation support to Fine Uploader.

    Hope this helps.