Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

nanadjei2's avatar

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
        ]);
    }
0 likes
4 replies
jake.admin@gmail.com's avatar

Just a small tip, Image sometimes flips images around based on their EXIF data (especially images taken with cell phones. I know you didn't ask, but I always recommend adding ->orientate() to your Image:make()

1 like
nanadjei2's avatar
     const fileInput = document.querySelector( '#image' );
     const formData = new FormData();
      formData.append( 'image', fileInput.files[0] );

      axios.post( '/spa/slider/images/', formData )
    .then( ( response ) => {
           console.log(response.data);
      } )
        .catch( ( error ) => {
    console.log(error.response);
     } );

@Cronix Thank you so much. Your solution worked.

@jake.admin@gmail.com Thank you for the tip as well.

Please or to participate in this conversation.