How to upload a smaller version and the original i

Question

I looked at this thread:

https://github.com/enyo/dropzone/issues/781

The issue is that it seems this would resize the original image and that would be the only image uploaded to the server?

I want to display the smaller version in my gallery to save bandwidth and the original when a user clicks on an image in the gallery to see it full size.

How could I upload both the smaller resized version and the original to my server?

(The images will be stored in a google cloud bucket when sent to my server and then queried from the cloud bucket on the client from there on)

Here's my current code which uploads the image to my server.

Dropzone.options.myAwesomeDropzone = {

    autoProcessQueue: false,
    paramName: "image",
    acceptedFiles: 'image/*',
    maxFilesize: 5, // MB
    uploadMultiple: false,
    maxFiles: 1,

    init: function() {
        var myDropzone = this;
        url: '/upload'

        this.on("addedfile", function() {
            if (this.files[1] != null) {
                this.removeFile(this.files[0]);
            }
        });
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });

        this.on("success", function(response) {
            localStorage.setItem("success_msg_local2", "Post Created. Reload Page");
            window.location.href = "screenshots/index";
        });

        this.on('error', function(file, response) {
            localStorage.setItem("error_msg_local", response);
            window.location.href = "upload";
        });
    }

}

Answer 1

Dropzone doesn't really offer anything in regards to that. You can probably try to copy the file in the addedfile event, add some flag to it (myCopiedFile.isCopied = true;) and add it again (with this.addFile(copiedFile). Then you would need to make sure that the thumbnail isn't shown (by checking if the .isCopied flag is set), and only resize it, if the flag is set or not.

I agree with the point @robin-j made in the comment: this is something I would do on the server.

The advantages being:

1. The user needs to upload less bytes and saves bandwidth
2. You have more control when resizing (jpeg algorithms can be optimised to generate the smallest file size possible)
3. You don't run the risk of users doing something funny with the data (for example: they could write a simple script, that uploads two completely different images as thumbnail and original)