How to upload photo using Laravel RestApi and vuejs

Question

I'm working on a RestFulApi using Laravel and Vuejs, now want upload a photo using RestfulApi and vuejs. Here comes my sample code:

<div class="form-group form-group-default float-left required">
<label for="photo">Photo</label>
<input class="file-input" type="file" ref="photo" name="photo"  v-
    on:change="addFile($event)">        
</div>
data(){
return{              
    films_info:
    {                       
        photo: null,
     }
    }
},
methods: {
addFile: function(e){
    let that = this;
    that.films_info.photo = this.$refs.photo.files[0];
},
saveFilms: function(){
    let that = this;
    axios.post('/api/films/save_films',that.films_info)
        .then(function (response) {
             location.reload(true);
         })
         .catch(function (error) {
             that.errors = error.response.data.errors;
             console.log("Error Here: "+error.response.data);
         });
    }
}


protected function saveFilms(Films $request)
{       
 if ( $request->photo ) {
     $extension = $filmsObj->photo->getClientOriginalExtension(); 
            $request->photo = 'films_'.\Carbon\Carbon::now().'.'.$extension; // renaming image
            $request->photo->move($dir_path, $request->photo);                     
  }
}

Here in this code I get error in getClientOriginalExtension() method call. It says:

getClientOriginalExtension() method called on string.

Sunil · Accepted Answer · 2018-11-14 17:42:38Z

1

Finally I managed to solved the photo upload issue using VueJS and Laravel Api call.

<div class="form-group form-group-default float-left required">
    <label for="file">File</label>
    <input class="file-input" type="file" ref="file" name="file"  v-
    on:change="addFile($event)">        
</div>

data(){
    return{              
    films_info:
    {                       
       file: null,
     }
    }
 },
methods: {
    addFile(e){
        this.films_info.file = this.$refs.file.files[0];
    },
    saveFilms(){
        let formData = new FormData();
        formData.append('file', this.films_info.file);
        axios.post('/api/films/save_films',formData,{
                headers: {
                'Content-Type': 'multipart/form-data'
                }
                })
        .then(response => {
            location.reload(true);
         })
        .catch(error => {
            that.errors = error.response.data.errors;
            console.log("Error Here: "+error.response.data);
     });
}

}

$dir_path = 'uploads/films/images';
    $dir_path_resize = 'uploads/films/images/45x45';
    if( $request ){
        $filmsObj = new Film();
        if (!File::exists($dir_path))
        {
            File::makeDirectory($dir_path, 0775, true);
        }
        if (!File::exists($dir_path_resize))
        {
            File::makeDirectory($dir_path_resize, 0775, true);
        }
        if ( $request->file ) {
            $file  = $request->file;
            $extension = $file->getClientOriginalExtension(); // getting image extension
            $file_name = 'films_'.\Carbon\Carbon::now().'.'.$extension; // renaming image
            $file->move($dir_path, $file_name); // uploading file to given path

            // Start : Image Resize
            $image = Image::make(public_path($dir_path.'/'.$file_name));
            // resize the image to a height of 45 and constrain aspect ratio (auto width)
            $image->resize(null, 45, function ($constraint) {
                $constraint->aspectRatio();
            });
            $image->save(public_path($dir_path_resize.'/'.$file_name));
            // End : Image Resize
        }

edited Nov 14, 2018 at 17:42

Sunil

53 bronze badges

answered Nov 13, 2018 at 19:59

leaveme_alone

6862 gold badges8 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CanCoder Over a year ago

hello, Image::make not found is the error I am getting. how can l add the Image class?

CanCoder Over a year ago

Got it. I install Intervention/Image using 'composer require intervention/image'

Collectives™ on Stack Overflow

How to upload photo using Laravel RestApi and vuejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related