Can't access formData in backend Slim 4

Question

I'm trying to upload files using vue.js, slim 4 and vuetify and I can't access the formData in my backend.

This is my vuetify form:

<v-form>
 <v-row>
   <v-col cols="12" sm="12" md="12">
     <v-file-input v-model="selectedFile" multiple show-size outlined label="File input"></v-file-input>
   </v-col>
   <v-col cols="12" sm="12" md="12">
     <v-textarea label="Description"></v-textarea>
   </v-col>
 </v-row>
</v-form>

My upload function in methods:

uploadFile: function(){

   console.log(this.selectedFile)

   var self = this

   const formData = new FormData()

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

   formData.append('file', this.selectedFile)

   axios.post('/file/upload', formData, config)
     .then(response => {
       console.log(response)
   })
}

And this is my backend controller:

class FileController extends BaseController {

    public function create(Request $request, Response $response) {

        $directory = $this->container->get('upload_directory');
        $uploadedFiles = $request->getUploadedFiles();

        foreach ($uploadedFiles['file'] as $uploadedFile) {
            if ($uploadedFile->getError() === UPLOAD_ERR_OK) {
                $filename = Upload::moveUploadedFile($directory, $uploadedFile);
                $response->getBody()->write('Uploaded: ' . $filename . '<br/>');
            }
        }
    
        return $response;
    
    }

}

And this is the response I am getting, Im getting status 200, OK but data is empty when it should be Uploaded how I established it in my backend controller.

Object config: {url: "/file/upload", method: "post", data: FormData, headers: {…}, transformRequest: Array(1), …} data: "" headers: {cache-control: "no-store, no-cache, must-revalidate", connection: "Keep-Alive", content-length: "0", content-type: "text/html; charset=UTF-8", date: "Wed, 14 Oct 2020 18:47:47 GMT", …} request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …} status: 200 statusText: "OK" proto: Object

Answer 1

Axios stores the response data in response.data. You should console.log that, instead of response.

A few other points:

• it is not ok to use the variable name formData because it is confusing. Variable names should be more descriptive;
• from the code you pasted var self = this seems to be useless. You usually do that when using function() instead of arrow functions to keep a reference to the Vue context;
• if selectedFile is an array of files, besides being a misleading name, you should loop trough the array and add each file to the FormData object. Something like this:

    this.selectedFile.forEach(el => {
    formData.append('file[]', el);
    });

file[] helps PHP understand it should create an array of files with the name file. And file should actually be files to be semantically correct.