How to convert json to a fetch function in react

Question

the parameter with attribute named file is required and the actual curl command is:- curl -F "[email protected]" https://safenote.co/api/file -F password=secret -F lifetime=72 and the corresponding json format is:-

{
    "url": "https://safenote.co/api/file",
    "raw_url": "https://safenote.co/api/file",
    "method": "post",
    "files": {
        "file": "password.txt"
    },
    "data": {
        "password": "secret",
        "lifetime": "72"
    }
}

I need this to be converted into a fetch function or using axios, I'm not understanding which is the body part ad what to include I have tried :-

 fetch(`https://safenote.co/api/file`,{
                mode:'no-cors',
                method:"POST",
                // headers: {
                //      "Content-Type": "application/json"
                // },
                "files":{
                    "file":selectedFile,
                },

                // body: JSON.stringify({
                // file:selectedFile
            })
            // })
        .then(response => response.json())
        .then(data => console.log("data",data))
        .catch(error => console.log(error));
    }

my HTML part

  <input type="file" name="attachment" accept="image/png, image/jpeg" onChange={(e) => setSelectedFile(e.target.files[0])}/>```

nabil arta · Accepted Answer · 2021-03-31 06:40:45Z

1

You can use axios and form data for that

const myFormData = new FormData();

myFormData.append('files', 'file');

You can add another properties like name or whatever too

myFormData.append('name', 'myFileName');

then use the axios

axios({
  method: "post",
  url: "myurl",
  data: myFormData,
  headers: { "Content-Type": "multipart/form-data" },
})
  .then(function (response) {
    //handle success
    console.log(response);
  })
  .catch(function (response) {
    //handle error
    console.log(response);
  });

answered Mar 31, 2021 at 6:40

nabil arta

1741 silver badge4 bronze badges

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

1 Comment

Zunayed Shahriar Over a year ago

axios is a simple and easy approach. :)

Collectives™ on Stack Overflow

How to convert json to a fetch function in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related