monstajamss

monstajamss

Member Since 2 Months Ago

Experience Points
1,790
Total
Experience

3,210 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
0
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
1,790 XP
Jun
01
1 day ago
Activity icon

Replied to "php Artisan Migrate" Gives Error

@codebullet i got this Doctrine/DBAL/Driver/PDOException with message 'could not find driver' how can i sent up laravel on my ubuntu desktop?

May
31
2 days ago
Activity icon

Started a new Conversation "php Artisan Migrate" Gives Error

I am trying to run php artisan migrate after installing xampp and laravel on my ubuntu 20.4 on my desktop and i get this error

   Illuminate\Database\QueryException 

  could not find driver (SQL: select * from information_schema.tables where table_schema = estate and table_name = migrations and table_type = 'BASE TABLE')

  at vendor/laravel/framework/src/Illuminate/Database/Connection.php:671
    667|         // If an exception occurs when attempting to run a query, we'll format the error
    668|         // message to include the bindings with SQL, which will make this exception a
    669|         // lot more helpful to the developer instead of just the database's errors.
    670|         catch (Exception $e) {
  > 671|             throw new QueryException(
    672|                 $query, $this->prepareBindings($bindings), $e
    673|             );
    674|         }
    675| 

      +36 vendor frames 
  37  artisan:37
      Illuminate\Foundation\Console\Kernel::handle()

Please what is the solution?

May
24
1 week ago
Activity icon

Replied to Upload MP3 On Laravel

@michaloravec it is still not storing inside database or the public path director, it is saying "Null" in the database

Activity icon

Replied to Upload MP3 On Laravel

already did this use Illuminate\Support\Str;

Activity icon

Replied to Upload MP3 On Laravel

@michaloravec i am getting Undefined type 'App\Http\Controllers\Auth\Str'.

Activity icon

Started a new Conversation Upload MP3 On Laravel

I am trying to save mp3 in my database and store it also in my public path directory My Controller

public function store(Request $request)
    {
        $user = auth('api')->user();
        $this->validate($request, 
        array( 
            'title' => 'sometimes|max:255', 
            'audio_path' => 'sometimes'
             )
    );

        $posts_music = new Single;
    
        $posts_music->title   = $request->title;
    
        if ($request->hasFile('audio_path')) {
            $music_file = $request->file('audio_path');
            $filename = $music_file->getClientOriginalExtension();
            $location = public_path('audio/' . $filename);
            $music_file->move($location,$filename);
    
            $posts_music->mp3 = $filename;
        }
    
        $posts_music->save();
    
        return [
            'Message' => "Success",
        ];
    }

It is not saving the audio path in the database, how can i solve this?

May
23
1 week ago
Activity icon

Started a new Conversation I Am Looking For A Way To Upload A Song And Get The Metadata Direct And Display It

I do not know if anyone understands this but i am currently working on a project that involves users uploading tracks in both MP3 and WAV Format.

But i want to know if there is a way when users upload song it would upload obviously and after doing that it would get the Metadata which include the song name, artist name, artwork etc.

What is the process behind this from the upload to getting the metadata.

May
18
2 weeks ago
Activity icon

Started a new Conversation How To Delete Old Picture After New One Uploaded

I have this in my Controller which handles image upload

public function updateProfileImage(Request $request)
    {
        $user = auth('api')->user();

        $image = $request->input('image'); // image base64 encoded
        preg_match("/data:image\/(.*?);/",$image,$image_extension); // extract the image extension
        $image = preg_replace('/data:image\/(.*?);base64,/','',$image); // remove the type part
        $image = str_replace(' ', '+', $image);
        $imageName = 'profile' . time() . '.' . $image_extension[1];
Storage::disk('public')->put($imageName,base64_decode($image));
$user->update($request->except('image') + [
            'profilePicture' => $imageName
        ]);

        return [
            //'Message' => "Success",
            'profilePhoto' => $user['profilePicture']
        ];

    }

How can i delete the old picture from the directory after new one has been uploaded.

Activity icon

Replied to Image Not Saving In Database In Laravel

@michaloravec how do you suggest i check if the image exists and unlink it instead of having many images uploaded on the storage (i.e replace the new image with the old one) without having to save several images.

Activity icon

Replied to Image Not Saving In Database In Laravel

@michaloravec oh wow that works, but how can i make it save inside public_path instead of Storage?

Activity icon

Replied to Image Not Saving In Database In Laravel

@michaloravec i have column profilePicture which is where the image should be saved in the database

