Dropzone: Client side resize

[mschipperheyn]

Dropzone looks great. One of the reasons we use plupload is that it allows us to specify max dimensions on the client side. This ability would be a nice plugin to have.

[enyo]

This seems to be a highly requested feature... I will look into it.
One thing I don't like about it, is that it doesn't work with the fallback (since the fallback works without JS).

[mschipperheyn]

Well, I consider client side resizing as a network optimization, making an upload process faster. Fallback wise, it not being there, is not a show stopper. It would just make uploads slower.

[enyo]

Yeah... I would not use this solution because there are multiple different ways to downsize images, and I would want to have control over it. But lot of people don't seem to care about that and simply want the fastest solution, so I guess I'll give in ;)

[mschipperheyn]

If its pluggable. People van make their own choices.

[enyo]

Yes. I will need to look into it. Right now I'm sending files the exact same way a browser sends files in normal forms. If sending arbitrary data with JS means implementing this differently then I'm not too keen doing that.

[dottodot]

This would be a great feature to have, and would particularly useful when uploading from a mobile device so the user isn't uploading a full size photo.

[mschipperheyn]

There are some javascript libraries out there focused on compression. Perhaps you can just plug one in

[oiffel2]

I need this feature as well. The use case for my app is my clients are in a country where bandwidth is limited, and I need a way to compress or resize the images on the client before uploading to the server. The purpose is to save bandwidth (ie, mobile usage). My users can't upload 5MB+ photos over mobile. I love dropzonejs but because of this limitation, I have to evaluate other solutions. Thanks so much!

[liyaodong]

+1
I wrote a function to add watermark to image in client side . And I meet same problem that I can't change or edit dropzone push'd data . Unless using removeFile & using Ajax send file by myself .

[paul-blundell]

+1
This is the only thing stopping me using this. Any idea on when it might get implemented? I don't really want to spend time trying to get something else working for this feature to be released a week later.

[webbird]

+1
I am already using dropzone in a gallery script and this is a feature request I received. Now I'm hoping it gets implemented into Dropzone so I don't have to drop (haha) Dropzone and use another JS. :D

[kodujeme]

+1

[mzadravec]

+1

[arynadam]

I tried to combine several javascript codes to achieve this but cant find a solution yet. Hope this will be implemented soon.

[sonpython]

+1

[Beronien]

I have a version with this functionality. I'm gonna clean it and pull request it. I'm sure it can be tweaked, but right now it works fine

[sonpython]

@Beronien hey! any news :) can you send me your version :)
thank you

[cwliu]

+1

[MikMuller]

+1 as well. Absolute must. If it'll help, I'll donate $50 right now. No kidding.

[webbird]

@Beronien Let me know if I can help (doing tests etc.).

[MikMuller]

That, and re-orienting images so up is up, would make this the perfect tool.
http://stackoverflow.com/questions/22765456/dropzonejs-javascriptloadimage-rotate-image

[ghost]

looks like the fine uploader does all this already - http://docs.fineuploader.com/branch/master/features/scaling.html

[enyo]

Since this seems to be a much requested feature, how would you all suggest a fallback (for browsers with no JS) should work then? Let's say your server assumes that the browser resizes the images and rotates them properly... what should happen in case JS is not available?

[paul-blundell]

Your server shouldn't assume that. The client side resizing is intended to help reduce bandwidth/make uploads quicker, you should still check on the server the file uploaded is as expected and if not do the resize. Let the developer worry about the server, the fallback should be as it is now.

[RomainSauvaire]

I would say : never trust client input, server should be responsible for final check/rotate/resize.

[MikMuller]

Agreed.

[webbird]

Yep.

[MikMuller]

Any updates? Loving this tool, but the long upload time is killing me. I switched to DropZone from PLupload because of other reasons, and am now missing the pre-resize option.

[MikMuller]

