title: PHP - Laravel is not storing files from request although the response is 200
body: <p>Trying to upload a photo locally using Laravel with <strong>Vuejs</strong></p>
  <blockquote>
  <ol>
  <li>I am sending the file from the <strong>Vue component</strong> to the backend like the code below:</li>
  </ol>
  </blockquote>
  
              
  <pre><code>        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;photo&quot;&gt;photo&lt;/label&gt;
            &lt;input
              type=&quot;file&quot;
              class=&quot;form-control&quot;
              id=&quot;photo&quot;
              name=&quot;photo&quot;
              ref=&quot;inputFile&quot;
              
            /&gt;
          &lt;hr /&gt;
          &lt;/div&gt;
          &lt;button 
          type=&quot;submit&quot; 
          class=&quot;btn btn-primary&quot;&gt;
          Add
          &lt;/button&gt;
        &lt;/form&gt;
  </code></pre>
  <p>and this is the script in the same component
  </p>
  <pre><code>import { mapActions } from &quot;vuex&quot;;
  
  export default {
  
    data() {
      return {
        category: {
          photo: this.$refs.inputFile,
          csrf: document.querySelector('meta[name=&quot;csrf-token&quot;]').getAttribute('content'),
          config: {
            headers: { 'content-type': 'multipart/form-data' }
          }
        },
      };
    },
    methods: {
      ...mapActions([&quot;createCategory&quot;]),
      submitForm() {
        const form_data = new FormData();
        form_data.append('photo', this.category.photo);
        form_data.append('csrf', this.category.csrf);
        // The following method is the mapped action
        this.createCategory(form_data);
      }
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>The mutations.js file</strong></p>
  <pre><code>createCategory(state, category) {
          axios.post('http://127.0.0.1:8000/api/categories', category).then(res =&gt; {
              console.log(&quot;Response: &quot; + res);
          }).catch(res =&gt; {
              console.log(&quot;Exp: &quot; + res);
          });
      }
  </code></pre>
  <p><strong>The actions.js file</strong></p>
  <pre><code>createCategory(context, category) {
          context.commit('createCategory', category);
  }
  </code></pre>
  <blockquote>
  <ol start="2">
  <li>At the backend I am using <strong>categories</strong>  driver in
  &gt;     <strong>filesystems.php</strong> as the following:</li>
  </ol>
  </blockquote>
  <pre><code>'categories' =&gt; [
              'driver' =&gt; 'local',
              'root' =&gt; base_path() . '/images/categories',
              'url' =&gt; env('APP_URL').'/public',
              'visibility' =&gt; 'public',
          ],
  </code></pre>
  <blockquote>
  <ol start="3">
  <li>uploading the file using <strong>$request-&gt;photo-&gt;store</strong> method as the code in the following Controller</li>
  </ol>
  </blockquote>
  <pre><code>public function store(CategoryRequest $request) {
          try {
              
              // Start Uploading File
              $file = &quot;&quot;;
              if($request-&gt;has('photo')) {
                  $file = $request-&gt;photo;
                  $folder = 'categories';
                  $file-&gt;store('/', $folder);
                  $filename = $file-&gt;hashName();
                  $path = 'images/' . $folder . '/' . $filename;
                  
              }
              // End Uploading File
              
  
              
              // Start creating category
              $category = new Category();
              $category-&gt;photo = $path;
              $category-&gt;save();
              // End creating category
  
              return response()-&gt;json(['message' =&gt; 'Created Successfully'], 200);
          } catch(\Exception $ex) {
              return $ex;
          }
      }
  </code></pre>