Uploading file to Directus (multipart/form-data)

Using How to Upload Files To Backendless (Step by Step) as base, I tried to replicate a solution to upload a file to Directus.io. It uses a multipart/form-data POST request like described here.

My Javascript Flow Function is like this:

/*
let inputs = {
  url: api_base_url + '/files',
  file: {
    "path": "blob:https://platform.preview.appgyver.com/cc59fe7a-0fa3-4c4c-9343-656c2be2e6a1",
    "name": "panqueca.jpeg",
    "size": 131790,
    "mimeType": "image/jpeg"
  },
  authorization: 'Bearer xxxxxx'
}
*/

let { url, file, authorization } = inputs;

const formData = new FormData();

const uploadFile = {
  uri: file.path,
  name: file.name,
  size: file.size,
  type: file.mimeType,
}

console.log('uploadFile:', uploadFile)

formData.append("file", uploadFile);

try {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      // fetch automatically puts content-type header and boundary
      // "Content-Type": "multipart/form-data",
      "authorization": authorization,
    },
    body: formData,
  });

  if (!response.ok) {
    throw new Error("Unable to upload file to endpoint.");
  }

  const parsed = await response.json();

  console.log('response:', parsed)

  return [
    0,
    {
      fileURL: parsed.fileURL,
    },
  ];
} catch (error) {
  console.error(error);
  return [
    1,
    {
      error: {
        code: "unknown",
        message: "Unknown error occurred while trying to upload file.",
        rawError: error,
      },
    },
  ];
}

The output is 200 when I run, but I send “panqueca.jpeg” and got a existing object from Directus and the new file wasn’t uploaded.

I already tested uploading to Directus with Postman and HTML form (like this one) and worked fine.

Problem solved!

Had to transform the blob url into a blob and then append it to FormData!

Complete solution:

/*
let inputs = {
  url: api_base_url + '/files',
  file: {
    "path": "blob:https://platform.preview.appgyver.com/cc59fe7a-0fa3-4c4c-9343-656c2be2e6a1",
    "name": "panqueca.jpeg",
    "size": 131790,
    "mimeType": "image/jpeg"
  },
  authorization: 'Bearer xxxxxx'
}
*/

let { url, authorization, file, folder_id } = inputs

const formData = new FormData()

formData.append('folder', folder_id)

// transform blob url into a blob
// "blob:https://platform.preview.appgyver.com/cc59fe7a-0fa3-4c4c-9343-656c2be2e6a1"
let blobResp = await fetch(file.path)
let blob = await blobResp.blob()
formData.append('file', blob, file.name)

try {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      authorization: authorization,
    },
    body: formData,
  })

  if (!response.ok) {
    throw new Error('Unable to upload file to endpoint.')
  }

  const parsed = await response.json()

  console.log('response:', parsed)

  return [
    0,
    {
      fileURL: parsed.fileURL,
    },
  ]
} catch (error) {
  console.error(error)
  return [
    1,
    {
      error: {
        code: 'unknown',
        message: 'Unknown error occurred while trying to upload file.',
        rawError: error,
      },
    },
  ]
}