1

I have a form which includes an input type="file" to upload an image, and I want to be able to manipulate that image before submission.

(I may want to crop or resize it using an existing jQuery library, for example. I'm posting to WordPress and am tied to gravity forms, which means I can't use a plug-in such as jQuery-file-upload which includes server-side handling too, so my question is more generic.)

I'm trying to understand what happens on submit and how the browser constructs the post to be handled by the server.

If a user has selected a file, can I take that file and do something with it in javascript, and then on the form submit have the browser take my amended version from memory rather than the original version linked to in the input field?

[EDIT]

So, I've discovered some useful insights. Anyone looking at this, here is a useful thread here on SO.

When a user selects an image on a file input field, I can use html5 canvas to manipulate it. I need to then convert it back to a binary file to upload (via canvas.toBlob() in the most modern browsers, or using the technique mentioned in the above link for older browsers).

Then what do I do with it? I can POST it via Ajax as per this Mozilla developers article and for most people this will be fine.

My problem is that I am tied to using Gravity Forms and I need to let it handle the form submission.

Which means I need to manipulate my existing form and let the user hit the submit button as normal.

Where my form has

<input type="file" name="input_3" id="input_3_3">

I have tried in JavaScript:

document.getElementbyId('input_3_3').value = myBlob;

but it appears that I can't assign the blob to the input field.

Reading around, the solutions which involve Ajax make use of FormData objects, and I thought I might be able to append the field but that doesn't seem to work (the form on the page in the DOM and the FormData object are not the same thing?).

So, that's where I'm stuck.

Community
  • 1
  • 1
terraling
  • 470
  • 7
  • 23
  • Yep, some code would be great! – Richard Peck Oct 24 '13 at 10:24
  • I am in the same situation. I have a form in my project that accepts data and an image. I need to crop / resize the image to upload to the server. I couldn't find a solution yet. Now I am thinking maybe I could create a new form for final submit capturing the data the user inserted, removing the original one and inserting the new one in the page with a "confirm" button. Did you find a solution anyway? – Chriz74 May 25 '17 at 15:16
  • I found this post that explains how to deal with forms and binary data client side with ajax: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript – Chriz74 May 25 '17 at 16:23

1 Answers1

0

In theory you can use blob , but practically it is not good solution because it is not supported in all browsers , and there is no current javascripts library to process images , so the best bet is to send it so server and let the server process it .

sino
  • 754
  • 1
  • 7
  • 22
  • 1
    There are libraries available, e.g. https://github.com/blueimp/JavaScript-Canvas-to-Blob, and if you read the SO thread linked to above you can achieve something similar for browsers that don't support canvas.toBlob. Processing on the client is very worthwhile, think someone who tries to upload a 4Mb photo from their phone to use as their 100px * 100px avatar and has to wait 30 seconds for it to upload. – terraling Oct 24 '13 at 21:08
  • I played with BLOB before and it didnt have good support from browsers so I canceled the idea , if you can enforce your user to use only latest browsers then it may work for you – sino Oct 25 '13 at 12:55
  • caniuse.com puts blob constructor support at 73%, and the only major platform that currently doesn't support it is Opera Mini. IE support only came in at IE10, but I think it is used widely enough to be worth pursuing. Especially as it's not that difficult to implement, my issues arise solely from trying to get Gravity Forms to play along... – terraling Oct 25 '13 at 19:54