ファイルオブジェクトを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], 
    }); 

ほど簡単！