How to attach a file to html 'file' element for upload with jquery/js?

Question

Here is the html element we are trying to attach a file to:

<input id="uploaded_file_file_for_upload" class="file optional" type="file" name="uploaded_file[file_for_upload]">

User already selects a file for the element above. What we need to do is to remove the current file selection and attach a new file to it. The new file is an image file and is saved in a canvas element. Here is the js code for new file:

 function resize(image, width, height) {
      var mainCanvas = document.createElement("canvas");
      mainCanvas.width = width;
      mainCanvas.height = height;
      var ctx = mainCanvas.getContext("2d");
      alert(width + '    resize to    ' + height);
      ctx.drawImage(image, 0, 0, width, height);
  .....(remove current and attach the new file to the elelment#uploaded_file_file_for_upload)
   };

We tried the following to attach and it did not work:

$('#uploaded_file_file_for_upload').attr('src', mainCanvas.toDataURL("image/jpeg"));

The problem may be that it is not an image element. What's the right way to remove and attach a file type?

Possible duplicate of stackoverflow.com/questions/29841147/… . Not possible to alter to FileList object . Try converting FileList object to array, using .splice() to remove file from array , insert new file , POST array containing new file object . — guest271314
– guest271314, Commented Nov 11, 2015 at 18:58

Rémi Becheras · Accepted Answer · 2015-11-11 18:59:15Z

1

The short answer is you can't. The only way to upload a file is to ship the file selected by the user, with no change.

The only way to do exactly what you are trying to do here is using :

a native app
a hybrid app with native plugin
via a browser plugin (flash, chrome app...)

Unless, the browser security policy will block you.

Two workarounds could be:

send the original file and resize it server side (php library, nodejs...)
or resize the image as you want, then uploading the base64 encoded image data of the edited image via a POST ajax request to your server, and then write it to a file server side.

edited Nov 11, 2015 at 18:59

answered Nov 11, 2015 at 18:54

Rémi Becheras

15.3k14 gold badges55 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user938363 Over a year ago

Resize on client side has less bandwidth cost and offers better customer experience. It is harder to implement compared with service side solution.

user938363 Over a year ago

Remi Becheras, is text field good to store base64 encoded image data for upload?

user938363 Over a year ago

text field seems ok for the base64 encoded data which is a string.

Rémi Becheras Over a year ago

Yes, send it as a simple string. Its a string representation of an image.

Collectives™ on Stack Overflow

How to attach a file to html 'file' element for upload with jquery/js?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related