Uploading pdf file in laravel vuejs Axios - laravel

Question

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
The given data was invalid.","errors":{"file":["The file field is
required.
controller code is
public function store(Request $request)
{
$DocumentType= new DocumentType();
$this->validate($request,[
'name'=>'required',
'file' => 'required',
]);
$DocumentType->name = $request->input('name');
$fileName = time().'.'.$request->file->extension();
$request->file->move(public_path('Files'), $fileName);
$DocumentType->file = $name;
$DocumentType->save();
return response()->json($DocumentType);
}
Vue code is
<template>
<div class="container">
<div
class="modal fade"
id="addNew"
tabindex="-1"
role="dialog"
aria-labelledby="addNewLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" v-show="!editMode" id="addNewLabel">ثبت اسناد جدید</h5>
<h5 class="modal-title" v-show="editMode" id="addNewLabel">تمدید اسناد</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="margin-right: 317px;">×</span>
</button>
</div>
<form
#submit.prevent="editMode ? updateDocumentType() : createDocumentType()"
enctype="multipart/form-data"
>
<div class="modal-body">
<div class="form-group">
<input
v-model="form.name"
placeholder="نام"
type="text"
name="name"
class="form-control"
:class="{ 'is-invalid': form.errors.has('name') }"
/>
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<label for="file" class="col-sm-4 control-label">File</label>
<div class="col-sm-12">
<input
type="file"
class="form-input"
:class="{ 'is-invalid': form.errors.has('file') }"
id="file"
name="file"
/>
<has-error :form="form" field="file"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">لغو</button>
<button
v-show="editMode"
:disabled="form.busy"
type="submit"
class="btn btn-success"
>تمدید</button>
<button
v-show="!editMode"
:disabled="form.busy"
type="submit"
class="btn btn-primary"
>ثبت</button>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
</div>
<script>
createDocumentType() {
// axios.get("api/getAllDocumentTypeDocumentType").then(response => {
// let data = response.data;
if (this.form.name == "") {
toast.fire({
type: "warning",
icon: "warning",
html: "<h5>نام لازم است.</h5>"
});
}
// else if (this.form.file == "") {
// toast.fire({
// type: "warning",
// icon: "warning",
// html: "<h5>لطفا،اسناد را انتخاب نماید.</h5>"
// });
// }
else {
this.form
.post("api/DocumentType")
.then(() => {
// the below function will be use to reload the page
// this.$emit("refreshPage");
$("#addNew").modal("hide");
toast.fire({
icon: "success",
type: "success",
html: "<h5> اسنادموافقانه اجاد گردید</h5>"
});
Fire.$emit("refreshPage");
this.form.reset();
// this.$Progress.finish();
})
.catch(er => {
console.log(er);
});
}
}
</script>
Migration table code
public function up()
{
Schema::create('document_types', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('file')->nullable();
$table->softDeletes();
$table->timestamps();
});
}
Code in API route
Route::apiResources(['DocumentType'=>'API\DocumentTypeController']);
Route::get('getAllDocumentType','API\DocumentTypeController#getAll');

Answer 1

The given data was invalid.","errors":{"file":["The file field is required. This error is because there is no existing file in your payload upon submission of your form.
in your form, bind data to your input file like what you did to your input name. like this
<input
type="file"
v-model="form.file"
class="form-input"
:class="{ 'is-invalid': form.errors.has('file') }"
id="file"
name="file"
/>
Or, attach an event to this file input and process the file provided. like this
<input
type="file"
class="form-input"
:class="{ 'is-invalid': form.errors.has('file') }"
id="file"
name="file"
#change="selectFile"
/>
Then in your methods, create also a selectFile function
methods: {
selectFile(file) {
if(file == "") return false
this.form.file = file.target.files
console.log(this.form.file)
}
}