Limit image filesize before upload

Question

I am uploading images as base64 strings to an ASP.NET WebService via AJAX. Because of AJAX/JSON, the maximum filesize is pretty limited (from my tests around 3MB before the AJAX requests get too long).

So is there any way, to resize a given image to a FIXED file size (like 3MB) and not a fixed resolution?

I already now about the capabilities of canvas for resizing purposes, but setting the resolution and/or quality isn't just cutting it for me.

An idea I already had, was to have a loop resize the image over a couple of cycles and check the approximate filesize by checking the base64 length, but that seems both not efficient and not precise enough.

I know I could chunk the requests, but I would have to change the WebService as well, which I only want to do as a last resort.

score 1 · Accepted Answer · edited May 23 '17 at 12:23

JSON file has no limits in its size. You can upload as large files as you need, as long as you have enough resources to handle it. The 4MB limit is ASP.NET-side default limit.

You can add a maxRequestLength attribute to your system.web - httpRuntime config key and it will accept files of any size:

<configuration>
  <system.web>
    <httpRuntime maxRequestLength = "1048576" />
  </system.web>
</configuration>

For IIS 7+ you will also need to add:

<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="1073741824" />
    </requestFiltering>
  </security>
</system.webServer>

If you still want to resize an image, you can do this both server-side or client-side.
Resize an Image C#
HTML5 Pre-resize images before uploading

Also, there are some plugins to do this: Image resizing client-side with javascript before upload to the server

The server-side way is more reliable and browser-independent, while the client-side approach will decrease the amount of incoming traffic to server.

I will check this out! I only read about the maxJsonLength setting, so I already have `` in my Web.config. Will report back after testing. — Decay42, Nov 05 '15 at 08:43
Okay so, this works as expected. Thank you. This eliminates the need to limit the filesize, but I would like to be able to do this nonetheless, to save space serverside. — Decay42, Nov 05 '15 at 08:50

score -1 · Answer 2 · answered Nov 05 '15 at 08:39

-1

If you have an input file element...

<input type="file" id="myFile" />

you can use

var sizeInBytes = document.getElementById('myFile').files[0].size

to get the file size

answered Nov 05 '15 at 08:39

Christopher

412
3
11

Completely misses the point of the question. I already KNOW the filesize, but I want to reduce it afterwards. – Decay42 Nov 05 '15 at 08:40

Limit image filesize before upload

2 Answers2