Is this something that is going to happen in DropZone? If not, I'll have the switch to something else. My clients are trying to upload photos straight out of their camera and the upload times are very long since all digital cameras now shoot HUGE files. A 16 mega pixel photo is 3MB. If they're uploading 40 photos, which isn't uncommon, that's 120MB of uploading. If the photos were resized before uploading, say to 400 pixels across, that's maybe 50KB per photo... 2MB total for all 40 photos. Much better!

Please add this feature. It's critical. The auto-rotate would be nice as well, but not as critical.

[4waymedia]

I think that a solution such as Dropbox or Amazon aws would be a better solution for you.

Regards,
Paul

Sent from my iPhone

On Aug 7, 2015, at 10:47, Michael Muller [email protected] wrote:

Is this something that is going to happen in DropZone? If not, I'll have the switch to something else. My clients are trying to upload photos straight out of their camera and the upload times are very long since all digital cameras now shoot HUGE files. A 16 mega pixel photo is 3MB. If they're uploading 40 photos, which isn't uncommon, that's 120MB of uploading. If the photos were resized before uploading, say to 400 pixels across, that's maybe 50KB per photo... 2MB total for all 40 photos. Much better!

Please add this feature. It's critical. The auto-rotate would be nice as well, but not as critical.

—
Reply to this email directly or view it on GitHub.

[oiffel2]

I had to move to blueimp jquery fileupload due to this issue. Seems to work very well so far for resizing large megabyte photos.

On Aug 7, 2015, at 11:31 AM, Paul [email protected] wrote:

I think that a solution such as Dropbox or Amazon aws would be a better solution for you.

Regards,
Paul

Sent from my iPhone

On Aug 7, 2015, at 10:47, Michael Muller [email protected] wrote:

Is this something that is going to happen in DropZone? If not, I'll have the switch to something else. My clients are trying to upload photos straight out of their camera and the upload times are very long since all digital cameras now shoot HUGE files. A 16 mega pixel photo is 3MB. If they're uploading 40 photos, which isn't uncommon, that's 120MB of uploading. If the photos were resized before uploading, say to 400 pixels across, that's maybe 50KB per photo... 2MB total for all 40 photos. Much better!

Please add this feature. It's critical. The auto-rotate would be nice as well, but not as critical.

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub.

[maria-p]

I really wanted to do it with Dropzone, so I found Cropper, and implemented a bit hackish solution to make them work together.

I listen to thumbnail event, init cropper and trick Dropzone by replacing originally selected file with the cropped one. There probably is a much simpler way to do that, but I failed to find it.

UPD: original issue here is for resize, not crop, but there won't be a huge difference. Same way will work for any client side file manipulations.

[webbird]

A hackish solution that works is better than no solution. ;) Thanks for sharing, I will give it a try.

[iraxl]

+1 - resizing on the client will be a significant benefit for mobile users.

[klemm89]

This would definitely be a nice network optimization for mobile users. Already have the server side resize in place, and will try the thumbnail hack for the moment. Thanks @maria-p

[avovk]

Can't really use on mobile without this feature.

[iraxl]

@maria-p - thanks - I leveraged some of your work to build my solution.

[sonpython]

hey guys, I've added some canvas and js stuffs to the add file action of dropzone to resize and compress photo before add to the file list.

https://github.com/sonpython/dropzonejs_add_client_side_resize_compress/blob/master/dropzone_resize_and_compress_client_side.js

You can change these value:

var max_w = 800;
var max_h = 600;

var dataURL = canvas.toDataURL('image/jpeg', 0.5); => 0.5 means compress a haft. smaller is stronger compress

your photo will be in the list resizeImgList

[webbird]

So how is this to be used? Instead of Dropzone.js?

[sonpython]

@webbird this is not a replace of dropzone.js
If you take a deep look at dropzone.js docs, you will see that it allows us to define action to hook to it's workflow. My code just a short code to define two actions (resize and compress a photo) and then inject it before files were add to the list. [sorry for my bad english]

[Beronien]

I have a version of the dropzone.js where I directly modified the source in order to be able to make the clientside resize.
I have currently a pullrequest but I'm new with coffeescript and the merge is having trouble. In any case, you can get the dropzone.js file from my repo in this link while I work on merging with the current branch.

