javascriptmultipartform-dataform-datacloudinaryairtable

How to send a POST request as form-data when FormData is unavailable? (Airtable scripts)


The Cloudinary API requires to send data using multipart/form-data, but I'm working in an environment where FormData is not available.

How could I do something as simple as this, then?

  const formData = new FormData();
  formData.append('file', assetUrl);
  formData.append('upload_preset', CLOUDINARY_UNSIGNED_UPLOAD_PRESET);
  formData.append('cloud_name', CLOUDINARY_CLOUD_NAME);

     console.debug(`Uploading file (id: ${id}) to Cloudinary`, CLOUDINARY_UPLOAD_URL, formData);
      const response = await fetch(CLOUDINARY_UPLOAD_URL, {
        method: 'POST',
        body: formData,
      });

I tried different approaches, but it seems the Cloudinary API is really sensitive about it, and doesn't allow sending data in any other format other than multipart/form-data.


Solution

  • Cloudinary API supports not only multipart/form-data, but also JSON and application/x-www-form-urlencoded.

    If you're sending a string as the value of the file parameter, such as a remote URL (in your case) or Base64, then you can use any of the above-mentioned Content-Types.

    For example, you could try the following example which will successfully upload the image into a cloud (you'll want to replace <your-cloud>, <file-url> and <upload-preset> with your actual values):

    fetch('https://api.cloudinary.com/v1_1/<your-cloud>/image/upload', {
        method: 'POST',
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded'
        },    
        body: new URLSearchParams({
            'file': '<file-url>',
            'upload_preset': '<upload-preset>'
        })
    });
    

    Note that the cloud_name is derived from the URL you're sending the data to therefore it should not be sent in your request body.