Activity icon

Started a new Conversation Image Not Saving In Database In Laravel

I am trying to store image into database after it has been converted to base64 and also decoded. The image stores inside the Storage path but does not save into mysql database. What am i doing wrong?

public function updateProfileImage(Request $request)
    {
        $user = auth('api')->user();

        $image = $request->input('image'); // image base64 encoded
        preg_match("/data:image\/(.*?);/",$image,$image_extension); // extract the image extension
        $image = preg_replace('/data:image\/(.*?);base64,/','',$image); // remove the type part
        $image = str_replace(' ', '+', $image);
        $imageName = 'profile' . time() . '.' . $image_extension[1]; //generating unique file name;
        Storage::disk('public')->put($imageName,base64_decode($image));        
        $user->update($request->all());

}
Activity icon

Started a new Conversation Laravel And Vuejs Image Upload System

I have my image Upload Controller like this

public function updateProfile(Request $request)
    {
        $user = auth('api')->user();

        $this->validate($request,[
            'username' => 'required|string|max:255|unique:users,username,'.$user->id,
            'name' => 'max:255',
            'email' => 'required|string|email|max:255|unique:users,email,
            '.$user->id,
            'password' => 'sometimes|required|min:8'
        ]);

        $currentProfilePicture = $user->profilePicture;
         if($request->profilePicture != $currentProfilePicture){

            $name = time().'.' . explode('/', explode(':', substr($request->profilePicture, 0, strpos($request->profilePicture, ';')))[1])[1];

            Image::make($request->profilePicture)->save(public_path('img/profile/').$name);

            $request->merge(['profilePicture' => $name]);

           

            $userPhoto = public_path('img/profile/').$currentProfilePicture;
            if(file_exists($userPhoto)){

                @unlink($userPhoto);
            }

         }
       
        $user->update($request->all());

        return ['Message' => "Success"];
    }

I have my VueJs Form Like This

<form @submit.prevent="updateInfo">
<figure class="thumbnail thumbnail-rounded">
             <img class="main-profile" :src="getprofilepicture()" alt="">
 </figure>
 <div class="btn btn-primary">
           <input class="settings-file-upload" type="file" @change="updateProfilePic" accept="image/*">
            <div class="settings-file-icon">
                    <span class="material-icons">camera_alt</span>
                                                
                      Upload Profile Picture. (Note: Must Be Less Than 2MB)
              </div>
                                            
  </div>
<div class="form-group">
<input type="text" class="form-control" id="inputPassword4" v-model="form.name" @change="optionChange">
</div>

<div class="settings-form">
            <div class="form-group">
               <button class="btn btn-primary">Update Profile</button>
                 </div>
    </div>
</div>

My VueJs Script

<script>
export default {
     name: 'Settings',
    components: {
       //
    },
    data() {
        return{
            form: new Form ({
                id: '',
                username:'',
                email: '',
                password: '',
                name: '',
                bio: '',
                twitter_handle: '',
                facebook_handle: '',
                instagram_handle: '',
                profilePicture: ''
            })
        }
    },
    created(){
        axios.get("profile")
        .then(({ data })=>(this.form.fill(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.form.profilePicture) {
                    if (this.form.profilePicture.indexOf('base64') != -1) {
                        profilePicture = this.form.profilePicture;
                    } else {
                        profilePicture = 'http://localhost:8000/img/profile/' + this.form.profilePicture;
                    }
                    return profilePicture;
                }
                return profilePicture;
        },
        updateInfo(){
            this.$Progress.start();
            this.form.put('profile')
            .then(()=> {
                this.$Progress.finish();
                this.$router.go('/profile')
                
                
            })
            .catch(()=>{
                this.$Progress.fail()
            })
        },
        updateProfilePic(e){
            let file = e.target.files[0];
            //console.log(file);
            let reader = new FileReader();
            if(file['size'] < 2097152){
                reader.onloadend = () => {
                //console.log('RESULT', reader.result)
                this.form.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',
               })
            }
            
        }
    }
}
</script>

The problem is now that the picture upload works but anytime i want to update the input field with the upload field, the input field changes in the database while the image upload does not change at all. The image upload only works if i did not change the input field and i just update it. Also if i select an image to upload it shows (i.e it changes the image to the new one i want to update) but anytime i enter an input field and i move to enter another input field in the form, the image change back to the old picture.

This is really the problem

May
17
2 weeks ago
Activity icon

