javascript - How to save an file object to state in React? - Stack Overflow

admin管理员组

文章数量:1431997

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

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

• javascript
• reactjs

Share Improve this question Follow asked Mar 16, 2017 at 4:02 Deep VoraDeep Vora 32811 gold badge33 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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!

本文标签： javascriptHow to save an file object to state in ReactStack Overflow