How to append a file into a File Input field

Question

I am trying to create a file drag and drop feature.

I've the drag and drop working from the div and handling the file.

Now I now would like to append this file to the Input[type=file] of the form .

How could I do that?

I tried uploadFormData.append("files[]",f); and derivates but it doesnt work. My debugging was submit the form and check the headers to see if the file was sent.

Could anyone point me in the right direction on how achieve this?

    <form enctype="multipart/form-data" id="yourregularuploadformId">
         <input type="file" name="files[]" multiple="multiple">
    </form>

<script>
      var uploadFormData = new FormData(jQuery("#yourregularuploadformId")[0]);

        function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files; // FileList object.

        // files is a FileList of File objects. List some properties.

        var output = [];


        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                      f.size, ' bytes, last modified: ',
                      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                      '</li>');
               uploadFormData.append("files[]",f);
        }

        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
      }
</script>

You want to silently add a file to an input file without any user interraction, is it what you want? — A. Wolff
– A. Wolff, Commented Jun 12, 2013 at 11:00
Ok, so user drag a file in a div and you want to add this file in a input file[] ? If yes, why not let your user directly drag file to an input file? — A. Wolff
– A. Wolff, Commented Jun 12, 2013 at 11:02
Maybe if you find a way to hide the input file but i seriously see some security holes here and im quite sure it is not possible. — A. Wolff
– A. Wolff, Commented Jun 12, 2013 at 11:09

Colonel Thirty Two · Accepted Answer · 2024-08-13 17:31:06Z

4

Create a DataTransfer object, add files via its items field, obtain the FileList of files, then assign it to inputEl.files:

document.getElementById("add-file").addEventListener("click", ev => {
  ev.preventDefault();
  const inputEl = document.getElementById("formfiles");
  
  const dt = new DataTransfer();
  
  // Add items here, possibly from the inputEl's existing list
  dt.items.add(new File(
    ["hello, world!"], "hello_world.txt"
  ));
  
  // Set the input's files
  inputEl.files = dt.files;
});

<input type="file" id="formfiles" name="formfiles" multiple />
<br>
<button id="add-file">Add File Dynamically</button>

answered Aug 13, 2024 at 17:31

Colonel Thirty Two

27k9 gold badges52 silver badges94 bronze badges

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

Comments

Jaay · Accepted Answer · 2013-06-12 11:07:56Z

3

I'm afraid you can't do it this way because you can't dynamically fill an <input type="file" ....> just because if this was allowed, that mean you can grab any file from the user's computer without any validation.

What you can try to do is bind an event like .change() on your div to trigger when a file is dragged, then make an ajax call on that bind that will upload the file, and finally get the file name (or whatever you want when the upload is finished) from the ajax callback and process it the way you want

answered Jun 12, 2013 at 11:07

Jaay

2,1411 gold badge17 silver badges34 bronze badges

Comments

NDan · Accepted Answer · 2019-05-21 13:21:36Z

2

It is possible to convert file to Base64 (using FileReader) and upload as a string

  var input = document.getElementById('image');

  function readImage(file, callback) {
    var reader = new FileReader();
    reader.onload = function() {
     input.value = reader.result;
    }
    reader.readAsDataURL(file);
  }

Example: https://codepen.io/ndan/pen/KJqZVd

FileReader docs: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader

ps.

Don't store images in Base64 in your DB
The best solution is to use direct file upload to the cloud storage (s3, gcloud, etc)

edited May 21, 2019 at 13:21

answered Feb 4, 2019 at 9:13

NDan

2,2121 gold badge17 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to append a file into a File Input field

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related