Replied to Trying To Upload An Image Using Laravel And Vuejs

@m7vm7v

public function updateProfile(Request $request)
    {
        $user = auth('api')->user();

        $this->validate($request,[
            'username' => 'required|string|max:255|unique:users,username,'.$user->id,
            'name' => 'max:255',
            'email' => 'required|string|email|max:255|unique:users,email,
            '.$user->id,
            'password' => 'sometimes|required|min:8'
        ]);

        $currentProfilePicture = $user->profilePicture;
         if($request->profilePicture != $currentProfilePicture){

            $name = time().'.' . explode('/', explode(':', substr($request->profilePicture, 0, strpos($request->profilePicture, ';')))[1])[1];

            Image::make($request->profilePicture)->save(public_path('img/profile/').$name);

            $request->merge(['profilePicture' => $name]);

            $userPhoto = public_path('img/profile/').$currentProfilePicture;
            if(file_exists($userPhoto)){

                @unlink($userPhoto);
            }

         }
       
        $user->update($request->all());
}
Activity icon

Started a new Conversation Trying To Upload An Image Using Laravel And Vuejs

I have my upload html form like this

<div class="album_single_data settings_data">
                                <div class="album_single_img">
                                    <figure class="thumbnail thumbnail-rounded">
                                        <img class="main-profile" :src="getprofilepicture()" alt="">
                                    </figure>
                                </div>
                                <div class="album_single_text">
                                    <div class="album_btn profile_image">
                                        <div class="btn btn-primary">
                                            <input class="settings-file-upload" type="file" @change="updateProfilePic" ref="file" accept="image/*">
                                            <div class="settings-file-icon">
                                                <span class="material-icons">camera_alt</span>
                                                
                                                Upload Profile Picture. (Note: Must Be Less Than 2MB)
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
<div class="form-group">
                                        <button @click="updateInfo" class="btn btn-primary">Update Profile</button>
                                    </div>

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

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 })=>(this.form.fill(data)))
        .then(()=>(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 > 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(()=> {
                this.$Progress.finish();
                this.$router.go('/profile')
                
                
            })
            .catch(()=>{
                this.$Progress.fail()
            })
        },
        updateProfilePic(e){
            let file = e.target.files[0];
            //console.log(file);
            let reader = new FileReader();
            if(file['size'] < 2097152){
                reader.onloadend = () => {
                //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'] < 2097152){
                reader.onloadend = () => {
                    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'
                })
            }
        }
    }
}
</script>

Anytime i click on the submit button i have this error message: "Undefined offset: 1", exception: "ErrorException",…} exception: "ErrorException"

and i really do not know the cause of this error.

May
15
2 weeks ago
Activity icon

Started a new Conversation Image Saving To Local Driver But Not Saving To Database

I have this in my controller to store background image

$currentBackgroundPicture = $user->backgroundPicture;
        if($request->backgroundPicture != $currentBackgroundPicture){
            $toske = time().'.' . explode('/', explode(':', substr($request->backgroundPicture, 0, strpos($request->backgroundPicture, ';')))[1])[1];
            Image::make($request->backgroundPicture)->save(public_path('img/profile/').$toske);
            $request->merge(['backgroundPicture' => $toske]);

            $backPhoto = public_path('img/profile/').$currentBackgroundPicture;
            if(file_exists($backPhoto)){
                @unlink($backPhoto);
            }
        }
$user->update($request->all());

If i should put the local store image name inside the database manually and i try to upload another image i get this error

    "message": "Unable to init from given binary data.",
    "exception": "Intervention\Image\Exception\NotReadableException",
    "file": "C:\MAMP\htdocs\Main Api\api\vendor\intervention\image\src\Intervention\Image\Gd\Decoder.php"

it is saving inside public path but it is not storing inside the database table

May
13
2 weeks ago
Activity icon

Replied to Passing Data From Child Component To Parent

@wingly the submit button is on the parent component, but when i click it the child form does not update in the database.

How can i ensure when i click the button everything is updated.

Activity icon

Replied to Passing Data From Child Component To Parent

Does anyone have idea?

May
12
3 weeks ago
Activity icon

Started a new Conversation Passing Data From Child Component To Parent

Parent looks like this

