폴더 업로드 (FileSystem API 사용)

Question

FileSystem API를 사용하여 폴더를 업로드하려고합니다.

dropzone.ondrop = function(e) { 
       e.preventDefault(); 
       let items=e.dataTransfer.items; 
       let formdata=new FormData(); 
       function scanFiles(item){ 
        console.log("In scanFiles") 
        if (item.isFile) { 
         console.log("Typecasting..."); 

         item.file(function(file) { 
          console.log(file); 
          formdata.append('directory',file); 
         }); 
        } 
        else if (item.isDirectory) { 
         console.log("Directory...") 
         let directoryReader = item.createReader(); 
         directoryReader.readEntries(function(entries) { 
          entries.forEach(function(entry) { 
           scanFiles(entry); 
          }); 
         }); 
        } 
       } 
       for (let i=0; i<items.length; i++) { 
        let item = items[i].webkitGetAsEntry(); 
        console.log(item); 
        if (item) { 
         console.log("Calling scan"); 
         scanFiles(item); 
         console.log("Ending scan"); 
        } 
       } 

       var xhr=new XMLHttpRequest(); 
       xhr.open('post','uploadFolder/'); 
       xhr.send(formdata); 
      } 

기본적으로, 어떤 코드가하는 일은, 삭제 된 폴더를 가지고 그 내용을 읽고 그 경우 파일을 폼에 파일 입력으로 부착하고, 추가 처리를 위해 필요한 URL을 보낼 수 있습니다. 나는 그것을 실행할 때 문제가 있으므로 좋아, 콘솔 출력은

FileSystemFileEntry { isFile: true, isDirectory: false, name: "Test.o", fullPath: "/Test.o", filesystem: FileSystem } 
Calling scan 
In scanFiles 
Typecasting... 
Ending scan 
File { name: "Test.o", lastModified: 1506856693000, lastModifiedDate: Date 2017-10-01T11:18:13.000Z, webkitRelativePath: "", size: 6240, type: "" } 

스크립트의 모든 행이 실행 된 때문에 잘못된 요청이 URL로 보낸 후 파일 객체가 생성된다.

나는 이것이 file() 함수의 종결 특성 때문이라고 생각한다. 누군가가 적절한 방식으로 파일 입력을 가져올 수있는 방법을 알려주실 수 있습니까?

Answer 1

.file() 기능이 비동기입니다. 당신은

var dropzone = document.querySelector("input[type=file]"); 

dropzone.ondrop = function(e) { 
    e.preventDefault(); 
    let items = e.dataTransfer.items; 
    let formdata = new FormData(); 

    function scanFiles(item, index) { 
    return new Promise(function(resolve) { 
     if (item.isFile) { 
     console.log("Typecasting...", item); 

     item.file(function(file) { 
      console.log(file, "here"); 
      formdata.append('file-' + index, file); 
      resolve(); 
     }); 
     } else if (item.isDirectory) { 
     console.log("Directory...") 
     let directoryReader = item.createReader(); 

     directoryReader.readEntries(function(entries) { 
      Promise.all(entries.map(scanFiles)).then(resolve); 
     }); 
     } 
    }) 
    } 

    var p = Promise.all(Array.from(items, item => scanFiles(item.webkitGetAsEntry()))); 
    p.then(function() { 
    // do stuff with `formdata` here 
    for (let prop of formdata) { 
     console.log(prop[0], prop[1]) 
    } 
    /* 
     var xhr=new XMLHttpRequest(); 
     formdata.append('address',''); 
     xhr.open('post','uploadFolder/'); 
     xhr.send(formdata); 
    */ 
    }) 

} 

jsfiddle 또한 How to upload and list directories at firefox and chrome/chromium using change and drop events

HTML

<input type="file" webkitdirectory> 

자바 스크립트를 참조 .file() 모든 호출을 기다리고 Promise 생성자와 Promise.all()을 사용할 수 있습니다 https://jsfiddle.net/t03bvbzu/