slim 4 - multiple file upload empty $_FILES array

Question

I'm havong some trouble to upload multiple file at once in my vue and php app. I'm using slim to have an endpoint where upload request is posted: On the server side I have this code to test if all works fine:

$app->post('/compress', function(Request $request, Response $response){

    $files = $request->getUploadedFiles();
    var_dump($files); // this will result in empty
    
    //return $response;
});

In my javascript code, inside a vue method I have this code that is called when the file input will change:

      let formData = new FormData();
      for(let i; i < this.$refs.selectedImages.files.length; i++){
        formData.append('images[]', this.$refs.selectedImages.files[i]);
      }

      let config = {
        header: {
          'Content-Type': 'multipart/form-data',
        },
        withCredentials: true
      }

      axios.post('http://localhost:3000/compress', formData, config)
      .then( (response) => {
        console.log(response, response.data);
      });

tha result is that the var_dump will give me empty. How I can fix?

Potato · Accepted Answer · 2020-11-15 14:24:51Z

1

Can you try this one?

for( var i = 0; i < this.$refs.selectedImages.files.length; i++ ){
    let file = this.$refs.selectedImages.files[i];
    formData.append('images[' + i + ']', file);
}

edited Nov 15, 2020 at 14:24

answered Nov 15, 2020 at 14:09

Potato

1051 silver badge7 bronze badges

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

4 Comments

fed3vt Over a year ago

Tested, but on the server side I get Undefined index images that is the name that I have assigned to the FormData append field. It's like the $request->getUploadedFiles() will not be filled.

fed3vt Over a year ago

I've also looped like suggested here the getUploadedFiles() in the server side code

Potato Over a year ago

uhm try to comment out this one first $files = $request->getUploadedFiles(); then try to dump the $_FILES

fed3vt Over a year ago

dump the $_FILES global will result in empty. But slim handle the $_FILES using the $request object :(

fed3vt · Accepted Answer · 2020-11-15 20:20:51Z

1

After a lot of debug I've fixed the code. The problem was with the for() loop that seems not working to iterate FileList in my case. I've replaced it with a forEach() and voilà! The server started to get the uploaded files.

let files = this.$resf.selectedImages.files;
let formData = new FormData();
files.forEach( (el) => {
  formData.append('images[]', el); 
});

answered Nov 15, 2020 at 20:20

fed3vt

2991 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

slim 4 - multiple file upload empty $_FILES array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related