Is there a way to resize images and reduce file size client-side, before uploading? BlueImp’s jQuery File Upload plugin for PHP would do this very well and it would dramatically reduce upload time and bandwidth usage especially for those on mobiles.
We don’t have that yet - but it is a good feature request! So will move it there, so people can vote on it
10 Likes
Just wanted to give this a little nudge as I am sure there are plenty of people out there that would vote for this as a new feature.
Vote Vote Vote
3 Likes
Hi @Freddy_Blockchain and thanks for your suggestions. I have used the jquery-cropper before
This request is for resizing the image in Megapixels (Mb) rather than Image Resolution (pixels). In my case
the user often has no idea about megapixels and how it affects the upload speed. And they certainly have no idea how to reduce the image first, so I need a way to automatically reduce the filesize before the image is uploaded. An image cropping tool would be a welcome addition, as would other editing tools such as adding text, shapes and arrows but all as options.
The idea comes from BlueImp’s jQuery File Upload plugin for PHP https://github.com/blueimp/jQuery-File-Upload and in particular
-
Client-side image resizing:
Images can be automatically resized on client-side with browsers supporting the required JS APIs.
As an example, this is where the image to be uploaded is automatically resized on the device (mobile or PC) as part of the upload procedure from, say, 8Mb to 300Kb without changing the overall width or height, without cropping the image and without noticeable loss in quality. So no need for user intervention. I have implemented this on various sites and it works very well. It’s ideal for mobile use but just as good for desktop as it
- reduces upload time and bandwidth usage
- minimises storage space on the server
- faster page views when recalled and faster slideshows
- enables quicker downloads
- all without further processing on the server side
I hope this makes my request a bit clearer.
Merry Christmas 
4 Likes
Anymore votes for this?
What we are looking for here is a way to reduce the size of a file BEFORE it is uploaded but with minimal loss, therefore speeding up the upload time, minimising bandwidth usage, and minimising server storage space. This is primarily aimed at mobile uploads but obviously has advantages at all levels.
The idea comes from BlueImp’s jQuery File Upload plugin for PHP https://github.com/blueimp/jQuery-File-Upload and in particular
-
Client-side image resizing:
Images can be automatically resized on client-side with browsers supporting the required JS APIs.
Come on guys, more votes needed to move this up the list 
6 Likes
Just voted. Please include client side image cropper as well.
Ah and cropper can be integrated with Dropzone. You drag the file into Dropzone, then popup to crop and resize image, when confirmed, popup close and the cropped, resized image been loaded into Dropzone ready to be uploaded. That will be great. 
7 Likes
Hope this gets implemented, voted
4 Likes
I recently used this website to bulk resize image before upload. It works on client side and the performance was pretty good in my experience. I wonder if we could have such technology built within Wappler. Possible flow that I could think of is like to add image resizer > configure image resize parameter > button onclick dynamic event > run image resizer > onsuccess > run serverconnect upload form… or directly on upload input field or dropzone option > tick or select to use image resizer.
1 Like
yea the problem is my clients have iphones or some serious resolution phones… and then they try to upload 5 files from the phone… and they dont like the term… you have to resize the images before uploading … from me… as 5 images … for the dropzone out of iphone… like 4mb x 5 = 20MB upload. ,so yes gets my vote that if in anyway possible to resize the images in a temp file storage or something before upload…
Hi Team, is there any sign of this being implemented? The request is over 18 months old and @George did think it was a good feature request at the time.
I need to know whether to wait a week or two, or whether to implement “BlueImp’s jQuery File Upload plugin” instead.
I am very aware that newer phones now are easily capable of taking photos that are in excess of 30Mb each. When someone wants to upload ten images then that could equate to over 300Mb over a mobile connection! Silly I know, but some people really do not understand and have no idea how to change these settings.
I know in an ideal world you wouldn’t take a picture at that size if you were planning on uploading over mobile network but we cannot dictate to a user on how to set up their phone’s camera, especially if they have already taken the images.
1 Like
Just to confirm, this feature is not planned for the next week or two.
1 Like
Nothing other than using BlueImp’s jQuery File Upload plugin for PHP mentioned in my original post.
Despite George saying it was a good feature request, nearly 2 years have passed and still nothing. I honestly did not think it would be a difficult thing to implement. I have given up on waiting for this, if it does happen then it will be a great feature.
@UKRiggers Yes… because your words all ring true… as mobiles phone are getting better and better…
Its weird not more people has asked for this… maybe they not all using drop zone and mobile phones to upload images
“I am very aware that newer phones now are easily capable of taking photos that are in excess of 30Mb each. When someone wants to upload ten images then that could equate to over 300Mb over a mobile connection! Silly I know, but some people really do not understand and have no idea how to change these settings.”
But thanks for the feedback
1 Like
@UKRiggers have you found a solution for this…? or point me in a direction of what you have used to do this?
I have used this in the past but not used it since working with Wappler. I will need to use it in the next few weeks if nothing appears within Wappler.
1 Like
Bump.
2 Likes
I’ve just voted for this. https://bulkresizephotos.com/en is a great example of image resizing without uploading anything, it’s all done in/by the browser.
1 Like