html - Javascript dropzone.js - Choosing a Folder for file upload - Stack Overflow

admin管理员组

文章数量:1323903

I am using dropzone.js for uploading multiple files. Using this I can able to select multiple files from a folder and on selecting multiple files I will only select a set of files from my list.

Instead, I need to select a folder(directory)

I can able to drag and drop the folder. The same functionality I should do when I click on the dz-clickable

My Html code

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Upload or drag your files here</span>
    </div>
</div>

My Javascript code

var myDropzone = new Dropzone("div#myDrop", {
addRemoveLinks: true,
autoProcessQueue: false,
parallelUploads: maxParallelCount,
url: "#",
transformFile: function transformFile(file, done) {
  zip = new JSZip();
  zip.file(file.name, file);
  zip.generateAsync(
    {
      type:"blob",
      pression: "DEFLATE"
    }
  ).then(function(content) {
    done(content);
  });
},
init: function() {
    this.on("addedfile", function(file) {
        if (jQuery.inArray(file.name, addedfiles) > -1) {
            myDropzone.removeFile(file);
        }
        if (jQuery.inArray(file.name, DOC_NAMES) == -1) {
            myDropzone.removeFile(file);
        }
        else {
            addedfiles.push(file.name);
            queueCount += 1;
        }
    });
    this.on("removedfile", function(file) {
        console.log(file.name);
        if (jQuery.inArray(file.name, addedfiles) > -1) {
            // addedfiles.pop(file.name);
            var indOfAddedFiles = addedfiles.indexOf(file.name);
            console.log("indOfAddedFiles -> "+ indOfAddedFiles);
            addedfiles.splice(indOfAddedFiles, 1);
            queueCount -= 1;
        }
    })
}

How can I choose a directory and do my process accordingly? Any Ideas ?

I am using dropzone.js for uploading multiple files. Using this I can able to select multiple files from a folder and on selecting multiple files I will only select a set of files from my list.

Instead, I need to select a folder(directory)

I can able to drag and drop the folder. The same functionality I should do when I click on the dz-clickable

My Html code

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Upload or drag your files here</span>
    </div>
</div>

My Javascript code

var myDropzone = new Dropzone("div#myDrop", {
addRemoveLinks: true,
autoProcessQueue: false,
parallelUploads: maxParallelCount,
url: "#",
transformFile: function transformFile(file, done) {
  zip = new JSZip();
  zip.file(file.name, file);
  zip.generateAsync(
    {
      type:"blob",
      pression: "DEFLATE"
    }
  ).then(function(content) {
    done(content);
  });
},
init: function() {
    this.on("addedfile", function(file) {
        if (jQuery.inArray(file.name, addedfiles) > -1) {
            myDropzone.removeFile(file);
        }
        if (jQuery.inArray(file.name, DOC_NAMES) == -1) {
            myDropzone.removeFile(file);
        }
        else {
            addedfiles.push(file.name);
            queueCount += 1;
        }
    });
    this.on("removedfile", function(file) {
        console.log(file.name);
        if (jQuery.inArray(file.name, addedfiles) > -1) {
            // addedfiles.pop(file.name);
            var indOfAddedFiles = addedfiles.indexOf(file.name);
            console.log("indOfAddedFiles -> "+ indOfAddedFiles);
            addedfiles.splice(indOfAddedFiles, 1);
            queueCount -= 1;
        }
    })
}

How can I choose a directory and do my process accordingly? Any Ideas ?

• javascript
• html
• file-upload
• dropzone.js
• dropzone

Share Improve this question Follow edited Jun 6, 2018 at 12:55 Sri asked Jun 5, 2018 at 14:11 SriSri 1,50533 gold badges1818 silver badges3636 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Just to provide context to solution by @Sri

$("div#dropzoneDiv").dropzone({
            url: '/upload',
            init: function() {
                this.hiddenFileInput.setAttribute("webkitdirectory", true);
            }
        });

Let me answer my question

Choosing folder is achieved by setting attribute webkitdirectory as true in hiddenFileInput

Along with the type attribute, add like

_this3.hiddenFileInput = document.createElement("input");
_this3.hiddenFileInput.setAttribute("type", "file");
_this3.hiddenFileInput.setAttribute("webkitdirectory", true);

I don't think Dropzone.js allows to upload a whole directory (or it's not specified in their doc)

本文标签： htmlJavascript dropzonejsChoosing a Folder for file uploadStack Overflow