Uploading a file by multi-part/form-data usig request promise in reatjs

Question

I am trying to upload a file in reactjs inside an input HTML tag

<input
  accept="image/*"
  className={classes.input}
  id="icon-button-photo1"
  onChange={(e) => onFileUpload(e)}
  type="file"
  caption="File1"
/>;

Then the onFileUpload is as follow:

const onFileUpload = (e) => {
  var file = e.target.files[0];
  const fs = require("fs");
  var rp = require("request-promise");
  var options = {
    method: "POST",
    uri: "http://127.0.0.1:9000/api/get_file/",
    formData: {
      // Like <input type="text" name="name">
      name: "Jenn",
      // Like <input type="file" name="file">
      file: {
        value: fs.createReadStream(file),
        options: {
          filename: file.name,
          contentType: "image/jpg",
        },
      },
    },
    headers: {
      /* 'content-type': 'multipart/form-data' */
      // Is set automatically
    },
  };

  rp(options)
    .then(function (body) {
      // POST succeeded...
    })
    .catch(function (err) {
      // POST failed...
    });
};

But above codes gives me below error:

TypeError: fs.createReadStream is not a function

Can someone gives me any clue to come up with proper codes?

Answer 1

You just need to create a FormData object to do this, as Evan Trimboli said above!

Have a look in this code example, using FormData and fetchAPI to make request with promise.

const onFileUpload = (e) => {
  var file = e.target.files[0];

  var formData = new FormData();
  formData.append("name", "Jenn");

  // HTML file input, chosen by user
  formData.append("file", file );

  // If you want to use any header
  var myHeaders = new Headers();
  var myInit = { method: 'POST',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

  fetch('http://127.0.0.1:9000/api/get_file/',myInit)
    .then(function(response) {
      return response.json();
    })
   .then(function(responseJson) {
     // POST succeeded...
     console.log('Upload succeeded')
   })
   .catch(function (err) {
     // POST failed...
     console.log('Upload failed:', err)
   });
};