How do you do image uploads and processing?

Responses (6)

Join the discussion

I do not have an image upload, but if I had to do one with crop and resize:

  1. I'd go client side (why should I use my expensive resources when there is lots of free power on consumer devices these days? A few images won't kill the battery either...)
  2. HTML5 Canvas. Crop and resize are very simple, duh
  3. Some filer or cloud solution. Just make sure to have AV in place
  4. Face detection is a little more tricky and I might consider looking for a library. The kind of functionality really depends on the use case. If it is a simple profile photo (your example) I would only give them crop and keep the image size at the max. dimensions I defined. Other features (like blur) might be easily implemented via a CV library, so no biggy at all
  5. Yes, go ahead! I think such an article might be interesting for lots of people :)
Write a reply...

I used to upload files with

Write a reply...

For client side, have you seen Dropzone.js? It's great for async drag/dropping and uploading files. You can autocrop them with a library like smartcrop.js.

Write a reply...

I recently was working on an angular-laravel application. I used Angular Image upload plugin for size validations.

For the Cropping i used intervention. Its a really awesome image manipulation library with tons of features

They are pretty straight forward and simple to use.

Write a reply...

  1. I agree with what @maruru said. IMO, client side is a better option these days.
  2. Canvas is pretty solid for crop, resize etc.
  3. I usually send the image to server as data URI. Once it is on the server, I send it to cloudinary which is then backed up on Amazon S3.
  4. At Hashnode we are using face detection, thumbnail generation, add gravity, resize and various other transformations.
  5. Yes! I am sure many people will be interested in such an article.
Write a reply...

I'm in love with Cloudinary. Doesn't matter what my user uploads - File gets stored at Cloudinary / S3 and when I present the image back to the user, I choose how to manipulate it - be it gravity on a face for a avatar or specifying max width or max height for a banner image or etc... As the user can't be trusted to upload a reasonably sized photo (dimensions or file size) being able to control it on the front / backend is a win / win.

Write a reply...

loading ...