Ve advised as the code is tested and working in my environment, but not all scenarios are being covered, and it can misbehave in some cases.

https://github.com/Beronien/dropzone/blob/master/dist/dropzone.js

[webbird]

@sonpython So I only load your JS in addition to dropzone.js and that's it?

[Beronien]

Nope... the file IS dropzone.js with new added options, but in a very Alpha version. Replace the current with this one, and that's it. Should be resizing right away before posting to the server.

In any case, I discourage to use this until it's fully merged with enyo/dropzone branch, because then It will pass all the tests that right now is failing. Use it under your own responsibility, and check for updates often.

[sonpython]

@webbird yes, include the dropzone.js then use my code to define a dropzone object. You should read the dropzone docs carefully you will know how to use my code. It's just a hook to the normal define dropzone object which I've included the compress and resize function before file add to the list

[JimmyVT]

@sonpython Hi! Thank you for sharing your code! Quick question, how would you go about processing the files in the resizeImgList?
I added a myDropzone.processFile(data); right after resizeImgList.push(data); but then two files are uploaded (the resized version and the full res version). Could you point me on the right direction? Thanks!

[sonpython]

please try add myDropzone.removeFile(file); right after resizeImgList.push(data);
and let me know if it work :)

[JimmyVT]

That was it! Thank you :)

[josualeonard]

Thanks to @sonpython for the idea and code snippet. cc: @mschipperheyn.
Still can't find more elegant way to modify without touching dropzone.js code.

There's WARNINGS

• I'm not using multiple file upload (multipleupload set to false), so this will works to send file by file. I think it's possible by counting total processed before send.
• Only handling jpg and png, for other type you should figure it by yourself
• You might loose EXIF upon resizing, use https://github.com/exif-js/exif-js (I'm planning to send exif as parameter)
• I don't think it's handling orientation yet

proceed... starting around line 1342, you'll see there's 'for'

For me, I manage to do this, modifying:

        formData.append(this._getParamName(i), files[i], files[i].name);
        return xhr.send(formData);

to:

    // decare this as current to be used inside onload below
    var current = this;

    for (i = _m = 0, _ref5 = files.length - 1; 0 <= _ref5 ? _m <= _ref5 : _m >= _ref5; i = 0 <= _ref5 ? ++_m : --_m) {
      // declare this, also to be used inside onload
      var filename = files[i].name;
      var type = files[i].type;

     // start resizing file
      var canvas = document.createElement('canvas');
      var max_w = 2400; // you can change this
      var max_h = 1600; // you change this
      var reader = new FileReader();
      reader.onload = function(e) {
        var img = new Image();
        img.onload = function() {
          var w = img.width;
          var h = img.height;
          var ratio_w = 1;
          var ratio_h = 1;
          if(w > max_w) {
            ratio_w = max_w / w;
          }
          if(h > max_h) {
            ratio_h = max_h / h;
          }

          var ratio = Math.min(ratio_w, ratio_h);
          w = Math.floor(w * ratio);
          h = Math.floor(h * ratio);
          canvas.width = w;
          canvas.height = h;
          var ctx = canvas.getContext('2d', {preserveDrawingBuffer: true});
          ctx.drawImage(img, 0, 0, w, h);

          var dataURL = canvas.toDataURL(type, 1);
          var a = dataURL.split(',')[1];
          var blob = atob(a);
          var array = [];
          for(var k = 0; k < blob.length; k++) {
            array.push(blob.charCodeAt(k));
          }
          var data = new Blob([new Uint8Array(array)], {type: type});
          formData.append(current._getParamName(i), data, filename);
          xhr.send(formData);
        };
        img.src = e.target.result;
      };
      if(type=='image/jpg' || type=='image/png' || type=='image/jpeg'){
        var w = files[i].width;
        var h = files[i].height;
        // No need to resize if smaller than max
        if(w<=max_w && h<=max_h){
          formData.append(current._getParamName(i), files[i], filename);
          return xhr.send(formData);
        } else {
          reader.readAsDataURL(files[i]);
        }
      } else { // it's not a jpeg or png, just send it
        formData.append(current._getParamName(i), files[i], filename);
        return xhr.send(formData);
      }
    }
    // I think the return isn't actually used
    return true;

