How to save an file object to state in React?

Question

I am trying to setState for a file object that i am passing between modals before i upload it to server. Following is the code that i am trying to implement with.

 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 }, } )); }

KapilDev Neupane · Accepted Answer · 2018-03-06 13:11:37Z

Set state as:

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

Then, set state as:

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], });

As easy as that!

Collectives™ on Stack Overflow

How to save an file object to state in React?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related