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

2

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!

answered Mar 6, 2018 at 13:11

KapilDev Neupane

5843 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to save an file object to state in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related