0

I am struggling with a simple media (mp3/mp4) upload to a server using axios. I have an angular application that creates a formData and send this formData to node server via :

return this.http.post(this.apiURL + '/uploadFile', formData);

My server method looks like this :

app.post('/api/uploadFile', upload.single('file'), (req, res) => {
  
  inputFile = req.file;
  let fd = new FormData();
  fd.append('file',inputFile.buffer, inputFile.originalname);

  axios.post(uploadFileURL , fd, { headers: { 'Content-Type': 'multipart/form-data' } })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.error(error)
    }) 
})

The inputFile contains the original files. The error I get now is that the request is not a multipart request...

I tried as well to define the formData differently :

formData = {
        file: {
            value: inputFile.buffer,
            options: {
                filename: inputFile.originalname,
                contentType: inputFile.mimetype
            }
        }
    };

Which brought me to a different error : 'Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found'

Am I doing something wrong ? I am wondering if this could be link to the fact that I use const bodyParser = require('body-parser'); for some of my other requests. Any help would be appreciated!

Thanks

EDIT : Here is my need and what I've done so far :

  • I have a web application that allow users to upload media files.
  • I have to send those files to a server, but I can not use the browser to send the request directly.
  • I created a nodejs application to realize the proxy task of getting the files from the browser and sending it to my remote server.
GrinnS
  • 141
  • 12
  • As I can see the code is fine but remember when sending file/s to server you must specify the content/type or enctype (form) that it's a **multipart/form-data**. See [this](https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data) that explains how to send POST data file/s with axios. – Carlo Corradini Jul 02 '20 at 13:34
  • My axios.post contains the multipart/form-data – GrinnS Jul 02 '20 at 14:06
  • When you configure the axios post request the data must be identified by the **data** field name and not *fd*. Se the example of the post I gave to you and watch how to append the *formdata* to *data*. – Carlo Corradini Jul 02 '20 at 14:09
  • PS: why you doing an axios request inside an express route endpoint? Describe your purpose :) – Carlo Corradini Jul 02 '20 at 14:14
  • I think this type of writting 'axios.post(uploadFileURL , fd)' is equivalent to axios({ method: 'post', url: uploadFileURL, data: fd}) Do you mean something else ? I edited my question with the purpose of this task. – GrinnS Jul 02 '20 at 14:51
  • You must pass to axios an object that defines the "configuration" for that specific call. – Carlo Corradini Jul 02 '20 at 14:56
  • Axios accept a configuration object that has some well defined names -> semantics. You are not following the Axios documentation and trying to pass erroneous some invalid data in a non well known format. – Carlo Corradini Jul 02 '20 at 14:58
  • If you can see from the example i gave to you the configuration and parameters is done passing an object {} with the identification names correlated to the values you want to send. – Carlo Corradini Jul 02 '20 at 15:00
  • I have the same results when following exactly the solution from the link you gave. The input is an upload.single('file') which is an Angular FormData. I cant find how to give an Angular FormData File to my axios request without giving a URL of the file. – GrinnS Jul 02 '20 at 15:51
  • See the example i wrote [HERE](https://pastebin.com/DuVTLTLg). As i said you must follow Axios structure. – Carlo Corradini Jul 02 '20 at 15:59
  • When implementing this solution I have the same issues. If I give the Angular FormData as 'data' I have a non multipart request. And If i give the Angular FormData buffer I get the no multipart boundaries error. – GrinnS Jul 02 '20 at 16:09
  • Because form data cannot be used (as it is) in the backend. You must use a stream. See [this](https://stackoverflow.com/questions/53038900/nodejs-axios-post-file-from-local-server-to-another-server) and [this](https://stackoverflow.com/questions/50024880/nodejs-request-express-use-file-readstream-inside-of-a-post-handler). – Carlo Corradini Jul 02 '20 at 16:14

0 Answers0