Post form data and file in one useFetch call in Nuxt 3

I want to post form data (uncluding strings, numbers, arrays) AND a file to backend using one useFetch() call, in TypeScript.

What I tried

If I add strings and a file to the FormData instance, all works great.

But if I try to add numbers, or arrays to the FormData instance, I get errors from TypeScript (because FormData.append() accepts only strings or Blobs). I tried to JSONify numbers and arrays and post them as strings, but then I get errors on backend (I don't want to convert anything on backend).

I tried to post form data as simple JS Object - it works, too, but not for a file.

I ended up with the following code, where I decided to post strings/numbers/arrays as JS Object to create new DB record on backend (createNewBook), then update it using PATCH method and pass file in FormData instance (updateBookCover).

function useApi(
  query: Object | undefined = undefined,
  method: string = "GET",
  token: string | null = null,
  formData: FormData | Object | undefined = undefined,
) {
  const config = useRuntimeConfig();

  const get: typeof useFetch = (url) => {
    return useFetch(url, {
      params: query,
      baseURL: config.public.apiBase + "/api/v1",
      key: url.toString(),
      method: method as any,
      headers: token ? [["Authorization", "Token " + token]] : undefined,
      body: formData,
    });
  };

  return { get };
}

export async function createNewBook(book: Book) {
  const authStore = useAuthStore();
  let authorIds: number[] = [];

  // Convert array of `Authors` to array of ids for backend.
  book.authors.forEach((a) => authorIds.push(a.id));

  const formData = {
    title: book.title,
    authors: authorIds,
    publisher: book.publisher?.id,
    year: book.year,
    pages: book.pages,
    description: book.description,
    contents: book.contents,
  };

  const { get } = useApi(undefined, "POST", authStore.token, formData);
  return await get<Book>("/books/create/");
}

export async function updateBookCover(bookId: number, coverImage: File) {
  const authStore = useAuthStore();
  const formData = new FormData();
  formData.append("cover_image", coverImage);

  const { get } = useApi(undefined, "PATCH", authStore.token, formData);
  return await get<Book>(`/books/${bookId}/`);
}

Full module code - https://github.com/hazadus/drf-nuxt-library/blob/main/frontend/useApi.ts

What I want to achieve

The code above works well, but it would be great to post everything (form data and files) using one useFetch call.

You must need to pass FormData() as below

let formData = new FormData();

//append your file or image
formData.append("file", yourfileorimage);

//append another data
const formdata = {
    title: book.title,
    authors: authorIds,
    publisher: book.publisher?.id,
    year: book.year,
    pages: book.pages,
    description: book.description,
    contents: book.contents
};

for (const item in formdata) {
  formData.append(item, formdata[item]);
}

return await useFetch("YOUR-API-URL", {
    method: "PUT",
    body: formData,
    headers: {"cache-control": "no-cache"},
  });

I made a test but simpler to your but the idea is there. This will send a POST using one useFetch only.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<template>
<div>
<div>
<input
type="file"
@change="fileChange"
/>
</div>
<button @click.prevent="sendDataAndUploadFile">Send Data and Upload file</button>
</div>
</template>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<script lang="ts" setup>
interface IBookData {
[key: string]: string | Blob
}
const uploadedFile = ref<File | null>(null)
function fileChange(file: Event): void {
const fileData = file.target as HTMLInputElement
if (fileData.files) {
uploadedFile.value = fileData.files[0]
}
}
const BookData: IBookData = {
title: 'The Adam',
author: 'John Doe',
publisher: 'John Doe',
}
async function sendDataAndUploadFile() {
const formData = new FormData()
if (uploadedFile.value) {
formData.append('cover_image', uploadedFile.value)
for (const item in BookData) {
formData.append(item, BookData[item]);
}
}
await useFetch('/api/upload', {
method: 'POST',
body: formData
})
}
</script>
<template>
<div>
<div>
<input
type="file"
@change="fileChange"
/>
</div>
<button @click.prevent="sendDataAndUploadFile">Send Data and Upload file</button>
</div>
</template>
<style scoped lang="css"></style>

<!-- end snippet -->

Edit: This will be the output

Edit
Example of arrays inside the BookData

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

interface IBookData {
[key: string]: string | number[] | Blob
}
const BookData: IBookData = {
title: 'The Adam',
author: 'John Doe',
publisher: 'John Doe',
ratings: [4, 5, 4.5]
}
async function sendDataAndUploadFile() {
const formData = new FormData()
if (uploadedFile.value) {
formData.append('cover_image', uploadedFile.value)
for (const [key, value] of Object.entries(BookData)) {
if (key === 'ratings') {
formData.append(key, JSON.stringify(value))
} else {
formData.append(key, value as string)
}
}
}
await useFetch('/api/upload', {
method: 'POST',
body: formData
})
}

<!-- end snippet -->

Edit 2
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

for (const [key, value] of Object.entries(BookData)) {
if (Array.isArray(value)) {
for (const rating of value) {
formData.append(`${key}[]`, rating.toString())
}
} else {
formData.append(key, value)
}
}

<!-- end snippet -->