Update Profile Picture Instantly After Uploading in Laravel and Vuejs

[@butcherfirewaters]

8:52 - how to bind this field, where was the name - girl-2.png , after uploading? Because when we are using CRUD with File upload - and after updateMethod, always leave the name of last File ?!

[@technicalcreations8489]

a quick fix which encounters in the console but it has no effect in front end getProfilePhoto(){ //default avatar pic if there is no photo of user let photo = "img/user.png"; //returns the current path of the if (this.form.photo) { if (this.form.photo.indexOf('base64') != -1) { photo = this.form.photo; } else { photo = 'storage/profiles/' + this.form.photo; } return photo; } return photo; }

[@pathros425]

Nice! Based on your code, mine is as follows: ------------------------------------------ getProfilePhoto(){ //default avatar pic if there is no photo of user if(this.form.photo){ return (this.form.photo.length > 200) ? this.form.photo : "storage/profiles/"+this.form.photo; }else{ if(this.form.sex === 'female'){ return "/img/defaultfemaleuser.png"; }else{ return "/img/defaultmaleuser.png"; } } },

[@technicalcreations8489]

i have little changes in code getProfilePhoto(){ //default avatar pic if there is no photo of user let photo = "img/user.png"; //returns the current path of the if (this.form.photo) { photo = (this.form.photo.indexOf('base64') != -1 ? this.form.photo : 'storage/profiles/'+ this.form.photo); return photo; } return photo;

[@harri4007]

nice one....thanks for that!

[@webdev2659]

@@technicalcreations8489 Thank you so much man you made my day! . You diverse thousands of likes

[@technicalcreations8489]

@@webdev2659 your welcome

[@pedro-j]

You said at the beginning of the video that we don't have to worry about the "127.0.0.1:8000/img/profile/ 404 (Not Found)" ... But what is the cause of that? How to solve it? You references about a video where you solve it, ... which video ??

[@ziikyii2463]

best tutorial videos and series ever... love everything about your work - github project for public

[@CodeInspire]

Yes, sure, that's next. I am recording the videos

[@elmantaghiyev8875]

Dear All I have a problem. Problem is "localhost:8000/img/profile/ 404 (Not Found)". Can not find a profile page in my browser when I refresh my profile page. How to fix this problem?? Please help me.

[@pianoboy1018]

Thank you sooooo much,these videos are very useful for me !!! About last issue, if "password" column is empty, there is different result of press the "update" button. I discover a part of your previous video was different , your updateInfo() function plus these code: if(this.form.password == ''){ this.form.password = undefined; } when I add these part into my updateInfo(),it's work!

[@CodeInspire]

Hi. yes, that works. Because that was my original project. Because it wasn't working for me, I added that. You can use it :)

[@pianoboy1018]

@@CodeInspire I see. Thank you very much!

[@pathros425]

One thing that comes to my mind is to create a loop to walk every input and check if each one is empty, if so, set it to 'undefined' ... something like that...

[@butcherfirewaters]

@@CodeInspire Do you solve problem with errors in 36 video ?

[@elinardosilva3812]

i man! please helpe. When i do login with user without picture i get this error "Error in render: "TypeError: Cannot read property 'length' of null" what's it?

[@CodeInspire]

oh yeah, You can use default image if user doesn't upload one. Write a condition to check if user has picture or not.

[@elinardosilva3812]

@@CodeInspire i try this. Now i go to default img in backend

[@PrabinPaudelComard]

can you make a tutorial on multiple insert of images with vue and laravel with API.

[@elinardosilva3812]

I friend. I'm fallower your videos, but using vue outsider of API laravel. I have a error when save profile without photo. Everytime is dublicate way of this imagem... Whats can i do? Pleaee helpee. Thanks

[@CodeInspire]

Hi man. You have to give the uploaded image a unique name when uploading. that way, it will not duplicate. it will create another image.

[@elinardosilva3812]

@@CodeInspire but where i define this? In my controller i'm using tour code to define name of image. Bit if i edit without a imagem iis generete a dublicate...

[@elinardosilva3812]

Hi my error is in $imageName = time().'.' . explode('/', explode(':', substr($image, 0, strpos($image, ';')))[1])[1]; It's necessary when use base64? I'm set name another way and resolve. Thanks

[@zkop1]

Hi. can u show how to test api in Postman?

[@butcherfirewaters]

Do you find the solution ? How to test in postman with Autorization?

[@ihabhamad8290]

thank you so much, but you can please show us how can using veux stores and mapGetters and mapSeters and also more complex code

[@CodeInspire]

YOu're very welcome :) Probably not now. Maybe in future videos if we need

[@devsdavid633]

Hi its easy to follow your tutorial, please make a video on building ecommerce web application with laravel and vue js or any application with laravel and vue

[@CodeInspire]

Coming soon :)

[@devsdavid633]

@@CodeInspire Thanks, please use Laravel as for backed

[@MohammedHassarov]

Hello brother, i think the best solution is to use event Fire.$emit('reloadProfileEvent'); and create a function loadProfile with a $on event like this we keep the code clean and easy to read :)

[@CodeInspire]

because, you can inform other components that something happened. with calling function, you have to do it everywhere. It's good when you use it between two components.

[@elpda-solutions]

Thank you so much again for this tutorial, Is there way to store data into two tables with 1 to 1 relationship, Let's say User and Profile

[@CodeInspire]

Very welcome. Yes it's. But, since every user need profile, we don't need to create another table for that. Do we ??

[@elpda-solutions]

Thank you, I managed to do it, The reason is I was avoiding having to put so many fields in one table.. One question I want to ask, is how to return data from both tables, i know how to do it in laravel blade but not sure with vuejs

[@CodeInspire]

It's the same in vuejs. Except, use dot " . " instead of "->" For example blade $user->posts Vuejs user.posts

[@elpda-solutions]

@@CodeInspire thanks!!

[@chrissfirstmoters]

Thank you so much, and i hope you doing well

[@tapaninboundwebhub9408]

Could you please explain how to change profile photo and all the information after form update? Keep inspiring!

[@CodeInspire]

hmm yeah. but it's nice if you give it a try :)

[@tapaninboundwebhub9408]

yes. works fine, Thanks ;)

