Fetch call fails when blob is attached to FormData

Question
1

I’m trying to upload an image as FormData to an API. I referred to the following thread.
https://forums.appgyver.com/t/uploading-file-to-directus-multipart-form-data/11271

My JavaScript function is below.

const {url, imagePath, token} = inputs
const formData = new FormData()
const blobResp = await fetch(imagePath)
const blob = await blobResp.blob()
console.log('blob: ', blob)
formData.append('file', blob)

const options = {
  clientId: 'default',
  extraction: {
    'headerFields': ['senderName'],
    'lineItemFields': ['description']
  },
  documentType: 'invoice'
};  
formData.append('options', JSON.stringify(options))

try {
  console.log('before sending request', formData)

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + token
    },
    body: formData
  })

  console.log('response: ', response)
  const json = await response.json()
  console.log('json: ', json)
  return {id: json.id}
  
} catch (error) {
  console.log(error)
  const errorObj = {
    code: '9',
    message: 'something went wrong',
    rawError: error
  }
  return [1, errorObj]
}

When I run the app, the logic fails at the fetch call below and an exception is caught.

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + token
    },
    body: formData
  })

If I don’t add the blob to formData, API call is successful (though error is retuned, which is fine).
So I suspect something is wrong with the blob object. I’ve written almost the same code in Node.js and worked fine.
The image below is the console output of the formData.

image
image1592×408 24.7 KB

2

When I encountered this issue, I was running the app on my Android device.
Next I ran the same app on an iPad. Here, fetch went successful and the API has returned an error saying “No file was uploaded”.

image
image1689×515 32.9 KB

It seems that the following code is insufficient for uploading an image.

const formData = new FormData()
const blobResp = await fetch(imagePath)
const blob = await blobResp.blob()
formData.append('file', blob)
4

Passing the following object to form data, instead of blob object solved the issue.

const {url, token, fileObj} = inputs

const formData = new FormData()
const fileData = {
  uri: fileObj.path,
  size: fileObj.size,
  type: "image/jpeg",
  name: fileObj.name
}
formData.append('file', fileData)
5

It took few days of digging to find there was actual bug in appgyver mimeType detection which was causing the file upload to fail. You post helped us look in right direction. Thanks