Added possibility to rename the filename before uploading #955

merged 1 commit into from Feb 14, 2016


None yet

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 commented Aug 14, 2015

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


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


please merge 👍 👍 👍


Example on how to use added.


yep, please merge!


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


@enyo is there something I can do?


+1 my vote for merging

@enyo enyo merged commit 5591ed5 into enyo:master Feb 14, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
enyo commented Feb 14, 2016

Great work. Thanks


Thank you for adding this functionality. But when I use an event listener like removedfile and check 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.


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

@ demircancelebi
Did you find a solution for this issue?


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.



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 commented Mar 27, 2016

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 commented Apr 27, 2016 edited

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.


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

timo002 commented Jun 29, 2016

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.


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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment