Added possibility to rename the filename before uploading #955

Merged
merged 1 commit into from Feb 14, 2016

Projects

None yet
@cyrilkyburz
Contributor

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

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
Contributor

Example on how to use added.

@rruettimann

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?

@servocoder

+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
Details
@enyo
Owner
enyo commented Feb 14, 2016

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
Contributor

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
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
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.

@kevzlou7979

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

@timo002
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.

@priyapanigrahy

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