Still hope if someone would give better solution. I hope this will help!

[arynadam]

This is a nice and clean solution @josualeonard , thanks for sharing.
However, as you mentioned, EXIF data is lost.. I am curious if something like ExifRestorer.js could be implemented into this? https://stackoverflow.com/a/18298040

I have tried to join the codes together but I have no experience in canvas resizing...

[josualeonard]

Hi @arynadam, there are already lots of solution for the image resizing itself. You can pick one and implement it, what you need is just the image base64 data after resizing.

Note these lines:

  var dataURL = canvas.toDataURL(type, 1);
  var a = dataURL.split(',')[1];
  var blob = atob(a);
  var array = [];
  for(var k = 0; k < blob.length; k++) {
     array.push(blob.charCodeAt(k));
  }
  var data = new Blob([new Uint8Array(array)], {type: type});

That's my problem for now, I'm loosing the exif. I never tried exifrestorer, let me know if that worked with you. The easiest way for me now is to send exif data as parameter.

[MikMuller]

@enyo, I would donate $200, today, for a Dropzone that (a) read the EXIF info to correctly orient a photo when dragged in (on phones or desktop browsers) and retained it for future possible GPS uses, (b) allowed you to change the cropping before uploading (optional), and (c) resized the photo before uploading.

Item (a) is very important, as the majority of users out there do not understand why PC/Mac/phone shows a photo correctly rotated on their screen, but when it's uploaded it's sideways.

[MikMuller]

Seriously. Send me a pm and I will forward cold hard cash as a thank you for jumping on this sooner rather than later... if you have the time. I have some projects coming up that really need a tool like this. Currently using PLupload and I'm not entirely happy.

[Amethi]

+1 for a plugin that resized before uploading whilst retaining exif. @enyo this is an amazing project. Thank-you for all the time you've put into it.

[ejlocop]

@sonpython Hi, i'm trying to use your snippet code.
can you please help me with this,
here's the scenario. i separated your code and put it inside a function,
so.

if (file.size > 2.5MB) { // example only
ob.compress(file);
}

var ob = {
 compress: function(file){ 
  // your snippet here..
 }
}

so. when i call the compress function. the file should be now smaller, but when i log it to console.
the file size was still the same.
example
file.size = 5MB
when i call compress
file.size still 5MB.

anything i'm missing with your snippet ?..

[sonpython]

@ejlocop
Hi,

as you noticed that my snippet does not modify the file variable.

it read from it then push the resized image to an array resizeImgList

So if you console.log the file you still see it as original.

If you want to get the resized images, please read it from the resizeImgList as a blod then modify it or convert it to a file as your purpose.

[ejlocop]

@sonpython i see,
so the file that's in the preview is the file added.
and whenever i myDropzone.processQueue() the resizedImage will not be uloaded into server right.? so i'll do it in my this.on('sendingfile'). am i correct?

btw thanks.

hmm, the reason why i put your snippet into a function is to recursively call it when the file is still big enough for uploading.
ie:
if the file added was 5MB of size.
compress() method will be call and if it still bigger than 1MB after compressing. compress() will be call again until i get the desired result.
i know that this is not a good approach tho. :)

[groomain]

Is any update with this functionality? :+1:

[comphelp]

+1 for this. I love this tool but without client side resize it's going to be of limited use to my mobile clients.

Is there any update on your intentions for this clearly very popular request?

[akfaisel]

+1

Is it done?

[LusciousPear]

+1 as well, xo

[Luddinus]

+1

[cromartie1984]

hi @sonpython, how do you change the current file by the resized one ?
with this : myDropzone.addFile(resizeImgList) ?

[MikMuller]