[@loremipsum574]

Include also changing the profile photo in the navigation bar.

[@nsoimaru]

{{ Auth::user()->name }}

[@randyharsh3046]

but using $emit (last method) is not very productive, isnt it?

[@CodeInspire]

yeah true, but very usefull

[@adam192021]

The BEST as always!

[@CodeInspire]

thanks buddy :)

[@getwister]

Nice course! Could you teach how to customize the application? pls! Greetings from Brazil! 👍

[@CodeInspire]

Oh sure, I will :)

[@getwister]

@@CodeInspire Thank you very much! Keep up the good work!

[@dwiyudirayia3183]

Thanks !!

[@prantabhuiyan9676]

after the update we can also reload the data, it will also solve the problem :) calling $emit function

[@CodeInspire]

Yes, we do that also

[@ruipeng1624]

great tutor

[@engelbertvillar8747]

:src="this.form.photo" is working fine with me for real time profile update no need to use ternary :), ithink

[@rajasekhary7353]

Bro waiting for next video

[@CodeInspire]

Just uploaded :)

[@LucasCarvalhoO]

getProfilePhoto(){ if(this.form.photo != ""){ let photo = (this.form.photo.length > 200) ? this.form.photo : "/images/profile/"+ this.form.photo ; return photo; } return ""; }, This is better cause miss the error

[@ahmadawan3653]

Password Problem for some people is occur because you write the code but sir you forget to tell about that one thats why this problem face alot .... if password == "" than assign the undefine value the password i hope it will OK now THanks