passing binary data to rest-api

Question

I want to upload a thumbnail to viemo api , and based on Vimeo doc, I must include the thumbnail file as binary data in the request body, I have to upload the thumbnail from the client side "fontend" and will send the request from the rest-api "backend" the problem is my rest-api can't receive the binary data, properly because I'm using express.js, is there any way to handle the binary data in the backend.

the steps as following:

client side sent thumbnail data => backend receive the data through the request body and send it to => endpoint

client side request

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('selectedFile', new Blob([selectedFile], { type: 'application/json' }));
    formData.append('uploadLink', uploadLink);

    const headers = {
      'Content-Type': 'application/json',
      Accept: 'application/vnd.vimeo.*+json;version=3.4',
    };

    try {
      axios
        .post(`${backendPostPath}/thumbnail-upload`, formData, {
          headers,
        })
        .then((response) => {
          applyThumbnial();
          console.log(`${uploadLink}link for upload`);
        });
    } catch (error) {
      console.log(error);
    }
  };

backend request can't receive the body request of frontend post as binary data,

const ThumbnailUpload = async (req, res) => {
  const { uploadLink } = req.body;
  const { selectedFile } = req.body;
  console.log(uploadLink);
  const clientServerOptions = {
    uri: `${uploadLink}`,
    encoding: null,
    body: JSON.stringify({
      name: uploadLink,
      file: selectedFile,
    }),
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/vnd.vimeo.*+json;version=3.4',
      Authorization: getVimeoAuthorization(),
    },
  };
  request(clientServerOptions, function (error, response) {
    if (error) {
      res.send(error);
    } else {
      const body = JSON.parse(response.body);
      res.send(body);
    }
  });
};

is there any way to make the backend request body fetch the binary data, as I getting the data as "undefined"

One thing definitely does not make sense is that you specified the content-type is some kind of JSON object, yet you are serializing FormData with an attachment, which should be the multipart/form-data mime type. — Evert, Apr 02 '22 at 22:52
I tried to use multipart/form-data content type before, but still getting the same error. — Majd Kilou, Apr 02 '22 at 22:55
You need to use `mulitpart/form-data`and you need to use the correct middleware in express to be able to handle this on the backend. See [this thread](https://stackoverflow.com/questions/37630419/how-to-handle-formdata-from-express-4) — Mushroomator, Apr 02 '22 at 22:59
You can also use base 64 encoding to send your binary data as text, and then decode it on the backend. — yaexiste2, Apr 02 '22 at 23:25

score 0 · Accepted Answer · answered May 13 '22 at 11:27

Sorry for late update, I solved this issue by using the same put request form the client side, as the put request don't require Vimeo access token, so you can use the same put request i mentioned above, and remove authentication from the header, like following

const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('selectedFile', new Blob([selectedFile], { type: 'image/jpg, image/png' }));
    // formData.append('uploadLink', uploadLink);

  

    const headers = {
      'Content-Type': 'image/jpg, image/png',
      Accept: 'application/vnd.vimeo.*+json;version=3.4',
    };

    try {
      axios
        .put(`${uploadLink}`, formData, {
          headers,
        })
        .then((response) => {
      
          console.log(`${uploadLink}link for upload`);
        });
    } catch (error) {
      console.log(error);
    }
  };

passing binary data to rest-api

1 Answers1