Search code examples
axiossuperagent

How to translate superagent to axios?


I have some upload working for superagent. It involves posting to an api for cloudinary. My question is how do I do the same thing with axios. I'm not sure what superagent.attach and superagent.field relate to in axios.

Basically when I make the post request I need to attach all these fields to the request or else I get bad request and I want to do this in axios not superagent as I am switching over to axios.

Here are all the params:

    const image = files[0];

    const cloudName = 'tbaustin';
    const url = `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`;

    const timestamp = Date.now()/1000;
    const uploadPreset = 'cnh7rzwp';

    const paramsStr = `timestamp=${timestamp}&upload_preset=${uploadPreset}ORor-6scjYwQGpNBvMW2HGMkc8k`;

    const signature = sha1(paramsStr);
    const params = {
      'api_key': '177287448318217',
      'timestamp': timestamp,
      'upload_preset': uploadPreset,
      'signature': signature
    }

Here is the superagent post request:

let uploadRequest = superagent.post(url)
    uploadRequest.attach('file', image);

    Object.keys(params).forEach((key) => {
      uploadRequest.field(key, params[key]);
    });

    uploadRequest.end((err, res) => {
      if(err) {
        alert(err);
        return
      }

Solution

  • You would need to use FromData as follows:

      var url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;
      var fd = new FormData();
      fd.append("upload_preset", unsignedUploadPreset);
      fd.append("tags", "browser_upload"); // Optional - add tag for image admin in Cloudinary
      fd.append("signature", signature);
      fd.append("file", file);
      const config = {
        headers: { "X-Requested-With": "XMLHttpRequest" },
        onUploadProgress: function(progressEvent) {
          // Do something with the native progress event
        }
      };
      axios.post(url, fd, config)
                .then(function (res) {
                  // File uploaded successfully
                  console.log(res.data);
                })
                .catch(function (err) {
                  console.error('err', err);
                });
    

    See full example here