HTML5 Multiple File Upload: Set Filenames with JavaScript?

Question

An HTML form that allows uploading multiple files looks like this:

<form action="http://somehost.com/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" multiple>
  <input type="submit">
</form>

The user can click the supplied input button and select multiple files to upload.

How can the filenames be set using JavaScript?

Why would you want to do this?

To allow drag'n'drop, for instance. So that when the user drops files from their system onto the form, it can automatically populate the file input field with those files.

Is there a better way?

Possibly with some html multipart mime send function?

This article might give you some hints (check the source code) html5demos.com/dnd-upload — Asons
– Asons, Commented Oct 13, 2015 at 10:48

tonymayoral · Accepted Answer · 2016-02-11 02:30:20Z

4

The append() method of FormData accepts a third optional filename parameter. You could:

<input type="file" name="image" accept="image/*" id="fileinput" multiple>
<button onclick="upload()">Upload</button>

<script>
  this.upload = function() {
    var fileInput = document.getElementById('fileinput');
    for (var i = 0; i < fileInput.files.length; i++) {

      var file = fileInput.files[i];
      var xhr = new XMLHttpRequest();
      var fd = new FormData();

      xhr.open("POST", "http://somehost.com/upload", true);    

      fd.append("upload_file", file, 'YOUR_FILENAME_' + file.name);

      xhr.send(fd);

    }
  }

</script>

answered Feb 11, 2016 at 2:30

tonymayoral

5,2872 gold badges28 silver badges27 bronze badges

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

Comments

Patel · Accepted Answer · 2015-10-13 06:59:28Z

0

No, we can't set file names by JavaScript for obvious security reasons. JS simply is not allowed to do that. This should be done on server-side.

Files will have the names which they already have on the file system (on your local computer). You can, however, change them on server after uploading them.

answered Oct 13, 2015 at 6:59

Patel

1,4881 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

HTML5 Multiple File Upload: Set Filenames with JavaScript?

How can the filenames be set using JavaScript?

Why would you want to do this?

Is there a better way?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

How can the filenames be set using JavaScript?

Why would you want to do this?

Is there a better way?

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related