Image upload with Intervention image - error "Image source not readable"

Posted 1 year ago by nanadjei2

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 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 class="form-group">
        <button type="submit" class="btn primary"><i class="fa fa-check"></i> Submit</button>

This is my ajax

   create() {
        let $this = this;

        this.$validator.validateAll().then(() => {


            method: 'POST',

            url: '/spa/slider/images/',

            data: {
                token: this.token,
                image: $('#image').val()

          }).then((response) => {

          }).catch((error) => {


      } // 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));


              'drawable_mdpi'     =>  $drawable_mdpi

Please sign in or create an account to participate in this conversation.