Comment utiliser l'API Fetch pour télécharger des données de chaîne sous forme de fichier JSON vers un point de terminaison de données de formulaire que vous souhaitez faire pointer vers un fichier local

Question

Je souhaite mettre à jour un fichier Json hébergé à l'aide d'une API sur un CDN tiers. Dans leur documentation, ils fournissent un exemple utilisant cURL pour y parvenir. Une requête cURL correcte devrait ressembler à ceci :

curl -X PUT 'https://endpoint.url.here'
  -H 'x-auth-token : <token>'
  -F 'file=@"chemin/vers/votre/fichier"'

En ce moment, je crée une page React dans laquelle vous saisissez du texte Json dans un champ de texte et une fois qu'un bouton est enfoncé, je souhaite simuler un chemin d'accès au fichier json afin qu'il puisse être inséré dans cette requête.

J'ai essentiellement deux questions :

1. Je ne suis pas autorisé à utiliser l'API Fetch. Comment puis-je créer une requête Fetch pour refléter correctement l'exemple de requête cURL ?

   ≪/li>

2. Comment convertir une chaîne dans un champ de texte en un chemin de fichier (se terminant de préférence par un nom de fichier) afin que le point de terminaison l'accepte ?

   ≪/li>

J'ai essayé de convertir les données du fichier en un Blob et d'utiliser l'URL de l'objet comme chemin comme ceci :

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

J'ai également essayé d'utiliser FormData pour configurer ma requête :

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

laissez les en-têtes = {
        'x-auth-token' : '<token>',
        'Content-Type' : 'multipart/form-data'
    }

laissez la charge utile = {
        méthode : 'PUT',
        en-têtes : en-têtes,
        corps : formData
    }

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

Lorsque j'essaie de faire cela, le backend répond simplement avec des erreurs telles que "Fichier non fourni" et je soupçonne que ma demande ne répond pas aux exigences. Existe-t-il une meilleure façon d’y parvenir ? Avez-vous des suggestions que je pourrais essayer pour mieux correspondre à leur demande d'échantillon ?

Answer 1

Oui, j'ai résolu mon problème avec succès. Ces petites modifications sont essentielles :

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) ...

Tout va bien maintenant !