How to use the Fetch API to upload string data as a JSON file to a form data endpoint that you want to point to a local file

Question

I want to update a hosted Json file using an API on a third-party CDN. In their documentation they provide an example using cURL to accomplish this. A correct cURL request should be like this:

curl -X PUT 'https://endpoint.url.here'
  -H 'x-auth-token: <token>'
  -F 'file=@"path/to/your/file"'

Right now I'm building a React page where you enter Json text into a text field and once a button is pressed I want to simulate having a path to the json file so that it can be put into this request.

I basically have two questions:

1. I am restricted from using the Fetch API, how can I construct a Fetch request to correctly reflect the example cURL request?

2. How do I convert a string in a text field to a file path (preferably ending with a filename) so that the endpoint accepts it?

I tried converting the file data to a Blob and using the object URL as the path like this:

const file = new Blob([jsonText], {type: 'text/plain'});
var blobURL = URL.createObjectURL(file);

I also tried using FormData to set up my request:

let formData = new FormData();
formData.append('file', blobURL);

let headers = {
        'x-auth-token': '<token>',
        'Content-Type': 'multipart/form-data'
    }

let payload = {
        method: 'PUT',
        headers: headers,
        body: formData
    }

fetch('https://endpoint.url.here', payload) ...

When I try to do this, the backend just replies with some errors like "File not provided" and I suspect my request doesn't meet the requirements. Is there a better way to accomplish this? Do you have any suggestions I could try to better match their sample request?

Answer 1

Yes, I successfully solved my problem. These small modifications are the key:

const jsonBlob = new Blob(['<jsonText>'], {type: 'application/json'});

let formData = new FormData();
formData.append('file', jsonBlob, 'filename.json');

const headers = new Headers();
headers.append('x-auth-token', '<token>');

let payload = {
    method: 'PUT',
    headers: headers,
    body: formData
}

fetch('https://endpoint.url.here', payload) ...

Everything is running great now!