aurawindsurfing's avatar

Let user upload any photo size - resize later

Hey,

I know I can limit user when he is uploading files but I do not want to do that. I had a limit of 6MB per photo, raised it to 9MB not some android phones provide even bigger image files. So, of course, there will be a limit, let's say 15MB per photo max.

When I save this file locally I would like to make sure it is not bigger then let's say 2MB before sending to it DO or S3 storage. What is the best way to approach this? With Intervention, I cannot specify file size so quality + resize is actually hit & miss scenario. What do you guys do usually?

Thanks!

0 likes
9 replies
RoboRobok's avatar

File size is file API's work, not image API's. Storage will tell you the size of uploaded file just fine.

$size = $request->file('input-name')->getSize();

Source: Documentation of File Uploads

spectatorx's avatar

Trust me, you do not want to receive 1TB image file. What i mean is you always have to specify filesize limit otherwise someone will abuse it unintentionally or not, or even worse, exploit it in some way sooner or later.

To estimate filesize limit properly you need to take into account few things: -what is my target audience -what they want to upload -from what devices they usually upload -how big resolution may be in their files When you will figure out these variables then you can estimate what filesize your users shouldn't exceed at any circumstances.

When you are estimating limits of anything you have to think also about security and cost of potential results of your decision.

aurawindsurfing's avatar

Hey guys,

Yes I understand that there must be a limit. So what is the biggest modern mobile phone picture 15MB? Lets put limit to 15MB.

This is not the question however.

The question is: How to make sure picture is only of max certain fileSize before uploading it to S3 and after getting it from the user.

Thanks!

Cronix's avatar

You can use JS to get the filesize when they select it in a file input, and disallow it from being uploaded in the first place. That's the only way afaik to be able to do it before it actually gets uploaded, which is a HUGE timesaver and resource saver. Here's a jsfiddle I wrote for someone else awhile ago on this forum for the same thing: https://jsfiddle.net/468cpshd/

It uses 2mb as an example. Select one smaller than that, and one larger than that. You'll get an alert if it's > 2mb.

I'd set the limit at like 30-50mb or something. Otherwise you'll constantly be adjusting it as megapixels in cameras continue to increase year after year increasing the sizes of the images.

jlrdw's avatar

That is some good fiddling. A definite bookmark.

Snapey's avatar

no, im not aware of being able to downscale an image to a specific byte size. Its done to a resolution because the size of the file varies according to the level of detail in the image.

pick an image dimension and let the file size be what it will be

jlrdw's avatar

@aurawindsurfing images can be tricky to work with.

One site I maintained, I used Adobe Photoshop to get the images ready. It had a "save for web" feature that reduced the file size quite a bit, yet image quality was still great.

One problem encounted is:

Certain images will show correct on 95% of devices, but depending on what device took the photo, it will be turned 90 degrees on a few devices when viewing.

I would look for a package, probably a js package that verifies the proper rotation also. photoshop caught stuff like that.

If your users are uploading images have them do so via a package you can perhaps give instructions to on setting up on their device.

Otherwise handle your self like Facebook does. And I don't know how they do it, never needed that before.

I am in fact getting ready to seek out more knowledge on that very thing.

It gets back to the main 3 rules all programmers need to learn:

  • 1 Never trust user input
  • 2 Never trust user input
  • 3 Never trust user input

To me that includes image uploads, unless checked, filtered, etc.

Let user upload any photo size

Egads -- just kidding.

jbloomstrom's avatar

Check out the Intervention library. I use it for optimizing uploaded images by broadcasting an event when an image is uploaded. Then I have a listener kick off a job that runs my optimization routine.

The whole process is covered in depth at Test Driven Laravel

aurawindsurfing's avatar

@jbloomstrom @jlrdw @cronix

Thanks a lot for all the input. I use Intervention at the moment, obviously have it linked to event makes more sense then directly while user performs an upload.

@cronix this is great example and this is what I have in place now, as you said however you need to constatnly rise it up as mobile devices take bigger and bigger pictures.

I guess Intervention is way to go, resize image, lower quality and hope for the best outcome.

Have a good day!

Please or to participate in this conversation.