Change name of uploaded file on client

Question

I have the following.

<form method="post" action="/send" enctype="multipart/form-data">
    <input type="file" name="filename" id="AttachFile">
</form>

I want to change the name of the file the user uploads.

If the user selects "Document.docx" I want to change it to "Bank - Document.docx".

I still want to read the file the user selected, not some other file, just use a different name for it when sending to the server.

I'm working within bounds of an application which doesn't allow control of the server side, so ideally I need to do this on the client. Furthermore I need this to work within the confines of a form.

I have tried variations of the following without success:

document.getElementById("AttachFile").name = "test.txt"
document.getElementById("AttachFile").files = "test.txt"
document.getElementById("AttachFile").value ="test.txt"

So you want to change "picOfMyCat.jpg" to "/banking/secretpasswords.dat" before uploading? Good luck with that ;) — mplungjan, Aug 10 '18 at 08:34
@mplungjan - I think the goal is to read the file the user identified, not some other file, just use a different name for it when sending to the server. So the file sent would still be `picOfMyCat.jpg`, it would just have the name `secretpasswords.dat`. :-) — T.J. Crowder, Aug 10 '18 at 08:36
@T.J.Crowder I know. I was joking. But the browser will not allow that usecase — mplungjan, Aug 10 '18 at 08:37
@JamesWood - I'm fairly sure my answer is wrong, and see [man tou's answer](https://stackoverflow.com/a/51783076/157247) is right. — T.J. Crowder, Aug 10 '18 at 09:37
@T.J.Crowder, Your answer might be correct within the confines of a `form`. I've updated my question - sorry should have put it in before. — James Wood, Aug 10 '18 at 11:43

man tou · Answer 1 · 2018-08-10T10:29:26.310

You can do it through the File API. We can also use the Blob API to be compatible with Microsoft edge.

var file = document.getElementById("AttachFile").files[0];
var newFile = new File([file], "Bank - Document.docx", {
  type: file.type,
});

Here's a complete example — see comments:

HTML:

<input type="file" id="AttachFile">
<input type="button" id="BtnSend" value="Send">

JavaScript:

document.getElementById("BtnSend").addEventListener("click", function() {
    // Get the file the user picked
    var files = document.getElementById("AttachFile").files;
    if (!files.length) {
        return;
    }
    var file = files[0];
    // Create a new one with the data but a new name
    var newFile = new File([file], "Bank - Document.docx", {
      type: file.type,
    });
    // Build the FormData to send
    var data = new FormData();
    data.set("AttachFile", newFile);
    // Send it
    fetch("/some/url", {
        method: "POST",
        body: data
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        }
        return response.text(); // or response.json() or whatever
    })
    .then(response => {
        // Do something with the response
    })
    .catch(error => {
        // Do something with the error
    });
});

...and then send that file via [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch) using [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). Excellent. I **knew** something was bothering me. — T.J. Crowder, Aug 10 '18 at 09:38
Do you think this would work within the confines of a `form`? I've updated my question - sorry should have put it in before. — James Wood, Aug 10 '18 at 11:42
@anjanesh - [Yes, since v14](https://caniuse.com/#search=fetch) (and `FormData` since v12). To support Edge v12 and v13 you could use `XMLHttpRequest`. — T.J. Crowder, Aug 10 '18 at 11:50

T.J. Crowder · Accepted Answer · 2018-08-10T11:47:58.453

2

You can't rename the file using a standard form submission. The name of the file being uploaded is read-only. To do this, you'd have to do it server-side. (The designers of file uploads seem to have either not considered this rename-on-upload use case or not felt it needed to be addressed by the API.)

However, you can prevent the default form submission and instead submit it programmatically via ajax, which does allow you to rename the file; see man tou's answer.

edited Aug 10 '18 at 11:47

answered Aug 10 '18 at 08:33

T.J. Crowder

1,031,962
187
1,923
1,875

Can a new file be created using js api, named and then filled with the content of user selected file. – Shivanshu Kant Prasad Aug 10 '18 at 08:41

score 0 · Answer 3 · answered Aug 10 '18 at 08:42

0

If you cannot work on the server side then you have to either rename the file BEFORE upload or AFTER download. How you present the name for the user is you to decide.

answered Aug 10 '18 at 08:42

Simon Jensen

287
5
24

1

But how would I do that? – James Wood Aug 10 '18 at 08:43
I found this which can change the name before upload. https://github.com/enyo/dropzone/pull/955 – Simon Jensen Aug 10 '18 at 08:47
Perhaps you can get a clear answer from here: https://stackoverflow.com/questions/23589046/uploading-multiple-files-with-the-same-file-name-using-dropzone-js/26659429#26659429 – Simon Jensen Aug 10 '18 at 08:50
That looks like its using a third party library that I'm not/can't use. – James Wood Aug 10 '18 at 08:51
You can always download the libraries and use them locally. – Simon Jensen Aug 10 '18 at 08:51

Change name of uploaded file on client

3 Answers3