javascriptnode.jsaxiosdataform

including image in request body as binary data


I need to include the image as binary data in my uploading request using multipart form data, and it seems not working, any advise will be appreciated. my code:

  const [selectedFile, setSelectedFile] = useState(null);
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('selectedFile', new Blob([selectedFile], { type: 'application/octet-stream' }));
    const data = {
      uploadLink,
      formData,
    };
    const headers = {
      'Content-Type': 'application/octet-stream' ,
      Accept: 'application/vnd.vimeo.*+json;version=3.4',
    };
    try {
      await axios
        .post(`${backendPostPath}/thumbnail-upload`, data, {
          headers,
        })
        .then((response) => {
          applyThumbnial();
          console.log(response);
        });
    } catch (error) {
      console.log(error);
    }
  };

  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0]);
  };

Solution

  • include formData as axios data parameter instead of your data object, so you can also include uploadLink in the formData:

    const formData = new FormData();
    formData.append('selectedFile', new Blob([selectedFile], { type: 'application/octet-stream' }));
    formData.append('uploadLink', uploadLink)
    
    //...
    await axios
    .post(`${backendPostPath}/thumbnail-upload`, formData, {
      headers,
    })