Yeah, that's not how you upload a file via ajax. See if this helps: https://laracasts.com/discuss/channels/laravel/laravel-54-upload-files-with-axios?page=0
May 31, 2018
4
Level 4
Image upload with Intervention image - error "Image source not readable"
I am creating a single page application with vue.js and laravel. I want to upload an Image with ajax but I keep getting this error "Image source not readable"
This is my vue component.
<form @submit.prevent="create" action="/spa/slider/images/" method="POST" enctype="multipart/form-data">
<div class="box">
<div class="box-header">
<h2>Slider Image</h2>
</div>
<div class="box-divider m-0"></div>
<div class="box-body">
<div class="form-group">
<input id="image" type="file" class="form-control" :class="{ 'is-invalid': errors.has('image') }" name="image" v-validate="'required|image'" >
<span :class="`invalid-feedback`" v-show="errors.has('image')"><strong>{{ errors.first('image') }}</strong></span>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn primary"><i class="fa fa-check"></i> Submit</button>
</div>
</form>
This is my ajax
create() {
let $this = this;
this.$validator.validateAll().then(() => {
axios({
method: 'POST',
url: '/spa/slider/images/',
data: {
token: this.token,
image: $('#image').val()
}
}).then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error.response);
});
});
} // create function ends here
This is my controller:
if($file = $request->has('image')) {
/*********************** Extra-small Devices ************************/
$drawable_mdpi = time().'xsm' . '.' . $request->image;
Image::make($request->image)->resize(401, 267)
->save(SliderImage::imageHandlerType('upload', $drawable_mdpi));
SliderImage::create([
'drawable_mdpi' => $drawable_mdpi
]);
}
Level 67
1 like
Please or to participate in this conversation.