title: How to upload file using laravel vue api?
body: <p>i'm trying to make a form with the ability to upload files using form</p>
  <p>i'm able to store string, int data but i'm a bit lost with the way that i need to provide for the controller and the view</p>
  <p>this is the add template:</p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-12&quot;&gt;
          &lt;div class=&quot;card&quot;&gt;
              &lt;div class=&quot;card-header&quot;&gt;
                  &lt;h4&gt;Add Category&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                  &lt;form
                      @submit.prevent=&quot;create&quot;
                      enctype=&quot;multipart/form-data&quot;
                  &gt;
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-12 mb-2&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label&gt;Title&lt;/label&gt;
                                  &lt;input
                                      type=&quot;text&quot;
                                      class=&quot;form-control&quot;
                                      v-model=&quot;category.title&quot;
                                  /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-12 mb-2&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label&gt;Description&lt;/label&gt;
                                  &lt;input
                                      type=&quot;text&quot;
                                      class=&quot;form-control&quot;
                                      v-model=&quot;category.description&quot;
                                  /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-12 mb-2&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label&gt;name&lt;/label&gt;
                                  &lt;input
                                      type=&quot;text&quot;
                                      class=&quot;form-control&quot;
                                      v-model=&quot;category.name&quot;
                                  /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-12 mb-2&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label&gt;path&lt;/label&gt;
                                  &lt;input
                                      type=&quot;text&quot;
                                      class=&quot;form-control&quot;
                                      v-model=&quot;category.path&quot;
                                  /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-12 mb-2&quot;&gt;
                              &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label&gt;File&lt;/label&gt;
                                  &lt;input
                                      type=&quot;file&quot;
                                      class=&quot;form-control&quot;
                                      v-on:change=&quot;onChange&quot;
                                  /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col-12&quot;&gt;
                              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;
                                  Save
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  name: &quot;add-category&quot;,
  data() {
      return {
          category: {
              title: &quot;&quot;,
              description: &quot;&quot;,
              name: &quot;&quot;,
              file: &quot;&quot;,
          }
      };
  },
  methods: {
      async create() {
          await this.axios
              .post(&quot;/api/category&quot;, this.category)
              .then(response =&gt; {
                  this.$router.push({ name: &quot;categoryList&quot; });
              })
              .catch(error =&gt; {
                  console.log(error);
              });
      }
  }
  };
  &lt;/script&gt;
  </code></pre>
  <p>this is the database table:</p>
  <pre><code>public function up()
  {
      Schema::create('categories', function (Blueprint $table) {
          $table-&gt;bigIncrements('id');
          $table-&gt;string('title');
          $table-&gt;text('description');
          $table-&gt;string('name')-&gt;nullable();
          $table-&gt;string('path')-&gt;nullable();  
          $table-&gt;timestamps();
      });
  }
  </code></pre>
  <p>controller:</p>
  <pre><code>public function store(Request $request)
  {
      $category = Category::create($request-&gt;post());
      return response()-&gt;json([
          'message'=&gt;'Category Created Successfully!!',
          'category'=&gt;$category
      ]);
  }
  </code></pre>
  <p>model:</p>
  <pre><code>class Category extends Model
  {
  use HasFactory;
  
  protected $fillable = ['title','description','name','path'];
  }
  </code></pre>
  <p>app:</p>
  <pre><code>require('./bootstrap');
  import vue from 'vue'
  window.Vue = vue;
  
  import App from './components/App.vue';
  import VueRouter from 'vue-router';
  import VueAxios from 'vue-axios';
  import axios from 'axios';
  import {routes} from './routes';
  
  Vue.use(VueRouter);
  Vue.use(VueAxios, axios);
  
  const router = new VueRouter({
  mode: 'history',
  routes: routes
  });
  
  const app = new Vue({
  el: '#app',
  router: router,
  render: h =&gt; h(App),
  });
  </code></pre>
  <p>i can provide more code if necessary</p>
  <p>the current code is working and storing in database but the only problem is uploading a file</p>