How to send an array of files using FormData?

Question

In the backend in laravel I have a field called "file_ticket" and I need to send an array that contains files sent through an input file, I use vue js in the frontend. How can I send this array to my backend? When I try to send only the array, the request returns something like "object file"

result image

onChange(e) {
  let getFiles = [...this.$refs.file.files]
  
  if(!getFiles) return
  ([...getFiles]).forEach(f => {
    this.filelist.push(f)
  })      
},


saveTicket(event){
  event.preventDefault()      
               
  let frmData =  new FormData()
  frmData.append('subject', this.newTicket.subject) 
  frmData.append('service', this.newTicket.service) 
  frmData.append('description', this.newTicket.description)       
  frmData.append('file_ticket', this.filelist)       
  frmData.append('client_id', this.idUser) 


  const url = `ticket/new_ticket`

  axios.post(url, frmData).then((response) => {
    console.log(response)
  })

Use JSON. On the server side use json_decode. On the client use JSON.stringify([1, 2, 3]);, where [1, 2, 3] is your array. — idk wut to put here
– idk wut to put here, Commented Sep 8, 2021 at 23:19
@Someone_who_likes_SE I don't think you can do that. I'm pretty sure you have to use FormData() — bassxzero
– bassxzero, Commented Sep 8, 2021 at 23:24

Mythos · Accepted Answer · 2021-09-09 04:42:54Z

6

Just append all the files in filelist to formdata using the same key, it will send an array of files.

this.filelist.forEach((file) => {
    frmData.append('file_ticket', file);
});

answered Sep 9, 2021 at 4:42

Mythos

1,5021 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

armin Over a year ago

Not woking with single file.. file_ticket is not array for single file... this worked only for multiple files

Mythos Over a year ago

That's a different issue, a problem in your backend implementation where you receive the multipart formdata. This is a front-end question.

jro · Accepted Answer · 2023-06-06 06:21:29Z

2

Instead of appending your files to another array as done in the question append directly but with added square brackets.

Instead of using this:

this.filelist.push(f)

just append the file to the form data object like this:

 frmData.append('file_ticket[]', file);

In your Laravel controller just use this code to take your files (I assume you're using POST and you're passing the Request object as your parameter to your controller function)

if ($request->hasFile('file_ticket')) {
   $file_tickets = $request->file('file_ticket');
   foreach ($file_tickets as $index => $file_ticket) {
      //The rest of your code goes here
   }
}

The hasFile function checks if your request has that file ticket and the $request->file is used to get the array of files.

edited Jun 6, 2023 at 6:21

jro

9401 gold badge10 silver badges22 bronze badges

answered Jun 5, 2023 at 13:01

Default

213 bronze badges

Collectives™ on Stack Overflow

How to send an array of files using FormData?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related