<form @submit.prevent="updateInfo">
                        <div class="album_single_data">
                            <div class="settings-page">
                                <div class="select-upload">
                                    <span>
                                        <div class="settings-page-icon">
                                            <span class="material-icons">camera_alt</span>
                                        </div>
                                        <p class="settings-p">Add a banner image</p>
                                        <p class="settings-p">Recommended image size is 1500x500, JPG or PNG</p>
                                        <div class="btn btn-primary">
                                            <input class="settings-file-upload" type="file" accept="image/*">
                                            <div class="settings-file-icon">
                                            <span class="material-icons settings-file-icon">camera_alt</span>
                                            Upload Banner
                                            </div>
                                        </div>
                                    </span>
                                </div>
                            </div>
                            <div class="album_single_data settings_data">
                                <div class="album_single_img">
                                    <figure class="thumbnail thumbnail-rounded">
                                        <img class="main-profile" :src='"http://localhost:8000/img/profile/"+this.form.profilePicture' alt="">
                                    </figure>
                                </div>
                                <div class="album_single_text">
                                    <div class="album_btn profile_image">
                                        <div class="btn btn-primary">
                                            <input class="settings-file-upload" type="file" @change="updateProfilePic" accept="image/*">
                                            <div class="settings-file-icon">
                                                <span class="material-icons">camera_alt</span>
                                                
                                                Upload Profile Picture. (Note: Must Be Less Than 2MB)
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            <nav class="navbar">
                                <div class="container">
                                    <ul class="lol" role="tablist">
                                        <li class="navbar-item">
                                            <router-link class="navbar-link" :to="{name: 'basic'}">Basic Information</router-link>
                                        </li>
                                        <li class="navbar-item">
                                            <router-link class="navbar-link" :to="{name: 'password'}">Password Update</router-link>
                                        </li>
                                        <li class="navbar-item">
                                            <router-link class="navbar-link" :to="{name: 'email'}">Email Update</router-link>
                                        </li>
                                        <li class="navbar-item">
                                            <a class="navbar-link" href="">Artist Url Update</a>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                            
                                
                                <router-view/>
                                
                                <div class="settings-form">
                                    <div class="form-group">
                                        <button @click.prevent="updateInfo" class="btn btn-primary">Update Profile</button>
                                    </div>
                                </div>    
                            <section class="move-top"></section>
                        </div>
                    </form>
<script>

 import axios from 'axios'
 import Vue from 'vue'
 import { Form, HasError, AlertError } from 'vform'

 Vue.component(HasError.name, HasError)
 Vue.component(AlertError.name, AlertError)

 import Swal from 'sweetalert2'
window.Swal = Swal;

window.Toast = Toast;
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  onOpen: (toast) => {
    toast.addEventListener('mouseenter', Swal.stopTimer)
    toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
})
export default {
     name: 'Settings',
    components: {
        //
    },
    data() {
        return{
            form: new Form ({
                id: '',
                username:'',
                email: '',
                password: '',
                name: '',
                bio: '',
                twitter_handle: '',
                facebook_handle: '',
                instagram_handle: '',
                profilePicture: ''
            })
        }
    },
    created(){
        axios.get("profile")
        .then(({ data })=>(this.form.fill(data)));
    },
    methods: {
        
        updateInfo(){
            this.$Progress.start();
            this.form.put('profile')
            .then(()=> {
            this.$Progress.finish();
            })
            .catch(()=>{
                this.$Progress.fail()
            })
        },
        updateProfilePic(e){
            let file = e.target.files[0];
            //console.log(file);
            let reader = new FileReader();
            if(file['size'] < 2097152){
                reader.onloadend = () => {
                //console.log('RESULT', reader.result)
                this.form.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',
               })
            }
            
        }
    }
   
}
</script>

Child Looks Like This

<template>
    <div class="settings-form">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputEmail4">Username</label>
                <input type="text" class="form-control" id="inputEmail4" v-model="form.username">
            </div>
            <div class="form-group col-md-6">
                <label for="inputPassword4">Full Name</label>
                <input type="text" class="form-control" id="inputPassword4" v-model="form.name">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6">
            <label for="inputAddress">Record Label</label>
            <input type="text" class="form-control" id="inputAddress">
            </div>
            <div class="form-group col-md-6">
            <label for="inputAddress2">Website</label>
            <input type="text" class="form-control" id="inputAddress2">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputAddress2">Biography</label>
                <textarea class="text-width" name="" id="" cols="30" rows="10" v-model="form.bio"></textarea>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="inputCity">Twitter Handle</label>
                <input type="text" class="form-control" v-model="form.twitter_handle">
            </div>
            <div class="form-group col-md-4">
                <label for="inputState">Facebook URL</label>
                <input type="text" class="form-control" v-model="form.facebook_handle">
            </div>
            <div class="form-group col-md-2">
                <label for="inputZip">Instagram Username</label>
                <input type="text" class="form-control" v-model="form.instagram_handle">
            </div>
            <div class="form-group col-md-2">
                <label for="inputZip">Youtube URL</label>
                <input type="text" class="form-control" id="inputZip">
            </div>
        </div>
        <div class="form-group">
            <select class="form-control" name="genre">
                <option value="">Choose a genre</option>
                <option value="H">Hip-Hop</option>
                <option value="A">Afro-Beat</option>
            </select>
        </div>
        
    </div>
