CODEWITHSUNDEEP
javascriptreactjs
Deep Vora
Deep Vora

Reputation: 328

How to save an file object to state in React?

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

Upvotes: 2

Views: 10294

Answers (1)

KapilDev Neupane
KapilDev Neupane

Reputation: 584

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!

Upvotes: 2

Related Questions