Added possibility to rename the filename before uploading

[cyrilkyburz]

A loot of people need to rename the filename before it's uploaded, myself included. So I quickly implemented the functionality.

See #656 or #722

Example how to use: (if the options.renameFilename is not specified, nothing changes)

var cleanFilename = function (name) {
   return name.toLowerCase().replace(/[^\w]/gi, '');
};
var dropzone = new Dropzone("div#myId", { renameFilename: cleanFilename });

[Metis77]

How does Renaming work.
Could not find any hint in the documentation.

[BigOHenry]

How can i rename the file before uploading? There is any example of this. Thanks

[lukaselmer]

please merge 👍 👍 👍

[cyrilkyburz]

Example on how to use added.

[ghost]

yep, please merge!

[lukaselmer]

@enyo sorry to bother you. How is the status on #955? The tests run, and the functionality is documented well, right?

[lukaselmer]

@enyo is there something I can do?

[psolom]

+1 my vote for merging

[enyo]

Great work. Thanks

[demircancelebi]

Thank you for adding this functionality. But when I use an event listener like removedfile and check file.name I see the original name. I guess this should not be considered normal behavior, there should at least be a way to access to new name.

[sowinski]

I can comfirm what demircancelebi told us.
this.on("success", function(file, serverFileName) { alert(file.name); alert(serverFileName); });
On success I get the same problem. Renaming before sending is fine, but if I try to access filen.name I get the old name.

@ demircancelebi
Did you find a solution for this issue?

[cyrilkyburz]

The problem is that you can not change the file in javascript. It's not allowed for security reason. So the trick here with the renameFilename is, that we upload another filename as the original. The original filename never gets touched.

See: https://developer.mozilla.org/en-US/docs/Web/API/File/name

[sowinski]

Thank you for the fast response. I am trying to identify those images by name. But it won't work if you upload two different pictures with the same name.
How can I Identify my Images?

At the moment, I have this mapping in my Javascript code:
var filename_to_id_dict = {};
filename = name of the file in javascript
id = name of the file in my backend
(I use this to delete my images in my backen)

[MarSoft]

I think we could store a "renamed" name as another property in a File object:

_renameFilename: (name, file) =>
    if typeof @options.renameFilename is "function"
        name = @options.renameFilename(name, file)
    file.newname = name

With such change, new file name will be accessible for all methods, and also I passed File object to @options.renameFilename handler in case it needs it (it might want to e.g. change name depending on size or mime type or something else).

[NimeshDhruve]

Is there any progress on this? Is it possible to access new name inside removedfile function? I am generating random names inside renameFilename function and when user clicks Remove file link I need to know the new name.

If this can't be done using Dropzone APIs then I may end up using something like below:
Dropzone.js - How to change file name before uploading to folder

I wish there is easy way to access new file name.

[kevzlou7979]

The renamefile is not working on my side. I did exactly the same implementation as you have.

[timo002]

I'm using this rename function, because I upload the images first to a temporary directory. To prevent double filenames, I rename the file with an unique I before uploading the file. But, this is failing because the function referring to in options.renameFilename is called twice for one file.

So the first time it generates unique string based on random numbers. This new name is used in the frontend to show in the dropzone. But when uploading the actual file, the function is requested again and a new unique string is generated. So I can never match the two files again.

I think that it should just call this function once and maintain the generated name.

[priyapanigrahy]

renameFilename is changed name of file in frontEnd but in backend still file object name is used

[enyo]

From what I see, the best way to approach this, would be to invoke renameFile only once, and store the actual name in file.uploadName that will be read when appending the file to the form.

@priyapanigrahy this seems a bit strange to me, since the new name is attached as a form field, so I don't see how that would happen. Are you using the latest version?

[enyo]

This is now implemented in v5.1.0:

1. renameFilename has bee renamed to renameFile. The old option is still available but deprecated and will be removed with the next major release.
2. When a file is added, the renameFile option function is invoked immediately, and the new filename is stored in file.upload.filename.

[atomdigital]

Help me deal with "renameFile".

var myDropzone = new Dropzone("#fileOneUploadFiles", { url: "/upload.php", createImageThumbnails: false, addRemoveLinks: true, acceptedFiles: "image/*,application/pdf,.psd,.zip,.rar", previewsContainer: "#fileOneUploadedFiles", renameFile: function(file){ console.log("old file name="+file.name); return(md5(Date())+"."+file.name.substr(file.name.lastIndexOf(".") + 1)); } });
The file on the server is renamed, but if I load several files, 1 file is always downloaded to the folder on the server.
http://c2n.me/3NftsIf
http://c2n.me/3NfttH6

[atomdigital]

Please help!!!!!!!

[bymerkan]

I tried to use

renameFilename: function(file) {
	return file.name = "myFileName";
},

but unfortunately dropzone sent 2 data to upload.php. One of them was with original file name and the other one was myFileName. On server side I got 2 files and when I tried to delete it from dropzone, it deleted the file that has the original name. I think there is something wrong with renameFilename function. It should send one data with changed name. Does anyone have a solution?