1๐
//Follow this instruction
File
<input
type="file"
ref="image2"
v-on:change="handleFilesUpload()"
/>
In methods properties
handleFilesUpload() {
let uploadedFiles = this.$refs.image2.files;
let fileExtension = uploadedFiles[0].name.replace(/^.*\./, "");
//console.log("fileExtension", fileExtension);
let allowedExtensions = /(\.jpg|\.JPG|\.jpeg|\.JPEG|\.png|\.PNG|\.pdf|\.PDF|\.doc|\.docx)$/i;
if (!allowedExtensions.exec(uploadedFiles[0].name)) {
var message = "You can upload jpg, jpeg, png, pdf and docx file only";
this.$refs.image2.value = "";
this.documentFiles = [];
} else {
//console.log("uploadedFiles[i] = ", uploadedFiles[0]);
//Upload for single file
this.documentFiles = uploadedFiles;
//Upload for multiple file
/*
for (var i = 0; i < uploadedFiles.length; i++) {
this.documentFiles.push(uploadedFiles[i]);
}
*/
}
},
// After submit form
validateBeforeSubmit(e) {
let formData = new FormData();
for (var i = 0; i < this.documentFiles.length; i++) {
let file = this.documentFiles[i];
formData.append("files[" + i + "]", file);
}
axios.post('laravel-api-url', formData)
.then(res => {
console.log({res});
}).catch(err => {
console.error({err});
});
},
--In Laravel controller function--
public function save($request){
$total = @count($_FILES['files']['name']);
if ($total>0)
{
$allFiles = $this->uploadFiles($request);
$data['document_file_name'] = ($allFiles) ? $allFiles[0] :
$result = CreditMaster::create($data);
if ($result) {
return response()->json(array('status' => 1,
'message' => 'Data saved successfully!'));
} else {
return response()->json(array('status' => 0, 'message' => 'Save failed!'));
}
}
}
public function uploadFiles($request)
{
$storeFileName = [];
$total = @count($_FILES['files']['name']);
$diretory = '/save_directory_name/';
$path = public_path() . $diretory;
$fileForMate = time() . '_';
for ($i = 0; $i < $total; $i++) {
$tmpFilePath = $_FILES['files']['tmp_name'][$i];
if ($tmpFilePath != "") {
$fileName = $fileForMate . $_FILES['files']['name'][$i];
$newFilePath = $path . $fileName;
if (move_uploaded_file($tmpFilePath, $newFilePath)) {
array_push($storeFileName, $diretory.$fileName);
}
else
{
return $_FILES["files"]["error"];
}
}
}
return $storeFileName;
}
๐คBulbul Sarker
- [Vuejs]-CKFinder 3 with Laravel 6 and Vuejs โ 404 Error when accessing File Browser from vue
- [Vuejs]-@click event not working in vue component
Source:stackexchange.com