rename file does not change filname in dropzone.js

user_14809198 0
Viewed 915

I want to prevent a duplicate file to be uploaded from dropzone My dropzone takes only two files so I want to check if the second file has the same filename as the first one if so change the second filename

using the renameFile function

I have added a if statement that checks if the file content are equal the if statement gets not executed if the condition is true

using a simple version the file gets renamed when send to the server but gets not renamed inside dropzone

renameFile: function (file) {
  let filename =  file.name = "sdsdds.xlsx";
  return filename;

renameFile: function (file) {
  let name = file.name

  let div_children = $('.dz-filename').children();
  // get filename of already existing file
  if (div_children.eq(0).text() !== ""){
    if (div_children.eq(0).text() === div_children.eq(1).text() ) {
      console.log(file.name)
      let filename =  file.name = "sdsdds"
      return filename;
    }
  }
},


document.addEventListener("DOMContentLoaded", function() {
  Dropzone.options.dropform = {
    maxFiles: 2,
    addRemoveLinks: true,
    maxFilesize: 2,
    parallelUploads: 1, //
    renameFile: function(file) {
      let name = file.upload.filename

      let div_children = $('.dz-filename').children();
      // get filename of already existing file
      if (div_children.eq(0).text() !== "") {
        if (div_children.eq(0).text() === div_children.eq(1).text()) {
          console.log(name)
          return name = "sdsdds"
        }
      }
      //
    },
  };
});
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
</head>
<body>
  <form id="dropform" action="{{ url_for('receave_files') }}" class="dropzone">
  </form>
</body>
</html>

dropzone.js jquery javascript
1 Answers

First, dropzone autoDiscover the form and initiate it. This is happening before DOMContentLoaded so everything you do after does nothing (you can notice that none of the options are affecting).

Second, the docs might not be clear enough about it but file.upload.filename is accessible after the file uploaded. This been used to identify what the actual name (file.name) and the new name if renamed (file.upload.filename).
So, you shouldn't use file.upload.filename but file.name.

Third, I recommend not to relay on the html to find out the other files name. It's not a contract, therefor it can changed and break your app.
Instead, I'd recommend to initiate the plugin by hand. This way you can get the dropzone instance and query it about the uploaded files.

Dropzone.autoDiscover = false;
const myDropzone = new Dropzone("#dropform", {
  //..
  renameFile: function(file) {
    const { files } = myDropzone;
    const { name } = file;

    if (files.some(file => file.name === name)) {
      return name + Date.now();
    }
    return name;
  }
});

Demo

document.querySelector('button').addEventListener('click', () => {
  const names = myDropzone.files.map(({
    upload
  }) => upload.filename).join();
  alert(names);
});

Dropzone.autoDiscover = false;
const myDropzone = new Dropzone("#dropform", {
  url: "/",
  maxFiles: 2,
  addRemoveLinks: true,
  maxFilesize: 2,
  parallelUploads: 1,
  init: function() {
    this.on("addedfile", function(file) {
      file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;
    });
  },
  renameFile: function(file) {
    const { files } = myDropzone;
    const { name } = file;

    if (files.some(file => file.name === name)) {
      return name + Date.now();
    }
    return name;
  }
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.js"></script>

<div id="dropform" class="dropzone">
</div>
<br />
<button>alert files name</button>

https://jsbin.com/huvoyiw/edit?html,js,output

Update

In order to also updating the ui, you can listen to addedfile and update the DOM accordingly. As I mention, I'm feel very comfortable with this because dropzone might change the DOM and the functionality will brake, but it does the job.

init: function() {
  this.on("addedfile", function(file) {
    file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;
  });
},

https://jsbin.com/qoxakod/edit?js,output

user_8631100
Related