</template>
<script>

 import axios from 'axios'
 import Vue from 'vue'
 import { Form, HasError, AlertError } from 'vform'

 Vue.component(HasError.name, HasError)
 Vue.component(AlertError.name, AlertError)

 import Swal from 'sweetalert2'
window.Swal = Swal;

window.Toast = Toast;
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  onOpen: (toast) => {
    toast.addEventListener('mouseenter', Swal.stopTimer)
    toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
})
export default {
    props: ['Form'],
     name: 'Settings',
    components: {
        //
    },
    data() {
        return{
            form: new Form ({
                id: '',
                username:'',
                email: '',
                password: '',
                name: '',
                bio: '',
                twitter_handle: '',
                facebook_handle: '',
                instagram_handle: '',
                profilePicture: ''
            })
        }
    },
    created(){
        axios.get("profile")
        .then(({ data })=>(this.form.fill(data)));
    },
    methods: {
        
        updateInfo(){
            this.$emit('profile')
        },
        updateProfilePic(e){
            let file = e.target.files[0];
            //console.log(file);
            let reader = new FileReader();
            if(file['size'] < 2097152){
                reader.onloadend = () => {
                //console.log('RESULT', reader.result)
                this.form.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',
               })
            }
            
        }
    }
}
</script>

When i click on submit the form does not update in the data base.

What am i doing wrong pease?

Activity icon

Replied to Avoid Page Refresh In Vuejs Navigation

@prasadchinwal5 i did this

