Superagent: .attach didn't upload file

[sidhijakpat]

We try to use superagent to upload file to our server by following this guide, https://visionmedia.github.io/superagent/#multipart-requests, on React Native project

here is our implementation code

  superagent.post(full_url)
    .field('type', 'image_type')
    .attach('file', file.uri, {contentType: 'image/png'})
    .then(response => {
      console.log(`response ${JSON.stringify(response.body)}`)
      callback(response.body)
    })
    .catch(error => {
      console.log(`error body json stringify ${JSON.stringify(error)}`)
      errorCallback(error)
    })

file.uri here is image that we got from react-native-camera

the field type was received by server, but the file was not there
response from server is, more or less

{
  "status": false,
  "data": "Required request part 'file' is not present"
}

we try to change the attach parameter to
.attach('file', file.base64, {contentType: 'image/png'})

and
.attach('file', RNFetchBlob.wrap(file.uri), {contentType: 'image/png'})

and also
.attach('file', RNFetchBlob.wrap(file.base64), {contentType: 'image/png'})

with no luck

we try to log the form data on attach function,

{
  "_parts": [
    [
      "type",
      "image_type"
    ],
    [
      "file",
      "path/to/file"
    ]
  ]
}

it clearly show that the file is there

calling the same api from Postman is success without a problem

what did we do wrong here?
any feedback is welcome

thank you

Superagent: v4.0.0
React Native: v0.57.5
React: v16.6.3
rn-fetch-blob: v0.10.13

[sidhijakpat]

We try to load the file using react-native-fs before sending the file, like this:

  rnfs.readFile(file.uri, 'base64').then(result => {
    superagent.post(full_url)
      .field('type', 'image_type')
      .attach('file', result, {contentType: 'image/png'})
      .then(response => {
        console.log(`response ${JSON.stringify(response.body)}`)
        callback(response.body)
      })
      .catch(error => {
        console.log(`error body json stringify ${JSON.stringify(error)}`)
        errorCallback(error)
      })
  })

still got the same error

[sidhijakpat]

I got it, so the file must be in JSON object in the following format to make it work:

const file = {
  fileUri,
  name: 'image_name.png',
  type: `image/png`
}

Thank you

[sidhijakpat]

Sorry, the issue still exist,

the server did find file key, but the uploaded file is empty

still need help 😄

[sidhijakpat]

Once again, it was our mistake, the JSON Object should be:

const file = {
  uri: fileUri,
  name: 'image_name.png',
  type: `image/png`
}

Thank you again

[hichamon306]

Hello @sidhijakpat ,
I'm facing the same problem, i have to upload image with superagent, I try attach with multiple paramters, but still have the issue, with postman it works, can you explain please what you did to get it work ?

Thanks

[sidhijakpat]

Hello @hichamon306

When my problem is, when I call it here

const file = {
  fileUri,
  name: 'image_name.png',
  type: `image/png`
}

you see that the fileUri didn't have a key?
because it didn't have a key, the JS will automatically transform it into

const file = {
  fileUri: fileUri,
  name: 'image_name.png',
  type: `image/png`
}

that where it wrong,

the file uri of the request should be uri, not fileUri

so we need to change it into

const file = {
  uri: fileUri,
  name: 'image_name.png',
  type: `image/png`
}

where the fileUri key is uri

I hope it can help

Best regards

[hichamon306]

You mean i should do this ?
const file = { uri: fileUri, name: 'image_name.png', type:image/png } request.post(${API_URL}/reports) .attach('files.gallery',file);
request is superagent object
i try it but it dosen't work

thank you for your help

[sidhijakpat]

here is my full code

  const fileJson = {
    uri: fileUri,
    name: 'image_name.png',
    type: `image/png`
  }

  superagent.post(full_url)
    .field('type', 'image_type')
    .attach('file', fileJson, {contentType: 'image/png'})
    .then(response => {
      console.log(`response ${JSON.stringify(response.body)}`)
      callback(response.body)
    })
    .catch(error => {
      console.log(`error body json stringify ${JSON.stringify(error)}`)
      errorCallback(error)
    })

and looking at your code, what is files.gallery on attach?
could it be the problem?

[hichamon306]

Thank you very much for your help, the problem comes from react native debugger with network inspect enabled, since i disable it, the file upload work like a charm.

Thanks again @sidhijakpat

[sidhijakpat]

your welcome @hichamon306

glad to help

[RodolfoGS]

Once again, it was our mistake, the JSON Object should be:

const file = {
  uri: fileUri,
  name: 'image_name.png',
  type: `image/png`
}

Thank you again

Thank you, that works!

[kuangyanit]

from the doc about attach, the params are name, file(either string with file path or Blob/Buffer object.) and options. I'm confused. Are there multi styles invoke attach method?

[RodolfoGS]

from the doc about attach, the params are name, file(either string with file path or Blob/Buffer object.) and options. I'm confused. Are there multi styles invoke attach method?

I think that the doc is wrong. I tried with string to the file path and didn't work.

That object worked great for me.

.attach('image', {
  uri: '/path/to/image.jpg',
  name: 'filename.jpg',
  type: `image/jpg`,
})

[sidhijakpat]

Once again, it was our mistake, the JSON Object should be:

const file = {
  uri: fileUri,
  name: 'image_name.png',
  type: `image/png`
}

Thank you again

Thank you, that works!

Glad I can help

[kuangyanit]

can you tell me version number you used? @RodolfoGS

[RodolfoGS]

can you tell me version number you used? @RodolfoGS

Sure, I'm using superagent: 5.2.2 (the latest right now)

[kuangyanit]

there a error like "source.on is not a function" in my project with your way, my code seems like following:
js request .post(url) .set('Connection', 'Keep-Alive') .set('Charset', 'UTF-8') .attach("1", { uri: uris[0], name: filenames[0], type: 'image/jpg' }, {contentType: 'jpg'})

[sidhijakpat]

�there a error like "source.on is not a function" in my project with your way, my code seems like following:

request
        .post(url)
        .set('Connection', 'Keep-Alive')
        .set('Charset', 'UTF-8')
        .attach("1", { uri: uris[0], name: filenames[0], type: 'image/jpg' }, {contentType: 'jpg'})

~If I'm not mistaken, post and attach are not mean to be used together,~
~let me search for that~

send and attach, my bad

[RodolfoGS]

�there a error like "source.on is not a function" in my project with your way, my code seems like following:

request
        .post(url)
        .set('Connection', 'Keep-Alive')
        .set('Charset', 'UTF-8')
        .attach("1", { uri: uris[0], name: filenames[0], type: 'image/jpg' }, {contentType: 'jpg'})

If I'm not mistaken, post and attach are not mean to be used together,
let me search for that

Yes, you can use .post and .attach together.
BUT, you can't use .send and .attach together.

When you use .field() or .attach() you can't use .send() and you must not set Content-Type (the correct type will be set for you).

https://visionmedia.github.io/superagent/#multipart-requests

[kuangyanit]

Is it means there is a another problem in my projcet?

[AhmedRazaVerge]

i am getting this while trying to upload file i have full network access, i test uri it correct. does any one know is what is problem