@enyo , I will donate $100, today, for a Dropzone that (a) reads the EXIF info to correctly orient a photo when dragged in (on phones or desktop browsers), and (b) resizes the photo before uploading.

Item (a) is very important, as the majority of users out there do not understand why PC/Mac/phone shows a photo correctly rotated on their screen, but when uploaded it is sideways.

Is there any movement on this project? Seems like a lot of people want it.

[rnicholus]

I can't speak for Dropzone, but I do know that Fine Uploader, which is also a free file upload library, has had this exact feature (and more) for some time now. If you're not able to implement this for Dropzone, another option is to use Fine Uploader instead.

Full disclosure: I've maintained Fine Uploader since 2012. It's MIT licensed.

[LusciousPear]

@rnicholus Ray -- thank you so much. Switched to Fine Uploader and it's fantastic.

[enyo]

Hey everybody. I'm sorry that this issue is 1 1/2 years old and I haven't gotten to it yet. I will do my best to implement it very soon.
Fine Uploader looks like a serious alternative, although I personally don't much care about their style (visually and code wise).

[dangelsaurus]

this would significantly enhance the user experience for those with slow upload speeds (client network speed) which is the issue I'm running into.

[derbra1513]

I agree +1

[groomain]

Any update @enyo ? ;)

[cebrax]

Looking forward to hearing from you @enyo :)

[wsaeed77]

@enyo. have you done any work in dropzone js client side image resize?

[cromartie1984]

It could be interesting to use croppie.js for this plugin, so it would handle the image resize

[jlubeck]

+1

[dikkini]

+1

[MikMuller]

So... is this going to happen, or should I remove myself from the thread? I've been posting here since June of 2015 -- almost two years -- about this one issue. I am prepared to send money. Please let us know.

[Beronien]

@MikMuller I had a version up and running 2 years ago (directly hacked into the JS version, I don't know any CS) so if you are interested, just let me know and I can share it (free of charge of course). I'm sure that it can be tweaked, but it has been working for 2 years already with no problem at all.

[dikkini]

@Beronien share it please. And if you can, than show lines of tweaks and small example of features.

[rpesciotta]

@Beronien : I'm very interested. I tried to change myself, but in my specific case, using dropzone and slingshot in a metero app, I run into problems to make it work. So maybe you have a better solution, therefore I'd be great if you could share!

[MikMuller]

@Beronien, yes, share it please!

[enyo]

I'm nearly finished with the implementation. I will very likely release it today! Sorry for the long wait.

[MikMuller]

Rock on! Will it also look at xdif info to properly orient photos if they were taken "sideways" i.e. smart phone portrait shots.

[enyo]

@MikMuller I'll do my best to include a solution for the exif data as well. Atm looks good!

[enyo]

@MikMuller Finished the implementation. It'll take me a few days though to clean everything up and release it properly, since it has an additional exif.js dependency, and I need to write documentation for it.

If you want, I can give you the compiled file though, and you can already embed it in your software.

These are the new features:

• Browser resizing of images (before they get uploaded to the server)
• The EXIF data is copied to the resized images, so nothing gets lost
• The thumbnails in the browser respect EXIF information. So when an image from an iPhone is posted, it is properly rotated.

🎉

[MikMuller]

YES!

[enyo]

Going to bed now (spent my whole Sunday on that issue :D), and will send you the file with instructions tomorrow.

[sonpython]

can wait to see it :)) we've waited it for years :))))))

[enyo]

Hey everybody,

As I said, I still need to finish up on the documentation and release related stuff, but you can already download the latest version though:

https://gitlab.com/meno/dropzone/builds/15817286/artifacts/browse/dist/

There are 4 new options now:

resizeWidth: null,
resizeHeight: null,
resizeMimeType: 'image/jpeg',
resizeQuality: 0.8,

You can either provide both, resizeWidth and resizeHeight (which will crop the image) or just one, which will resize the image according to the original aspect ratio.

resizeQuality is the range 0..1.

---

