title: Upload file from VueJS app to API in Laravel
body: <p>I'm trying to upload a file (Excel sheet) from a front-end app build with VueJS to an API build with Laravel 5.5. I've some form request validation which says to me that <code>The file field is required</code>. So the file doesn't get uploaded to my API at all.</p>
  
  <p>VueJS file upload:</p>
  
  <pre><code>onFileChange(e) {
    let files = e.target.files || e.dataTransfer.files;
  
    if (files.length &lt;= 0) {
      return;
    }
  
    this.upload(files[0]);
  },
  upload(file) {
    this.form.file = file;
  
    this.form.put('courses/import')
      .then((response) =&gt; {
        alert('Your upload has been started. This can take some time.');
      })
      .catch((response) =&gt; {
        alert('Something went wrong with your upload.');
      });
  }
  </code></pre>
  
  <p><code>this.form</code> is a Form class copied from <a href="https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js#L67" rel="nofollow noreferrer">this project</a> but the <code>data()</code> method returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" rel="nofollow noreferrer">FormData</a> object instead of a object.</p>
  
  <p><code>data()</code> method:</p>
  
  <pre><code>data() {
      let data = new FormData();
  
      for (let property in this.originalData) {
          data.append(property, this[property]);
      }
  
      return data;
  }
  </code></pre>
  
  <p>The route: </p>
  
  <p><a href="https://i.stack.imgur.com/htOHe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/htOHe.png" alt="enter image description here"></a></p>
  
  <p>FormRequest rules:</p>
  
  <pre><code>public function rules()
  {
      return [
          'file' =&gt; 'required',
      ];
  }
  </code></pre>
  
  <p>If I look to the Network tab in Chrome DevTools it does seem that the request is send correctly: <a href="https://i.stack.imgur.com/PG9N8.png" rel="nofollow noreferrer">(image after click)</a>.</p>
  
  <p>I've tried a lot of things, like sending the excel as base64 to the api. But then I couldn't decode it correctly. So now I'm trying this, but I can't solve the problem.</p>
  
  <p><strong>Edit (controller function)</strong></p>
  
  <pre><code>public function update(ImportRequest $request, CoursesImport $file)
  {
      $courses = $file-&gt;handleImport();
  
      dispatch(new StartCourseUploading($courses, currentUser()));
  
      $file-&gt;delete();
  
      return ok();
  }
  </code></pre>