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?

Improve this question
12
  • 1
    var fd = new FormData(); fd.append('image0', blob) <- stop adding the entire form to the formdata Commented Mar 4, 2016 at 16:29
  • 1
    you shouldn't be submitting a <form> if you use FormData, just ajax it (you already duped the <form> anyway, so it should be ready to go) Commented Mar 4, 2016 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). Commented Mar 4, 2016 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... Commented Mar 4, 2016 at 16:39
  • 1
    ... unless you send the form with ajax Commented Mar 4, 2016 at 16:39
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.