{
    path: '/settings',
    name: 'settings',
    component: Settings,
    beforeEnter: (to, from, next) =>{
      if (!store.getters['auth/authenticated']) {
        return next({
          name: 'home'
        })
      }

      next()
    },
    children: [
      {
        path: 'password',
        name: 'password',
        component:  UpdatePassword
      },
      {
        path: 'basic',
        name:'basic',
        component: UpdateBasic
      }

But the pages are not changing to respective link.

This is how it looks in url localhost:8080/setttings/basic then localhost:8080/settings/password but it is not showing the contents in the password

Activity icon

Started a new Conversation Avoid Page Refresh In Vuejs Navigation

I have a profile page and in the profile page i have the profile pictures and details of the user but also i have navigation which leads to each pages where users can edit email and password.

i did

<router-link :to="{name: 'settings'}">Edit Email</router-link>
Which is to the email update page 

and

<router-link :to="{name: 'password'}">Edit Password</router-link>
which is to password update page

Anytime i move between this pages the profile image flicker and some information. How can i avoid this?

Activity icon

Replied to How To Set Base URL For Vuejs And Laravel

I did this

<img class="main-profile" :src='"http://localhost:8000/img/profile/"+this.form.profilePicture' alt="">

but i still get error.

The laravel project and vuejs project are in different directory. how can i solve the 404 Error 127.0.0.1/:1 GET http://127.0.0.1:8000/img/profile/ 404 (Not Found)

May
11
3 weeks ago
Activity icon

Started a new Conversation How To Set Base URL For Vuejs And Laravel

I have my laravel project and vuejs project in different folders.

Laravel url is : localhost:8000 Vuejs Url is: localhost:8080

So if i want to load images saved on the laravel project i need to include the laravel project url in my vuejs project like this

<img class="main-profile" :src="getProfilePhoto()" alt="">
methods: {
        getProfilePhoto(){
            return "http://localhost:8000/img/profile/"+ this.form.profilePicture;
        }

This above shows the image

But i get this error localhost/:1 GET http://localhost:8000/img/profile/ 404 (Not Found) in my chrome console

Activity icon

Started a new Conversation Trying To Get Image Name And Type And Base64 Format

Trying to get image name and type and trying to get the base64 format also but i keep getting this error Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."

<input class="settings-file-upload" type="file" @click="updateProfilePic" accept="image/*">
updateProfilePic(element){
            let file = element.target.files[0];
            console.log(file);
            let reader = new FileReader();
            reader.onloadend = function() {
                //console.log('RESULT', reader.result)
            }
            reader.readAsDataURL(file);
        }
Activity icon

Replied to Api Login Validation

i did this

loginUser(){
        this.$Progress.start();
        this.form.post('auth/signin')
        this.signIn(this.form) 
        .then(()=>{
          this.form.reset()
          window.$('#autoLogin').modal('hide')
          if(this.$route.path !=='/')
          this.$router.push('/')
          this.$Progress.finish();
        })

and it worked, does anyone know if this is a good way?

Activity icon

Started a new Conversation How To Check If Email Exists In Laravel Login

I want to check if the log in details i.e the email is in the database and echo error like "Email Does Not Exists" in the front-end.

$this->validate($request,[
            'email' => 'required',
            'password' => 'required',
        ]);

Above is my current validation.

How do i check if the email exists before logging them in.

Activity icon

Replied to Api Login Validation

what is wrong?

May
10
3 weeks ago
Activity icon

Replied to Api Login Validation

@bobbybouwmann it is not showing on the Vue App front end

<form @submit.prevent="submit">
              <div class="form-group">
                <input type="email" placeholder="Enter Your Email" class="form-control" :class="{ 'is-invalid': form.errors.has('email') }" v-model="form.email">
                <span class="form_icon">
                <i class="fa_icon form-envelope" aria-hidden="true"></i>
                </span>
                <has-error :form="form" field="email"></has-error>
              </div>
              <div class="form-group">
                <input type="password" placeholder="Enter Your Password" class="form-control" :class="{ 'is-invalid': form.errors.has('password') }" v-model="form.password">
                <span class="form_icon">
                <i class="fa_icon form-lock" aria-hidden="true"></i>
                </span>
                <has-error :form="form" field="password"></has-error>
              </div>
              <div class="form-group">
                <button :disabled="form.busy" class="reg_ms_btn" type="submit">Log In</button>
              </div>
            </form>

<script>
  
  import { mapActions } from 'vuex'

  import Vue from 'vue'
  import { Form, HasError, AlertError } from 'vform'

  Vue.component(HasError.name, HasError)
  Vue.component(AlertError.name, AlertError)

  export default {
    name: 'TheLog',
    components: {
      //
    },

    data () {
      return {
        form: new Form ({
          email: '',
          password: '',
          remember: false
        })
      }
    },

    methods: {
      ...mapActions({
        signIn: 'auth/signIn',
      }),

      submit () {
        this.signIn(this.form);
        window.$('#autoLogin').modal('hide')
      }
</script>
Activity icon

Replied to Api Login Validation

@bobbybouwmann got this error syntax error, unexpected '->' (T_OBJECT_OPERATOR), expecting ';'

After doing

if (!$token = auth()->attempt($request->only('email', 'password'))) {
            return response->json([], 401);
        }
Activity icon

Started a new Conversation Api Login Validation

I am trying to validate my API Login controller with Vuejs

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class SignInController extends Controller
{
    use AuthenticatesUsers;

    public function __invoke(Request $request)
    {
        $this->validate($request,[
            'email' => 'required',
            'password' => 'required'
        ]);

        if (!$token = auth()->attempt($request->only('email', 'password'))) {
            return response(null, 401);
        }

        return response()->json(compact('token'));
        
    }
}

But it does not work when i enter wrong details, it does not validate.

What am i doing wrong?

May
08
3 weeks ago
Activity icon

Started a new Conversation Could Not Find Driver (User Login)

I am trying to set my API and anytime i log in, i get this error

Illuminate\Database\QueryException: could not find driver (SQL: select * from `users` where `email` = [email protected] limit 1) in file C:\MAMP\htdocs\Main Api\api\vendor\laravel\framework\src\Illuminate\Database\Connection.php on line 669

I am using MAMP for my server and my database details is also correct.

Please help

May
06
3 weeks ago
Activity icon

Awarded Best Reply on Hide Modal Box After User Login

Solved it doing

window.$('#myModal1).modal('hide')
Activity icon

Replied to Hide Modal Box After User Login

Solved it doing

window.$('#myModal1).modal('hide')
May
04
4 weeks ago
Activity icon

Replied to Hide Modal Box After User Login

@piljac1 i am not using Typescript, do i need to add anything to the form i pasted above because i am still getting error.

May
03
4 weeks ago
Activity icon

Replied to Hide Modal Box After User Login

@rodrigo.pedra @piljac1 Now i am getting this error

[Vue warn]: Error in v-on handler: "TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).modal is not a function"

found in

---> <Home> at src/views/Home.vue
       <App> at src/App.vue
         <Root>
Activity icon

Replied to Hide Modal Box After User Login

@rodrigo.pedra i got this error 119:9 error '$' is not defined no-undef

May
02
1 month ago
Activity icon

Started a new Conversation Hide Modal Box After User Login

When user click log in button on my navigation a modal box pop up after user log in the modal box does not disappear.

How can i hide remove the modal box when users click log in

Home.vue

<div id="myModal1" class="modal  centered-modal" role="dialog">
      <div class="modal-dialog login_dialog">
        <div class="modal-content">
          <button type="button" class="close" data-dismiss="modal">
            <i class="fa_icon form_close"></i>
          </button>
          <div class="modal-body">
            <div class="ms_register_img">
              <img src="images/register_img.png" alt="" class="img-fluid" />
            </div>
            <div class="ms_register_form">
              <h2>Log In</h2>
              <form @submit.prevent="submit">
                <div class="form-group">
                  <input type="email" placeholder="Enter Your Email" class="form-control" v-model="form.email">
                  <span class="form_icon">
                  <i class="fa_icon form-envelope" aria-hidden="true"></i>
                  </span>
                </div>
                <div class="form-group">
                  <input type="password" placeholder="Enter Your Password" class="form-control" v-model="form.password">
                  <span class="form_icon">
                  <i class="fa_icon form-lock" aria-hidden="true"></i>
                  </span>
                </div>
                <div class="form-group">
                  <button class="reg_ms_btn" type="submit">Log In</button>
                </div>
              </form>   
              <div class="remember_checkbox">
                <label>Keep me signed in
                  <input type="checkbox">
                  <span class="checkmark"></span>
                </label>
              </div>
              
              <div class="popup_forgot">
                <a href="#">Forgot Password ?</a>
              </div>
              <p>Don't Have An Account? <a href="#myModal" data-toggle="modal" class="ms_modal1 hideCurrentModel">register here</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>

<script>
  import { mapActions } from 'vuex'
  export default {
    name: 'Home',
    components: {
      //
    },

    data () {
      return {
        form: {
          email: '',
          password: '',
        }
      }
    },

    methods: {
      ...mapActions({
        signIn: 'auth/signIn'
      }),

      submit () {
        this.signIn(this.form)
      }
    }
  }
</script>

TheNavigation.vue

<div class="topnav-right">
            <template v-if="authenticated">
                <div class="reg-btn">
                    <div class="dropdown">
                        <button class="btn btn-material dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="material-icons">account_circle</span>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <router-link :to="{name: 'profile'}" class="dropdown-item">
                                <i class="material-icons">account_circle</i>
                                {{ user.name }}
                            </router-link>
                            <router-link :to="{name: 'settings'}" class="dropdown-item">
                                <i class="material-icons">settings</i>
                                Settings
                            </router-link>
                        <a class="dropdown-item" href="#"><i class="material-icons">power_settings_new</i> Log Out</a>
                        <li class="divider" role="seprator"></li>
                        </div>
                    </div>
                </div>
                <div class="reg-btn">
                    <router-link :to="{name: 'upload'}"  type="button" class="btn btn-default btn-reg">
                        Upload
                    </router-link>
                </div>
            </template>
            <template v-else>
                <div class="login-btn">
                    <button type="button" class="btn btn-default btn-login" data-toggle="modal" data-target="#myModal1">Log in</button>
                </div>  
                <div class="reg-btn">
                    <button type="button" class="btn btn-default btn-reg" data-toggle="modal" data-target="#myModal">Sign Up</button>
                </div>
            </template>
		</div>

<script>
    import { mapGetters } from 'vuex'
    export default {
        computed: {
            ...mapGetters({
                authenticated: 'auth/authenticated',
                user: 'auth/user',
            })
        },
        
    }
</script>

Auth.js

actions: {
    async signIn ({ dispatch }, credentials) {
        let response = await axios.post('auth/signin', credentials)

        dispatch('attempt', response.data.token)
    },
Apr
13
1 month ago
Activity icon

Replied to Stuck At Getting Access Token Passport Oauth/token

@mrrobot21 where you able to solve this?

Activity icon

Started a new Conversation Laravel Passport "unsupported_grant_type"

I am trying to use laravel passpor api and vuejs but it is giving me this error unsupported_grant_type

Vue Js

<script>
	export default {
            data(){
                return {
                    email: '',
                    password: ''
                }
            },

            methods: {
                login () {
                    var data = {
                        client_id: 2,
                        client_secret: 'hVfzRp6CU1QcKcdwubwx3fpAvam8hEJbNrpfH8xp',
                        grant_type: 'password',
                        email: this.email,
                        password: this.password
                    }

                    this.$http.post("http://localhost:8000/oauth/token", data)
                        .then(response => {
                            console.log(response)
                        })

                    /*
                    .then(function (response) {
                        console.log(response)
                    })
                    */
                }
            }     
    }
</script>

I get this in postman

{
    "error": "unsupported_grant_type",
    "error_description": "The authorization grant type is not supported by the authorization server.",
    "hint": "Check that all required parameters have been provided",
    "message": "The authorization grant type is not supported by the authorization server."
}

in my console

Access to XMLHttpRequest at 'http://localhost:8000/oauth/token' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
vue-resource.esm.js?28dd:1082 POST http://localhost:8000/oauth/token net::ERR_FAILED

Could anyone tell me what i am doing wrong?

Activity icon

Started a new Conversation Problem With Image Display

On my home page i have some images but anytime i move to another page using <router-link to="upload" class="ms_btn upload">Upload</router-link> and i go back to home page using <router-link to="/" class="ms_btn upload">Upload</router-link>

The images on homepage gets bigger but when i reload browser the image gets normal back.

How can i solve this

Apr
11
1 month ago
Activity icon

Replied to Moving From A Page To Another In Php Using Ajax And Jquery

This worked <li onclick="$('.loaded').load('upload');">Upload</li>

But is it possible i use to display the url changed to or how do i do that?

Activity icon

Started a new Conversation Moving From A Page To Another In Php Using Ajax And Jquery

I have this my navigation bar and i would love to open the new pages without having to load the entire browser like default settings normally do.

How do i use ajax or jquery to do this

<ul class="pro_dropdown_menu">
    <li><a href="profile.html">Profile</a></li>
    <li><a href="manage_acc.html">Setting</a></li>
    <li><a class="mobile-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Log Out</a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST">
              @csrf
        </form>
    </li>
</ul>
Apr
10
1 month ago
Activity icon

Started a new Conversation Trying To Get Property 'name' Of Non-object

I am getting this error on my laravel project Trying to get property 'name' of non-object

This is my blade

@foreach($posts as $post)

<a href="{{ route('posts.show',$post->slug) }}" class="card single">

<span class="post-meta-information">

{{ $post->categories()->first()->name }}
</span

Please someone should help

Apr
01
2 months ago
Activity icon

Started a new Conversation Issue Getting (Call To Undefined Method App\Post::active() )

I am trying to generate a custom sitemap

Controller

public function index()
    {
        $post = Post::active()->orderBy('updated_at', 'desc')->first();
        $category = Category::active()->orderBy('updated_at', 'desc')->first();

        return response()->view('sitemap.index', [
            'post' => $post,
            'category' => $category,
        ])->header('Content-Type', 'text/xml');
    }

and i am getting this error Call to undefined method App\Post::active()

Please help

Mar
20
2 months ago
Activity icon

Replied to Trying To Paginate (Call To Undefined Method App\Post::links())

@tray2 getting this error Undefined property: Illuminate\Pagination\LengthAwarePaginator::$username

<h2>{{$user->username}}</h2>
<span>{{ $user->post()->count() }} items</span>

and also this $user = $user->post()->latest()->paginate(15); is getting the same post for page 2,3 etc

Activity icon

Started a new Conversation Trying To Paginate (Call To Undefined Method App\Post::links())

I am trying to do custom pagination but it does not work instead it gives error Controller

public function postindex(User $user)
    {
        $post=Post::where('user_id',$user->id)->latest()->get();
        $post = $user->post()->latest()->paginate(15);
        return view ('author.show', compact('post','user'));
    }

Blade

<?php echo $post->links('cpag.custom'); ?>

Then i get this errorCall to undefined method App\Post::links()

Mar
19
2 months ago
Activity icon

Replied to Display Carousel Only For The Homepage And Not Page 2,3,4 Etc

@amaury it works fine now

but you know if you visit next page on wordpress the url would be like this example.com/2 but in laravel it is like this example.com/?page=2 how can we make the pagination url clean like that of worpdress?