Uploading Multiple Image in Laravel and vue js - laravel

Am working on an app that should upload multiple images in the database using laravel and vue js.
Now for some reason it keeps on returning null value on the back end side. Hope someone can pin point the problem in this code.
this is my front-end code vue js
<template>
<div>
<div>
<form #submit.prevent="submit">
<input type="file" #change="onChange" multiple/>
<input type="submit" value="Upload">
</form>
</div>
</div>
</template>
<script>
export default {
data: ()=>({
image:[],
}),
methods:{
onChange(e){
this.image = e.target.files[0];
},
submit(){
let payload = new FormData();
for(let i=0; i<this.image.length; i++){
payload.append('image[]', this.image[i])
}
axios.post('/api/formsubmit',payload).then(res=>{
console.log("Response", res.data)
}).catch(err=>console.log(err))
}
},
}
</script>
and this is may back-end code Laravel 7
public function multipleupload(Request $request)
{
try{
if($request->hasFile('image')){
$upload = $request->file('image');
$file_name = time().'.'.$upload->getClientOriginalName();
$upload->move(public_path('image'), $file_name);
return response()->json([
'message'=>'File upload successfully!'
], 200);
}else {
return 'no data';
}
}catch(\Exception $e){
return response()->json([
'message'=>$e->getMessage()
]);
}
}
This code will always return 'no data'. been trying to figure it out but with no progress I hope someone can help.
Thanks,

if you want to upload multiple images you have to do loop, you can try this :
public function multipleupload(Request $request)
{
$input = $request->all();
request()->validate([
'image' => 'required',
]);
if($request->hasfile('image'))
{
foreach($request->file('image') as $image)
{
$imageName=file_name =$image->getClientOriginalName();
$image->move(public_path().'/images/', $imageName);
$insert['image'] = "$imageName";
}
}
Image::create($insert);
return back()
->with('success','Multiple Image Upload Successfully');
}

Related

Laravel uploading file using vue3

i am trying to upload file in Laravel storage folder using vue3 composition API. i have added code but file is not being uploaded.
routes are correct, only null value is being added in mysql.
i have 3 columns in mysql database.
id | file_name | file_path
html
<input ref="file" v-on:change="handleFileUpload()" type="file" />
<button #click="senddata" class="">UPLOAD</button>
Vue function:
<script>
import axios from "axios";
import { defineComponent,ref } from 'vue'
export default defineComponent({
setup() {
const file = ref(null)
const handleFileUpload = async() => {
// debugger;
console.log("selected file",file.value.files)
//Upload to server
}
function senddata() {
axios.post('http://127.0.0.1:8000/api/store-files',{
file:this.file,
}).then(response=>{
message=response.data.message;
alert(message);
});
}
return {
senddata,
handleFileUpload,
file
};
}
})
</script>
Laravel Store Controller:
public function store(Request $request)
{
$file=new Files();
if($request->file()) {
$file=new Files();
$file_name = time().'_'.$request->file->getClientOriginalName();
$file_path = $request->file('file_link')->storeAs('uploads', $file_name, 'public');
$file->file_name = time().'_'.$request->file->getClientOriginalName();
$file->file_path = '/storage/' . $file_path;
$file->save();
return response()->json([
'message' => 'File added'
]);
}
}
you cannot send file in json, you need to send via FormData
you need to write code like
html
<input ref="file" v-on:change="handleFileUpload" type="file" />
<button #click="senddata" class="">UPLOAD</button>
Vue function
handleFileUpload() {
const file = ref(null)
this.file = file.value.files;
}
function senddata() {
let formData = new FormData();
formData.append('file',file)
axios.post('http://127.0.0.1:8000/api/store-files',formData).then(response=>{
message=response.data.message;
alert(message);
});
}
ref link https://developer.mozilla.org/en-US/docs/Web/API/FormData

Why this validation gives me always required?

