Dropzone.js and full path for each file

Question

I'm trying to recreate the folder structure of dropped files/folder with Dropzone.js. Is there a way to have access to the full path of each file, so that the directory structure can be re-created on the php side?

Astragal

Answer 1

This is a simple way you can send additionally full paths of all files which are in some folder(s):

dropzone.on("sending", function(file, xhr, data) {

    // if file is actually a folder
    if(file.fullPath){
        data.append("fullPath", file.fullPath);
    }
});

Seagraves

why downvote? this is correct answer. when dropzone.js running on a chrome browser, webkitGetAsEntry is available, eventually Dropzone.prototype._addFilesFromDirectory called which is the "file" can have "fullPath" defined. so browser can send path info per file. – Redcap

Upvoted -- thank you so much for this useful snippet of code!!! – Hamitic

Answer 2

you can use a file reader for it, I did it in angular 5:

 onFilesAdded(files: File[]) {
console.log(files);
this.dropzone.reset();
files.forEach(file => {

  const reader = new FileReader();
  let content;
  reader.onload = (e: ProgressEvent) => {
    content = (e.target as FileReader).result;
    console.log(content);
  };
  this.previewImage(file).then(response => {
    const imageItem = new FileItem(
      response,
      content,
    );
    let imagesComponentItems = this.store.value.imagesComponentItems;
    imagesComponentItems = [...imagesComponentItems, imageItem];
    this.store.set("imagesComponentItems", imagesComponentItems);
    this.hasImages();
  });
});

}

Subcartilaginous