React Api Call with a File as Parameter

Question

I have this handler to make api calls to an endpoint:

handleFileChange(e) {
  e.preventDefault();
  fetch(apiAddress)
    .then((res) => {
      return res.json()
    }).then( (res)  => {
      this.props.onFileChange(JSON.stringify(res));
  });
}

And i would like send a file as part of the requests like this:

render(){
  getScene();
  return (
    <form>
     <input type='file' name='uploaded_file' />
     <button onClick={this.handleFileChange}>Upload</button>
   </form>
  )
}

How can it do that with the file added in that form?

Luca Kiebel · Accepted Answer · 2018-04-12 14:58:53Z

1

This is just as simple as POSTing the File to the API:

handleFileChange(e) {
  e.preventDefault();
  let fileInput = document.getElementsByName("uploaded_file")[0];
  fetch('/yourEndpoint', {
    method: 'POST'
    body: fileInput.files[0] // This is your file object
    headers: {
      "Content-Type": fileInput.files[0].type // this is the MIME type of the data *
    },
  }).then(
    response => response.json()
  ).then( res => {
    this.props.onFileChange(JSON.stringify(res))
  });
}

* note, however, that this is generated from the file extension, so it can easily be spoofed

edited Apr 12, 2018 at 14:58

answered Apr 12, 2018 at 11:57

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

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

7 Comments

Xhark Over a year ago

I don't need to specify anything else? Like content type or something?

Luca Kiebel Over a year ago

Your browser should handle this for you.

Xhark Over a year ago

Is not doing it. And acording to the network console the conten type is text/plain and I'm geting a 404. The api is also mine, built with Spark, so maybe the problem is something else. But I know is working by using a simple form in plain html.

Xhark Over a year ago

Yes, using react im getting a 404. But using a basic form it works.

Luca Kiebel Over a year ago

Is the server crashing when you post to it this way? Because, a 404 is for when the requested resource can't be located, which shouldn't happen, if the url is correct

|

Collectives™ on Stack Overflow

React Api Call with a File as Parameter

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related