Resize image on the client before uploading

[Arwany]

Hi,

I know this is not an easy request / question, but here it is:

Where can I have access to the file before the server being hit? I just want to resize the image to some specific percentage / size before uploading to speed-up the process.

I googled a bit and found that it is quite possible, so here is what I would suggest:

include an option to resize the filetype of image (something like this one ). I know this is not a clean-way, but you might find it interesting.

Thank you for any reply.

[alexsasharegan]

Initially, I think your best bet might be to play with the accept prop. Check out the Dropzone docs on it: http://www.dropzonejs.com/#config-accept

[alexsasharegan]

Another option (possibly a better one now that I'm looking) is to use this hook: http://www.dropzonejs.com/#config-transformFile

[alexsasharegan]

Not sure if this plugin exposes that, but you can always access the raw dropzone object by placing a ref on vue clip (let's say vueClip and accessing it like so:

mounted() {
  const dropzone = this.$refs.vueClip.uploader._uploader
},
// or
computed: {
  dropzone() {
    return this.$refs.vueClip.uploader._uploader
  }
}

[Arwany]

I will try the config-transformFile one, and will check if it works. I was really looking for some "native" solution like that. Thanks!

[alexsasharegan]

Let me know how it goes! I've always handled that stuff server-side. Sounds like a cool idea!

[Arwany]

I don't know if I applied that correctly, I just added something like this to the uploader options:

resizeWidth: 128,
resizeHeight: 128,

but it didn't change anything, what am I doing wrong?

[alexsasharegan]

Try and drop your source code in. Or link a gist. It's probably an issue with how you reference things and/or when they are applied. You might need to fork the repo to support your needs.

[Arwany]

I did this:

uploaderOptions: {
            url: '/wizard/upload',

            uploadMultiple: false,

            maxFiles: 1,

            maxFilesize: 10,

            acceptedFiles: ['image/*'].join(','),

            paramName: 'logo',

            resizeWidth: 128,
            resizeHeight: 128,
        },

And I am creating the vue-clip like this:

<vue-clip :options="uploaderOptions" :on-sending="onSendingFile"
 :on-complete="finishedUpload" :on-init="initUploader"
 :on-drag-enter="dragging" :on-max-files="maxFilesReached">
...
</vue-clip>

[Arwany]

btw, where do I pass options to the DZ, not the vue-clip component?

I see that you are passing them from the options directly here.

[Arwany]

I think we need to include the latest version of the DropZone (5.0.0) because as the website states:

News
Dropzone 5.0.0
I just released Dropzone 5.0.0, which includes browser side image resizing. This means that you can resize the images on the client, before sending them to the server, saving upload bandwidth and reducing upload time.

[alexsasharegan]

So vue-clip proxies everything to DZ. The options prop you pass contains everything. You'll want to swap your bound attributes like :on-complete for props on your uploaderOptions.

data() {
  const uploaderOptions = {
    url: '',
    onComplete: callback1,
    onDragEnter: callback2
  }
}

[Arwany]

Ok thanks, I will try that. But will it help if we upgraded the version of DZ?

The version included is not the most up-to-date version.

[alexsasharegan]

If you're feeling brave, you might have more luck forking my fork of this repo to support the newest DZ (now on GitLab). DZ supposedly just got their release working since some of the hooks are different between GitHub and GitLab (see this closed issue). Also, I set the repo up to support vue's event emitting rather than the callbacks passed via props.

Here's the fork: https://github.com/alexsasharegan/vue-clip

[Arwany]

Thank you. I will try that later today and will write here if I had lock with that.

[Arwany]

Sorry for the late reply. I tested the new feature in the DZ 5.0.1 and it seems to work without any problem. Would you mind upgrading to the 5.0.1 or do you prefere to stick with the old version.

I just added the parameter resizeWidth and resizeHeight and it worked without any issue.

[alexsasharegan]

If I had commit rights, I could test the upgrade and push. I needed some tweaks/upgrades for my project too, so I forked this repo: https://github.com/alexsasharegan/vue-clip.

Maybe I'll test it on my fork, do the upgrade, and you can use that if you need to. I changed a bit of the options/events architecture and the file object a bit though. You'll have to go through the source a little and let me know.

[alexsasharegan]

Tested v5.0.1 from dropzone, and all is good. I've updated my fork.

[VaibhavMMU]

How can i use this resizeWidth with conditions.

like when my image is greater then 500px then it resize otherwise not.