Nuxt•7d ago

formdata append not working

Array.from(data).forEach((file, index) => {
        console.log(file)
        formData.append(`index${index}`, file)
        console.log(formData)
    })

Array.from(data).forEach((file, index) => {
        console.log(file)
        formData.append(`index${index}`, file)
        console.log(formData)
    })

Log prints the contents of the file but an empty formdata, why?

8 Replies

kapa.ai•7d ago

Hi @mooz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain enough information to explain why your FormData appears empty after appending files in your code snippet. The sources do discuss issues with FormData and file uploads in Nuxt 3, particularly around serialization errors and recent changes in Nuxt's handling of FormData and File objects, but they do not address the specific scenario where FormData appears empty immediately after appending files in a loop. If you are using Nuxt 3.17.2 or later, be aware that there were known issues with uploading files using FormData due to serialization problems, which have been addressed in a subsequent patch (Files unable to upload after upgrade from 3.16.1 - 3.17.2, useFetch FormData handling crashes, useFetch FormData handling crashes). However, these issues are related to sending FormData with File objects via fetch, not to the FormData object itself appearing empty after appending. If you continue to experience issues, please ensure you are using a Nuxt version with the relevant patches applied. If the problem persists, consider providing more context or checking for issues outside of Nuxt, such as how you are inspecting the FormData object (since logging FormData directly does not always show its contents in the console). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@552522419307413544> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

moozOP•7d ago

@kapa.ai updated nuxt, still, FormData is empty.

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain enough information to explain why FormData remains empty after updating Nuxt. While there are several references to issues with FormData and file uploads in Nuxt 3—especially around serialization errors and useFetch in versions 3.17.x—none of the sources specifically address a scenario where FormData is empty immediately after appending files, nor do they provide troubleshooting steps for this exact problem after updating Nuxt. If you are still experiencing this issue after updating, it may be related to how FormData is being inspected or a different part of your code, but the knowledge sources do not provide explicit guidance on this. If you need further help, you may want to provide more details or check for related open issues in the Nuxt repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@552522419307413544> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

moozOP•7d ago

@kapa.ai well since the Formdata thingy is not working anyway, write me the server event handler to take the file without multipart form data

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! If you want to handle file uploads without using multipart FormData, you can send the file as a raw request body (for example, as a base64 string or binary data) and handle it in your Nuxt server event handler. Here’s an example of a Nuxt server event handler that reads the raw request body (e.g., JSON or plain text):

// server/api/upload.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  // `body` will contain the raw data sent in the request
  // For example, if you send { file: 'base64string...' }, you can access it as body.file
  return { body }
})

// server/api/upload.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  // `body` will contain the raw data sent in the request
  // For example, if you send { file: 'base64string...' }, you can access it as body.file
  return { body }
})

You can then send your file from the client as a base64 string or any other format you prefer, and the handler will receive it as part of the request body. Note that this approach is suitable for small files and not recommended for large binary uploads due to memory constraints. For more details on body handling in Nuxt server routes, see the official documentation: Body Handling ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@552522419307413544> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

formdata append not working

Did you find this page helpful?