title: How to upload photo using Laravel RestApi and vuejs
body: <p>I'm working on a RestFulApi using Laravel and Vuejs, now want upload a photo using RestfulApi and vuejs. Here comes my sample code:</p>
  
  <pre><code>&lt;div class="form-group form-group-default float-left required"&gt;
  &lt;label for="photo"&gt;Photo&lt;/label&gt;
  &lt;input class="file-input" type="file" ref="photo" name="photo"  v-
      on:change="addFile($event)"&gt;        
  &lt;/div&gt;
  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-&gt;photo ) {
       $extension = $filmsObj-&gt;photo-&gt;getClientOriginalExtension(); 
              $request-&gt;photo = 'films_'.\Carbon\Carbon::now().'.'.$extension; // renaming image
              $request-&gt;photo-&gt;move($dir_path, $request-&gt;photo);                     
    }
  }
  </code></pre>
  
  <p>Here in this code I get error in getClientOriginalExtension() method call. It says:</p>
  
  <blockquote>
    <p>getClientOriginalExtension() method called on string. </p>
  </blockquote>