0

I'm trying to create an image upload interface, but to do the resizing on the client side so as to not tax my server (original files are generally 4Mb each, and I need files that are ~300kb)

I have my <input type="file" name="image0" />, and select my file ("cat.gif").

I then resize it, following the recipe at Mozilla Hacks. I'm left with a blob which I try to put back into my form:

//should I be trying to set the FormData in the presently-blank callback function?
var blob = canvas.toBlob(function(){}, "image/png", 0.95); 
var form = document.querySelector("form");
var fd = new FormData(form);
fd.set("image0", blob);

When I submit the form, it sends the original image file ("cat.gif") I inputed, not the modified one I made as a blob. Here's part of the POST payload:

Content-Disposition: form-data; name="image0"; filename="cat.gif"

How do I bind the blob to the form input?

Escher
  • 5,418
  • 12
  • 54
  • 101
  • 1
    `var fd = new FormData(); fd.append('image0', blob)` <- stop adding the entire form to the formdata – adeneo Mar 04 '16 at 16:29
  • 1
    you shouldn't be submitting a
    if you use FormData, just ajax it (you already duped the
    anyway, so it should be ready to go)
     – dandavis Mar 04 '16 at 16:37
  • But is it even possible to resize an image client side and then submit it synchronously as part of a form then? (I should specify that `image0` is not the only field in my form). – Escher Mar 04 '16 at 16:38
  • @Escher: no, not really. you could use a hidden/text input and dataURL, but not for something 4mb in size... i think i saw vauge talk somewhere about a proposal for a way of constructing populated file inputs, but that's not anywhere in the wild afaik... – dandavis Mar 04 '16 at 16:39
  • 1
    ... unless you send the form with ajax – adeneo Mar 04 '16 at 16:39
  • See [Chrome: Create file input from blob with Javascript?](http://stackoverflow.com/questions/11739946/chrome-create-file-input-from-blob-with-javascript) – Michał Perłakowski Mar 04 '16 at 16:40
  • @dandavis _"i think i saw vauge talk somewhere about a proposal for a way of constructing populated file inputs, but that's not anywhere in the wild afaik... "_ `new File()` constructor is available in chromium / chrome 38+ https://www.chromestatus.com/feature/5731244088229888 – guest271314 Mar 04 '16 at 16:50
  • @guest271314: that is probably what i saw, it was about 6 months ago. thanks for the link. but looking at that, i now realize it's only half the battle for the OP; there's still no way to pop the to "spoof" a file submit on a "real"
    ...
     – dandavis Mar 04 '16 at 16:56
  • @dandavis You are correct about "spoof"ing `input` `Files` object; could send created `Blob` , `File` object or `data URI`, as suggested. See also http://stackoverflow.com/questions/22365796/simulate-drop-file-event/ – guest271314 Mar 04 '16 at 17:04
  • @Escher See http://stackoverflow.com/questions/13289488/blob-url-to-file-with-php – guest271314 Mar 04 '16 at 18:51
  • @Escher What is server side language ? – guest271314 Mar 04 '16 at 20:14
  • Python/Django. The short answer to this question is "you can't do it that way", and so I've moved on to ajax here: http://stackoverflow.com/questions/35805257/how-to-post-and-retrieve-blob-with-django – Escher Mar 04 '16 at 20:15

0 Answers0