2

My code like this :


const axios = require('axios').default
import FormData from 'form-data'
import fs from 'fs'

export default class MyController {
  public async handleMultipleFile({ request }: HttpContextContract) {
    if(request.files('files').length > 0){
      const formData = new FormData()
      
      for( let i = 0; i < request.files('files').length; i++ ) {
        let file = request.files('files')[i]
        formData.append('files[' + i + ']', file)
      }

      axios.post(`https://example-api.com/assets/files`, formData, {
          headers: {
              'Content-Type': 'multipart/form-data'
          },
        }
      ).then(res => console.log(res.data))
      .catch(err => console.error(err))
    }
  }
}

When I call the code from postman, I find this error "message": "source.on is not a function"

I add return to see the formData in the postman

I had install library form data and axios in my code and I had import it

I want to post multiple file to a external api

How can I solve this problem? Please help. Thanks

positive developer
  • 107
  • 1
  • 10
  • Your code snippet does not contain `source.on`. Where is that in your code? Please add it to your question. – jasie Aug 04 '22 at 06:03
  • @jasie I's not in the code. The error happens when call `formData.append`. This seems to happen only in adonis – positive developer Aug 04 '22 at 06:36
  • ah sorry. did you check this? https://stackoverflow.com/questions/57788965/getting-error-uncaughtexception-source-on-is-not-a-function-when-using-reques – jasie Aug 04 '22 at 06:40
  • @jasie I have read that before. But I'm still can't solve my case – positive developer Aug 04 '22 at 06:51
  • pity.. what about this one? https://stackoverflow.com/questions/69763553/using-multipart-form-data-in-nestjs – jasie Aug 04 '22 at 07:13
  • did you try to debug the for loop? (what is in files, what is in formData during and after the loop...) – jasie Aug 04 '22 at 07:16
  • @jasie If I `console.log(file)` and remove `formData.append`, it's show the file. The error happens when call `formData.append`. Does this have to use the `createReadStream` method? Because adonis is a backend not a front end – positive developer Aug 04 '22 at 07:50
  • try to append a png image instead of your files and see if that works (without the loop). you can copy paste the code for that from here: https://masteringjs.io/tutorials/axios/form-data or use whatever real image or real text file you have in your project assets. – jasie Aug 04 '22 at 08:54
  • `formData.append(name, blob, fileName)` - maybe the last param is missing: fileName? see https://developer.mozilla.org/en-US/docs/Web/API/FormData/append – jasie Aug 04 '22 at 08:59
  • another idea: omit the index, like here: `formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');` - userpic[] instead of userpic[i] -> https://docs.w3cub.com/dom/formdata/append | With formData.getAll('name'); you can check the content of your formData, pls do that. – jasie Aug 04 '22 at 09:04
  • last suggestion: check the posts here: https://github.com/request/request/issues/2366 – jasie Aug 04 '22 at 09:21
  • @jasie Yeah. But my problem is I don't use path. So I can not your reference. The image uploaded from the front end is not stored in my local folder, but sent directly to the external api. So it seems I have to convert the uploaded file to blob/binary first so that it can be submitted using form data – positive developer Aug 04 '22 at 16:54

1 Answers1

1

Sometime the data of the file is an object with the property value where is the content of the file. You have to append the file like this:

formData.append('files[' + i + ']', file.value,'NameOfFile.pdf')
phwt
  • 1,356
  • 1
  • 22
  • 42
Juan Condori
  • 11
  • 1