probably I'm doing something wrong, I have been coding by instinct haha. Laravel validation seems super easy to implement but for some reason between my vuejs component to my php function I'm always getting "required".
I'm new with both Laravel and Vuejs, it seems to me that my php function is fine (for what I can see on the web) but probably I'm missing something on the comunication between laravel and vue. Can you tell me whats wrong?
public function createTag(Request $request)
{
try {
$data = request()->validate([
'title' => 'required'
]);
$tag = new Tag;
$tag->title = $request->title;
if($tag->save())
{
$tag->usercontracts()->attach($request->usercontractId);
}
return response()->success(__('success.showing', ['resource' => 'des Vertrags', 'resourceE' => 'tag']), $tag->id, 200);
} catch (Exception $e) {
return response()->error(__('error.showing', ['resource' => 'des Vertrags', 'resourceE' => 'tag']), 400, $e);
}
}
<template>
<div id="relative">
<button #click.prevent="show = 1" v-if="show == 0">+tag</button>
<input type="text" v-model="title" name="title" v-if="show == 1">
<button #click="createTag" v-if="show == 1">add</button>
</div>
</template>
<script>
import TagService from "#/services/TagService";
export default {
name: "add-tag-component",
props: ['usercontractId'],
data(){
return {
title:null,
show:0
};
},
methods:
{
async createTag()
{
const {body: {data}} = await TagService.createTag(this.title, this.usercontractId);
this.$emit('addedTag', this.title, data);
this.title = '';
this.show = 0;
}
}
};
</script>
And this is TagService
export default {
createTag(title, usercontractId, tagId) {
return Vue.http.post(`contract/createTag/${title}/${usercontractId}`, tagId);
}
}
I'm also getting this error. May be here is the answer?
Vue warn]: Error in v-on handler (Promise/async): "[object Object]"
found in
---> at resources/assets/js/components/contract/listing/AddTagComponent.vue
at resources/assets/js/components/contract/listing/ContractListingItemComponent.vue
at resources/assets/js/components/contract/listing/ContractListingComponent.vue
In your TagService
You need to pass the ${title} as payload not as uri.
export default {
createTag(title, usercontractId, tagId) {
return Vue.http.post(`contract/createTag/${title}/${usercontractId}`, tagId);
}
}
to
export default {
createTag(title, usercontractId, tagId) {
return Vue.http.post(`contract/createTag`, {
tagId: tagId,
title: title,
usercontractId: usercontractId
});
}
}
Laravel validates the payload you pass.

VueJs & Laravel. I can't send an excel file with Vuejs and FileReader

I would like to load an excel file to send it with axios to Controller and Maatwebsite\Excel for an Import.
The import part in Controller is working when i use Php from blade, i have a problem when sending from my Vuejs Component. I can't Read the Excel File. or Maybe i can't read it in Controller.
This is my code :
<template>
<input type="file" #change="checkFile" />
<button #click="importExcel()">Import File</button>
</template>
<script>
//In method
checkFile(e) {
var files = e.target.files || e.dataTransfer.files;
console.log('#', files); // The file is in console
if (!files.length)
return;
this.createFile(files[0]);
},
createFile(file) {
var reader = new FileReader();
var vm = this;
reader.readAsDataURL(file)
vm.ex.excel=file; // my ex.excel object contain File
},
importExcel: function () {
var formData = new FormData();
formData.append("file", this.ex.excel);
axios.post('/importExcel', formData)
},
</script>
So in Controller, i use this code when i'm using php (working)
public function importExcel(Request $request)
{
if($request->hasFile('import_file')){
Excel::import(new UsersImport, request()->file('import_file'));
}
return back();
}
When i try this code for axios. i have an error :
public function importExcel(Request $request)
{
Excel::import(new UsersImport, $request->excel);
return back();
}
Error: No ReaderType or WriterType could be detected
Console.log(file) in image
UPDATE: In controller i added
$a = $request->excel;
dd($a);
result in : null
<template>
<input type="file" ref="file" #change="checkFile" />
<button #click="importExcel()">Import File</button>
</template>
<script>
//In method
{
...
createFile(file) {
this.ex.excel = this.$refs.file.target.value.files[0]
}
...
}
</script>
<?php
...
public function importExcel(Request $request)
{
Excel::import(new UsersImport, $request->file('file'));
return back();
}
...
looks like the mime-type is missing, try add the mime-type together with your HTTP POST ...

