I have been pulling my hair off trying to find a way to select an image (input type=file), run a method (on change=function blah(this)) to resize the image, then put the file back to the form (I know we cannot put it back to the input element due to security reasons)! I am after a solution for it without using Ajax. Why? I think I would spend more time changing the application than actually finding a solution for this. I need to upload the image with all the form data as I need to link ids across a couple of tables. So it would be a big problem uploading the file first (through ajax) and then later on associate Ids (I don't want do go down that road, hence why I am here with my question). I am using asp.net mvc5. I can upload the image without resizing it, but the images will have around 3 to 5 MB. This is too much to keep on the server (thousands os customers with multiple images each) but specially too long uploading (otherwise I would resize it on the server). I have read about 20 different threads here where I could get good ideas, like the math calc to resize the image, use canvas, FileReader, readAsUrl, etc. But all the scenarios propose an async upload. So my question is: is it actually possible to load the image through input file element, resize and somehow bring it back to the form for upload on a full postback?
Threads that I have checked: HTML input type=file, get the image before submitting the form How to upload preview image before upload through JavaScript Preview an image before it is uploaded Resize image before submit the form html5 HTML5 Pre-resize images before uploading among many others! These are just a few examples.
Any help will be great!
