Nuxt•5mo ago

Reading multiple files using readFormData

i have an event handler that accepts post requests like this:

export default defineEventHandler(async (event) => {
    let body = await readFormData(event)
    let audioFile = body.get("audio") as File

    console.log(body)
    let otherFiles = body.get("files[]")
    let otherFiles2 = body.get("files[]")
    console.log(otherFiles)
    console.log(otherFiles2)
    
})

export default defineEventHandler(async (event) => {
    let body = await readFormData(event)
    let audioFile = body.get("audio") as File

    console.log(body)
    let otherFiles = body.get("files[]")
    let otherFiles2 = body.get("files[]")
    console.log(otherFiles)
    console.log(otherFiles2)
    
})

In the first log i can see that the files[] is an array

FormData {
  'files[]':
   [ File { size: 165500739,
       type: 'application/zip',
       name: 'Archive.zip',
       lastModified: 1721897215312 },
     File { size: 165500739,
       type: 'application/zip',
       name: 'Archive(1).zip',
       lastModified: 1721897215379 },
     File { size: 23793,
       type: 'application/pdf',
       name: 'Untitled document.pdf',
       lastModified: 1721897215379 },
     File { size: 87902,
       type: 'image/jpeg',
       name: 'katalog_icon.jpg',
       lastModified: 1721897215379 } ],
  audio:
   File { size: 6738,
     type: 'audio/webm;codecs=opus',
     name: 'audio.webm',
     lastModified: 1721897215380 } }

FormData {
  'files[]':
   [ File { size: 165500739,
       type: 'application/zip',
       name: 'Archive.zip',
       lastModified: 1721897215312 },
     File { size: 165500739,
       type: 'application/zip',
       name: 'Archive(1).zip',
       lastModified: 1721897215379 },
     File { size: 23793,
       type: 'application/pdf',
       name: 'Untitled document.pdf',
       lastModified: 1721897215379 },
     File { size: 87902,
       type: 'image/jpeg',
       name: 'katalog_icon.jpg',
       lastModified: 1721897215379 } ],
  audio:
   File { size: 6738,
     type: 'audio/webm;codecs=opus',
     name: 'audio.webm',
     lastModified: 1721897215380 } }

but when i use body.get("files[]") ,I'm only getting the first file in the array.

File { size: 165500739,
  type: 'application/zip',
  name: 'Archive.zip',
  lastModified: 1721897215312 }

File { size: 165500739,
  type: 'application/zip',
  name: 'Archive.zip',
  lastModified: 1721897215312 }

Do i use readMultipartFormData here instead? I'm not really clear on how to use it properly so help is appreciated.

1 Reply

ArcheristOP•5mo ago

well, tried what i'd get if i used readMultipartFormData

export default defineEventHandler(async (event) => {
    let body = await readMultipartFormData(event)
    console.log(body)
})

export default defineEventHandler(async (event) => {
    let body = await readMultipartFormData(event)
    console.log(body)
})

#
# Fatal error in , line 0
# Fatal JavaScript invalid size error 169220804 (see crbug.com/1201626)
#
#
#
#FailureMessage Object: 0x7641729fa2f0
----- Native stack trace -----

 1: 0x6452642e6357  [/usr/bin/node]
 2: 0x64526504617a V8_Fatal(char const*, ...) [/usr/bin/node]
 3: 0x645264664e3b  [/usr/bin/node]
 4: 0x64526481c350  [/usr/bin/node]
 5: 0x645264828d04  [/usr/bin/node]
 6: 0x645264a7de38 v8::internal::Runtime_GrowArrayElements(int, unsigned long*, v8::internal::Isolate*) [/usr/bin/node]
 7: 0x645264eb5ef6  [/usr/bin/node]

#
# Fatal error in , line 0
# Fatal JavaScript invalid size error 169220804 (see crbug.com/1201626)
#
#
#
#FailureMessage Object: 0x7641729fa2f0
----- Native stack trace -----

 1: 0x6452642e6357  [/usr/bin/node]
 2: 0x64526504617a V8_Fatal(char const*, ...) [/usr/bin/node]
 3: 0x645264664e3b  [/usr/bin/node]
 4: 0x64526481c350  [/usr/bin/node]
 5: 0x645264828d04  [/usr/bin/node]
 6: 0x645264a7de38 v8::internal::Runtime_GrowArrayElements(int, unsigned long*, v8::internal::Isolate*) [/usr/bin/node]
 7: 0x645264eb5ef6  [/usr/bin/node]

Function used in the front end to make the post request

async function save(row:any){
    var data = new FormData()
    for (let file of row.files) {
        data.append("files[]", file)
    }
    data.append("audio", row.blob, `audio.${recorder.mimeType.split(';')[0].split('/')[1]}`)
    try {

        await $fetch("/api/save",{
            method:"post",
            body:data
        })
        
    } catch (ex) {
        error.value= true
        return
    }
    error.value=false

    let index = rows.value.findIndex((r) => r.audio === row.audio) // r.audio is the url string 
    if (index > -1) { 
        rows.value.splice(index, 1); 
    }

}

async function save(row:any){
    var data = new FormData()
    for (let file of row.files) {
        data.append("files[]", file)
    }
    data.append("audio", row.blob, `audio.${recorder.mimeType.split(';')[0].split('/')[1]}`)
    try {

        await $fetch("/api/save",{
            method:"post",
            body:data
        })
        
    } catch (ex) {
        error.value= true
        return
    }
    error.value=false

    let index = rows.value.findIndex((r) => r.audio === row.audio) // r.audio is the url string 
    if (index > -1) { 
        rows.value.splice(index, 1); 
    }

}

Gaming

Programming

Reading multiple files using readFormData