How upload file PDF in Laravel Using Vue

I wanna get file pdf document from View use Vue to Laravel. But it still bug. Can help me what is wrong with my code?
This is my Blade
<template>
<form class="form" files="true" method="post" #submit.prevent="onSubmit" enctype="multipart/form-data">
<div class="form-group">
<label>File SK
<input type="file" multiple class="form-control-file" name="fileSk" id="fileSk" ref="fileSk"
#change="fileSkUpload()"/>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
This is my Vue Code for getting file
fileSkUpload(event) {
let files = event.target.files;
if (files.length) this.fileSk = files[0];
},
onSubmit() {
let data = new FormData();
data.append('fileSk', this.fileSK);
data.append('_method', 'put'); // add this
axios.post('/psu/list/store', {
data: this.data,
}).then(response => {
this.data = ''
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
},
This is my Controller
public function store(Request $request)
{
$dokumen = new Dokumen();
$psu = new Psu();
$fileSk = $request->file('fileSk');
$data = $request->input('fileSk');
$extension = $fileSk->getClientOriginalExtension();
Storage::disk('uploads')->put($fileSk->getFileName() . '.' . $extension, File::get($file));
$dokumen->file_image_dokumen = $fileSk->getFileName() . '.' . $extension;
$dokumen->save();
}
I got this Error:
"Call to a member function getClientOriginalExtension() on null"
Error
In your controller you haven't initialised the $file variable.
Instead of using the Storage facade to store the file you can just use the Request itself:
$fileSk->storeAs('', $fileSk->getFileName() . '.' . $extension, 'uploads');
Storing uploaded files
You seem to have a few of issues in your JS code.
1. Don't include the parentheses in #change="fileSkUpload()" as this will cause the event not to be passed to the method:
#change="fileSkUpload"
alternatively you will have to pass the event yourself:
#change="fileSkUpload($event)"
$event docs
2. I noticed that in your fileSkUpload method you're referencing this.fileSk but in your onSubmit method you're referencing this.fileSK (capitalised K) - these should be the same.
3. You don't need to wrap the FormData in a object. Change your axios call to just be:
axios.post('/psu/list/store', data)
.then(response => {
this.data = ''
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});

retrieve value from session in laravel route

in route cats/create,I post a form with a validation.it will redirect to cats/create if don't accord with the regulation.I want to retrieve the $validation_result->messages() in action of cats/create.Will these be possible?the result of dd($message) is null:
Route::get('cats/create', function() {
$message=Session::get('message');
dd($message);
if($message->has('name')){
foreach ($message->get('name') as $messageone){
echo $messageone;
}
}
$cat = new Cat;
return View::make('cats.edit')
->with('cat', $cat)
->with('method', 'post');
});
Route::post('cats', function() {
$rules = array(
'name' => 'required|min:3', // Required, > 3 characters
'date_of_birth' => array('required', 'date') // Must be a date
);
$formresult=Input::all();
$validation_result = Validator::make($formresult,$rules);
if($validation_result->fails()){
return Redirect::back()->with('message', $validation_result->messages());
}else{
$cat = Cat::create($formresult);
$cat->user_id = Auth::user()->id;
if ($cat->save()) {
return Redirect::to('cats/' . $cat->id)
->with('message', 'Successfully created profile!');
} else {
return Redirect::back()
->with('error', 'Could not create profile');
}
}
});
but when I retrieve data from session in blade file,it is possible:
#if(Session::has('message'))
<div class="alert alert-success">
{{Session::get('message')}}
</div>
#endif
why? I cannot understand about this.
Change your condition from
if($validation_result->fails()){
return Redirect::back()->with('message', $validation_result->messages());
}
to
if($validation_result->fails())
{
$message = $validation_result->messages();
return Redirect::back()->with('message',$message);
}
maybe I saw wrong somethings,it work now!

Resources