To fix the orientation issue for images with an Orientation EXIF information, you need to include the optional dependency exif.js on your page before you include Dropzone.

[enyo]

The reason I can't deploy it properly immediately, is because of the exif.js dependency, since Dropzone can either be included as a standalone JS file, or with multiple dependency management tools. Since exif.js supports bower and npm, dropzone should be able to handle those properly as well.

[badlydressedboy]

Wow - I found this 2.5 year old thread 2 days after the functionality got released! That's crazy lucky.
Seems to be working fine for me - thanks for the work!

[seytone]

I can't describe my excitement for this. Thanks @enyo for the effort. I had been looking for a solution to this problem for months and hoping that Dropzone would have this functionality, until finally you did it 👍 I'm sure many people will take advantage of this new Dropzone tool. Congratulations! (sorry for my poor english)

[ashleyken]

I'm trying to combine Dropzone with cropper.js following this gist https://gist.github.com/maria-p/8633b51f629ea8dbd27e

Cropper.js says 'As iOS devices limit memory, the browser may crash when you are cropping a large image (iPhone camera resolution). To avoid this, you may resize the image first (below 1024px) before start a cropper.' - is it possible to hook into this new resizing functionality in Dropzone before the image is passed to Cropper?

[seytone]

Hi guys.

I'm using the new unrelease/version of Dropzone published days ago by @enyo and it's running fine, however, I has had to include some extra code from JavaScript-Load-Image library to fix an issue that I had. Well, finaly all is running fine, but now, apparently when an image has EXIF data and it is submited to the server, this return the image file name plus a particular error message about an unexpected character (ASCII code). If the image hasn't EXIF data, the server just return the image file name as should be.

Here a sample of the issue:

c9b3ffe77b79d37652a6fd9d9385976e.JPG
<div class="error">
    <h4>A PHP Error was encountered</h4>
    <p>Severity: Compile Warning</p>
    <p>Message:  Unexpected character in input:  '' (ASCII=7) state=0</p>
    <p>Filename: lib/rules.php</p>
    <p>Line Number: 816</p>
    <p>Backtrace:</p>
</div>

Is there any way to delete or remove the image EXIF data before upload this to the server using Dropzone?

Any idea?
Thanks.

[Robinjoeh]

Thanks for the update @enyo !

I tried this on my setup as well, and adding server-saved images to the dropzone isn't working correctly in this last version.

This is the result:

Using the released stable version of dropzone it looks like it should. The images are saved on the server, the URL's provided are correct, still not showing up for some reason. I guess it has to do with the thumbnail/resize thing?

Settings:

thumbnailWidth: null,
thumbnailHeight: 200,
resizeWidth: 1920,
resizeHeight: 1080,
resizeMimeType: 'image/jpeg',
acceptedFiles: '.jpg,.jpeg,.png',

Adding to dropzone using this code:

var mockFile = { name: $(this).text(), server_hash: $(this).data('hash'), size: $(this).data('size'), status: Dropzone.ADDED, accepted: true };
thisDropzone.emit("addedfile", mockFile);
thisDropzone.createThumbnailFromUrl(mockFile, $(this).data('src'), function() { }, "anonymous");
thisDropzone.emit("complete", mockFile);

Again, this works just fine with the stable version of dropzone. No errors are present in the debug console. My bet is it is something with the generation of thumbnails that isn't working.

Do you have any idea?

[enyo]

Hey @seytone,... I guess that an option to exclude EXIF data is needed for that? Would that solve your issue?

EDIT: Now tracked by this issue on GitLab

[enyo]

@Robinjoeh could you send me a link or the source code for debugging? In which browser is this happening?

[seytone]

Oh! Of course @enyo... That option will be a good feature for Dropzone as an optional configuration parameter. At the moment I was able solve the issue with disabling the php error reports just for that controller, but I know that's not the better solution.

[mschipperheyn]

There seem to be zero examples of how to use this functionality.

[kuoliangkwong]

Hi, is there any function to resize image to min size? Something like resizing a 20x20 image to min size 100x100. Would love to have this feature too~