Using to upload a file. How would I set it to state for subsequent submission to the list?

Question

I'm using:

  <ReactFileReader handleFiles={this._getFiles}>
     <button className='btn'>Upload</button>
   </ReactFileReader>

On an spfx web part. It's a form that submits to an SPO list but I want a file to be attached to the list item. I've tried lots of other solutions but my knowledge is lacking on how to implement them. Finding the wrapper has made things potentially easier but I'm still clueless on how to set the upload to state. What type should the state item be initialised as? [], "", or null

Is there anything else I should know? Here is my function for the file upload:

private _getFiles = files => {
  const content = files.result;
  console.log('file content:', content);

  this.setState({
    FileUpload: files
  }, () => {
    console.log(this.state.FileUpload);
  });
  console.log(files);

}

In the console I'm getting [object FileLest]: 0: File, length: 1} but it reads out the title of the document that I've 'attached'. I've read this but I need it distilled into a basic code example: How to set file object in state with React hooks?

It's not setting anything to state though.

I suppose this is a start?

Muhammad Zeeshan · Accepted Answer · 2020-01-21T16:42:46.943

1

You can use ref to fetch the file. Declare a variable in state. You can do this by defining the state in constructor of your component.

constructor(props) {
    super(props);
    this.state = {
      fileInput : React.createRef();
    }
}

Then use it as:

  <ReactFileReader handleFiles={this._getFiles} ref={this.state.fileInput}>
     <button className='btn'>Upload</button>
   </ReactFileReader>

Finally, in your _getFiles method:

console.log('Selected file - ', this.state.fileInput[0].name);

Hope this works for you.

edited Jan 21 '20 at 16:42

answered Jan 21 '20 at 12:31

Muhammad Zeeshan

4,608
4
15
41

I'm getting error on fileInput. It says it doesn't exist. I don't think that's the way to initialize a state..? – NightTom Jan 21 '20 at 14:21
1

Just gave an example to you. Anyway, updated the answer so you have a look. – Muhammad Zeeshan Jan 21 '20 at 14:27
getting error: Unable to get property '0' of undefined or null reference. at Anonymous function – NightTom Jan 21 '20 at 14:56
1

Just updated a missing statement, `this.state.fileInput` in `ReactFileReader` `ref` – Muhammad Zeeshan Jan 21 '20 at 14:58
Thanks Muhammed, I've had to remove .current.files[0].name as it was showing an error complaining about files[0]. As above. – NightTom Jan 21 '20 at 15:03
Can you tell me the correct code to read the name of the uploaded file. What you have provided doesn't work. – NightTom Jan 21 '20 at 15:45
1

Sounds Good. That you figured it out. – Muhammad Zeeshan Jan 21 '20 at 16:40

Using to upload a file. How would I set it to state for subsequent submission to the list?

1 Answers1