如何將文件對象保存爲React中的狀態？

Question

我想setState爲一個文件對象，我之前將其上傳到服務器之間傳遞的文件對象。 以下是我正在嘗試實施的代碼。

const state = { 
     selectedDocument: { 
      file: {}, 
     }, 
     selectedFile: new File([''],''), 
    }; //state init in constructor 

    //method being called upon modal close and passes the selected file object. 

openUploadDocumentModal(files) { 
    console.log('files', files); //getting the file object here. 

    const ds = new File([files[0]], files[0].name); 
    //tried setting directly doest work. 
    this 
    .setState({ 
     selectedDocument: { 
      file: new File([files[0]], files[0].name), 
     }, 
     selectedFile: new File([files[0]], files[0].name), 
    }); 

    //tried setting using the react update addon, doesnt work 
    this 
    .setState(prevState => update(prevState, 
     { 
      selectedFile: { $set: new File([files[0]], files[0].name)}, // trying to set the file file here, get {} on output 
      showAddDocumentModal: { $set: false }, 
      showUploadDocumentModal: { $set: true }, 
     } 
    )); 
} 

Answer 1

設置狀態：

const state = { 
     selectedDocument: { 
      file: null, 
     }, 
     selectedFile: null, 
    }; 

然後，設置狀態：

this 
    .setState({ 
     selectedDocument: { 
      file: files[0], 
      //files is a FileList variable, either obtained from event.target.files if obtained from input 
      //or event.dataTransfer.files if obtained from drag and drop 
      //or any other method 
     }, 
     selectedFile: files[0], 
    }); 

一樣方便的！