I'm using Dropzone.js to handle uploading of files. I would really like to be able to modify the original name of the file before uploading it to S3. It would be nice to just be able to use dropzone's processing file hook like shown below, but it appears none of the changes I make to this file object persist...

myDropone.on('processingfile', function(file) {
  console.log(file.name) // 'Randy.png'
  file.name = 'my-custom-name.png';
  console.log(file.name) // 'Randy.png'
});

Even when trying to modify this File object in the console changes do not persist. I'm losing my mind...

Does anyone see what I'm missing here? Or is there a better way to modify the name of a file before uploading it with Dropzone?

I'm using Dropzone.js to handle uploading of files. I would really like to be able to modify the original name of the file before uploading it to S3. It would be nice to just be able to use dropzone's processing file hook like shown below, but it appears none of the changes I make to this file object persist...

myDropone.on('processingfile', function(file) {
  console.log(file.name) // 'Randy.png'
  file.name = 'my-custom-name.png';
  console.log(file.name) // 'Randy.png'
});

Even when trying to modify this File object in the console changes do not persist. I'm losing my mind...

Does anyone see what I'm missing here? Or is there a better way to modify the name of a file before uploading it with Dropzone?

• javascript
• angularjs
• dropzone.js

2 Answers 2

File is an HTML 5 file object, and some of its properties are read-only, as you can see here

You can, however, set a new property for your file object like:

myDropone.on("sending", function(file) {
    file.myCustomName = "my-new-name" + file.name;
    console.log(file.myCustomName);
});

Edit: Also, the documentation says, the recommended way to send aditional params in the body of the post action is:

myDropzone.on("sending", function(file, xhr, formData) {
     // Will send the filesize along with the file as POST data.
     formData.append("filesize", file.size);
     formData.append("fileName", "myName");
});

Hope it helps.

There is a renameFile option in dropzone.js that will let you change the uploaded file name.

// Dropzone declaration
...
renameFile: function (file) {
    return 'my_new_file_name.png';
}

For older versions of Dropzone the option name is renameFilename.