title: Uploading pdf file in laravel vuejs Axios
body: <p>I have created a project for bookshop and in the section of employee information I want to upload a PDF file using code given below.it give me the below error.I have been trying since few days but I could not get the solution if there is any sample way please guide me
  any help will be highly appreciated  </p>
  
  <blockquote>
    <p><strong>The given data was invalid.","errors":{"file":["The file field is
    required.</strong></p>
  </blockquote>
  
  <p><strong>controller code is</strong> </p>
  
  <pre><code>public function store(Request $request)
    {
         $DocumentType= new DocumentType();
                    $this-&gt;validate($request,[
              'name'=&gt;'required',
              'file' =&gt; 'required',                
          ]);
  
          $DocumentType-&gt;name = $request-&gt;input('name');
          $fileName = time().'.'.$request-&gt;file-&gt;extension();  
          $request-&gt;file-&gt;move(public_path('Files'), $fileName);
          $DocumentType-&gt;file =  $name;
           $DocumentType-&gt;save();
           return response()-&gt;json($DocumentType);
  
    }
  </code></pre>
  
  <p><strong>Vue code is</strong> </p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
   &lt;div
        class="modal fade"
        id="addNew"
        tabindex="-1"
        role="dialog"
        aria-labelledby="addNewLabel"
        aria-hidden="true"
      &gt;
        &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h5 class="modal-title" v-show="!editMode" id="addNewLabel"&gt;ثبت اسناد جدید&lt;/h5&gt;
              &lt;h5 class="modal-title" v-show="editMode" id="addNewLabel"&gt;تمدید اسناد&lt;/h5&gt;
  
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                &lt;span aria-hidden="true" style="margin-right: 317px;"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;form
              @submit.prevent="editMode ? updateDocumentType() : createDocumentType()"
              enctype="multipart/form-data"
            &gt;
              &lt;div class="modal-body"&gt;
                &lt;div class="form-group"&gt;
                  &lt;input
                    v-model="form.name"
                    placeholder="نام"
                    type="text"
                    name="name"
                    class="form-control"
                    :class="{ 'is-invalid': form.errors.has('name') }"
                  /&gt;
                  &lt;has-error :form="form" field="name"&gt;&lt;/has-error&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label for="file" class="col-sm-4 control-label"&gt;File&lt;/label&gt;
  
                  &lt;div class="col-sm-12"&gt;
                    &lt;input
                      type="file"
                      class="form-input"
                      :class="{ 'is-invalid': form.errors.has('file') }"
                      id="file"
                      name="file"
                    /&gt;
                    &lt;has-error :form="form" field="file"&gt;&lt;/has-error&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;لغو&lt;/button&gt;
  
                  &lt;button
                    v-show="editMode"
                    :disabled="form.busy"
                    type="submit"
                    class="btn btn-success"
                  &gt;تمدید&lt;/button&gt;
                  &lt;button
                    v-show="!editMode"
                    :disabled="form.busy"
                    type="submit"
                    class="btn btn-primary"
                  &gt;ثبت&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
    &lt;/div&gt;
  &lt;script&gt;
    createDocumentType() {
        // axios.get("api/getAllDocumentTypeDocumentType").then(response =&gt; {
        //   let data = response.data;
  
        if (this.form.name == "") {
          toast.fire({
            type: "warning",
            icon: "warning",
            html: "&lt;h5&gt;نام لازم است.&lt;/h5&gt;"
          });
        }
        // else if (this.form.file == "") {
        //   toast.fire({
        //     type: "warning",
        //     icon: "warning",
        //     html: "&lt;h5&gt;لطفا،اسناد را انتخاب نماید.&lt;/h5&gt;"
        //   });
        // }
        else {
          this.form
            .post("api/DocumentType")
            .then(() =&gt; {
              //    the below function will be use to reload the page
  
              //   this.$emit("refreshPage");
              $("#addNew").modal("hide");
              toast.fire({
                icon: "success",
                type: "success",
                html: "&lt;h5&gt; اسنادموافقانه اجاد گردید&lt;/h5&gt;"
              });
              Fire.$emit("refreshPage");
              this.form.reset();
              //   this.$Progress.finish();
            })
            .catch(er =&gt; {
              console.log(er);
            });
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>Migration table code</p>
  </blockquote>
  
  <pre><code> public function up()
      {
          Schema::create('document_types', function (Blueprint $table) {
              $table-&gt;bigIncrements('id');
               $table-&gt;string('name');            
              $table-&gt;string('file')-&gt;nullable();
               $table-&gt;softDeletes();
              $table-&gt;timestamps();
          });
      }
  </code></pre>
  
  <p><strong>Code in API route</strong></p>
  
  <pre><code>Route::apiResources(['DocumentType'=&gt;'API\DocumentTypeController']);
  Route::get('getAllDocumentType','API\DocumentTypeController@getAll');
  </code></pre>