title: Trying to upload an image using laravel and vuejs
body: <p>I have my upload html form like this</p>
  
  <pre><code>&lt;div class="album_single_data settings_data"&gt;
                                  &lt;div class="album_single_img"&gt;
                                      &lt;figure class="thumbnail thumbnail-rounded"&gt;
                                          &lt;img class="main-profile" :src="getprofilepicture()" alt=""&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
                                  &lt;div class="album_single_text"&gt;
                                      &lt;div class="album_btn profile_image"&gt;
                                          &lt;div class="btn btn-primary"&gt;
                                              &lt;input class="settings-file-upload" type="file" @change="updateProfilePic" ref="file" accept="image/*"&gt;
                                              &lt;div class="settings-file-icon"&gt;
                                                  &lt;span class="material-icons"&gt;camera_alt&lt;/span&gt;
  
                                                  Upload Profile Picture. (Note: Must Be Less Than 2MB)
                                              &lt;/div&gt;
  
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
  &lt;div class="form-group"&gt;
                                          &lt;button @click="updateInfo" class="btn btn-primary"&gt;Update Profile&lt;/button&gt;
                                      &lt;/div&gt;
  </code></pre>
  
  <p>This is the vuejs code that handles the form submit/upload method which means anytime i click on the upload button the image uploads. but the problem is that it does not submit</p>
  
  <pre><code>export default {
       name: 'Settings',
      components: {
         //
      },
      data() {
          return{
              form: new Form ({
                  id: '',
                  username:'',
                  email: '',
                  password: '',
                  name: '',
                  bio: '',
                  twitter_handle: '',
                  facebook_handle: '',
                  instagram_handle: '',
                  backgroundPicture: ''
              }),
              pic: ({
                  profilePicture: '',
              })
          }
      },
      created(){
          axios.get("profile")
          .then(({ data })=&gt;(this.form.fill(data)))
          .then(()=&gt;(this.pic.data))
          ;
      },
      methods: {
          getprofilepicture()
          {
                //default avatar pic if there is no photo of user
                  let profilePicture = "http://localhost:8000/img/profile/user.png";
                  //returns the current path of the
                  if (this.pic.profilePicture) {
                      if (this.pic.profilePicture.indexOf('base64') != -1) {
                          profilePicture = this.pic.profilePicture;
                      } else {
                          profilePicture = 'http://localhost:8000/img/profile/' + this.pic.profilePicture;
                      }
                      return profilePicture;
                  }
                  return profilePicture;
              //let profilePicture = (this.form.profilePicture.length &gt; 200) ? this.form.profilePicture : "http://localhost:8000/img/profile/"+ this.form.profilePicture ;
              //return profilePicture;
          },
          // getBackgroundPic(){
          //     let backgroundPicture = "http://localhost:8000/img/profile/background.jpg";
  
          //     if(this.form.backgroundPicture){
          //         if(this.form.backgroundPicture.indexOf('base64') != -1){
          //         backgroundPicture = this.form.backgroundPicture;
          //     }else {
          //         backgroundPicture = 'http://localhost:8000/img/profile/'+ this.form.backgroundPicture;
          //     }
          //     return backgroundPicture;
          //     }
          //     return backgroundPicture;
          // },
          updateInfo(){
              this.$Progress.start();
              this.form.put('profile')
              .then(()=&gt; {
                  this.$Progress.finish();
                  this.$router.go('/profile')
  
  
              })
              .catch(()=&gt;{
                  this.$Progress.fail()
              })
          },
          updateProfilePic(e){
              let file = e.target.files[0];
              //console.log(file);
              let reader = new FileReader();
              if(file['size'] &lt; 2097152){
                  reader.onloadend = () =&gt; {
                  //console.log('RESULT', reader.result)
                  this.pic.profilePicture = reader.result;
                  }
                  reader.readAsDataURL(file);
              }else{
                 Toast.fire({
                     icon: 'error',
                     title: 'Ooops...',
                     text: 'The file you are trying to upload is more than 2MB',
                 })
              }
  
          },
          updateBackgroundPic(e){
              let file = e.target.files[0];
              //console.log(file);
              let reader = new FileReader();
              if(file['size'] &lt; 2097152){
                  reader.onloadend = () =&gt; {
                      this.form.backgroundPicture = reader.result;
                  }
                  reader.readAsDataURL(file);
              }else{
                  Toast.fire({
                      icon: 'error',
                      title: 'Ooops...',
                      text: 'The file you are trying to upload is more than 2MB'
                  })
              }
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Anytime i click on the submit button i have this error <code>message: "Undefined offset: 1", exception: "ErrorException",…}
  exception: "ErrorException"</code></p>
  
  <p>and i really do not know the cause of this error.</p>
  
  <p>Below is the PHP Code that handles the server side part of the upload</p>
  
  <pre><code>public function updateProfile(Request $request)
      {
          $user = auth('api')-&gt;user();
  
          $this-&gt;validate($request,[
              'username' =&gt; 'required|string|max:255|unique:users,username,'.$user-&gt;id,
              'name' =&gt; 'max:255',
              'email' =&gt; 'required|string|email|max:255|unique:users,email,
              '.$user-&gt;id,
              'password' =&gt; 'sometimes|required|min:8'
          ]);
  
          $currentProfilePicture = $user-&gt;profilePicture;
           if($request-&gt;profilePicture != $currentProfilePicture){
  
              $name = time().'.' . explode('/', explode(':', substr($request-&gt;profilePicture, 0, strpos($request-&gt;profilePicture, ';')))[1])[1];
  
              Image::make($request-&gt;profilePicture)-&gt;save(public_path('img/profile/').$name);
  
              $request-&gt;merge(['profilePicture' =&gt; $name]);
  
              $userPhoto = public_path('img/profile/').$currentProfilePicture;
              if(file_exists($userPhoto)){
  
                  @unlink($userPhoto);
              }
  
           }
  
          $user-&gt;update($request-&gt;all());
  }
  </code></pre>