Easy method for quasar file upload using backend laravel API
Hello friends, in this post i am going to show you quasar file upload process tutorial using Laravel API in Quasar. In quasar we use q-uploader to upload files. It is easy and more efficient than other methods. This is a simple process and lets get started.
First of all get the q-uploader component from the quasar. This component is available in official quasar docs. I placed the link below. Go to the link and find the component.
https://quasar.dev/vue-components/uploader#QUploader-API
Or you can place the following component code in your quasar project to begin quasar file upload process
<q-uploader
style="max-width: 300px"
label="Main Image"
:factory="uploadFile"
max-files="1"
accept=".jpg, image/*"
@rejected="onRejected"
/>So as a quick intro about above code, we can assign attributes for q-uploader component such as styles, label, max-files as limitations, accept as acceptable extensions. And specially in this tutorial we wont give the URL directly as a attribute. You can see in quasar docs they have used the URL in q-uploader attributes, but by using a separate function for handle the uploading process we can do more things.
In that case we are using :factory attribute to assign the function which we want run on submit and we are using @rejected with function name to call when user cancelled uploading.
So now define the file_path string in data and also uploading method and onRejected method in methods section. Make sure the name similar to the function you have given on :factory of q-uploader
data () {
return {
file_path : null,
}
},
methods: {
uploadFile(files) {
this.file_path = files[0]
const fileData = new FormData()
fileData.append('file_path ', this.file_path)
//Replace http://localhost:8000 with your API URL
const uploadFile = this.$axios.post('http://localhost:8000/uploads', fileData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
console.log(response.data);
// Notify plugin needs to be installed
// https://quasar.dev/quasar-plugins/notify#Installation
this.$q.notify({
type: 'possitive',
message: `Image Uploaded`
})
});
},
onRejected (rejectedEntries) {
// Notify plugin needs to be installed
// https://quasar.dev/quasar-plugins/notify#Installation
this.$q.notify({
type: 'negative',
message: `${rejectedEntries.length} file(s) did not pass validation constraints`
})
},
}Note:- In order to work notify, you should install the Notify plugin as mentioned in the comment. You can find the plugin from the official Quasar site and follow the instructions to include the notify plugin
Now in Laravel Backend define routes and functions to handle those API calls
In web.php
For pure Laravel API
Route::post('/uploads', [FileUploaderController::class, 'uploads']);For Laravel/Lumen API
$router->post('/uploads', 'FileUploaderController@uploads');In the Controller
public function uploads(Request $request){
$this->validate($request, [
'file_path'=>'required'
]);
try {
$file_original_path = (object) ['file_path' => ""];
if ($request->hasFile('file_path')) {
$original_filename = $request->file('file_path')->getClientOriginalName();
$original_filename_arr = explode('.', $original_filename);
$file_ext = end($original_filename_arr);
$destination_path = './uploads/files/';
$file_path_name = 'C-' . time() . '.' . $file_ext;
if ($request->file('file_path')->move($destination_path, $file_path_name )) {
$uploadPath = '/uploads/files/'.$file_path_name ;
return response() -> json(['path'=>$uploadPath, 'message' => 'File has been Successfully Uploaded'], 201);
} else {
return response() -> json('Cannot upload file');
}}
} catch (Exception $e) {
throw new NotFoundException('Upload Failed');
}
}Thats it!! If you have any questions please comment below. If you want to check Multiple Images Uploading Go to below link.
Or check my latest posts.
Thanks