Upload image and show preview in angular || Angular || Angular Tutorial || Image Upload In Angular

[@djohnson-ku4cl]

Thank you great video! I had to make updates to make it work for TypeScript and all the types.. For the template code use:
For the typescript code use:
url: string|null|ArrayBuffer = './assets/banner1.jpg'
onFileSelected(files: FileList | null) {
if (files) {
var reader = new FileReader()
reader.readAsDataURL(files[0])
reader.onload = (event:Event) => {
let fileReader = event.target as FileReader
this.url = fileReader.result;
}
}
}

[@CreativeDeveloper]

Thanks for watching

[@daniloporto515]

Thanks for the video! HELPED ME A LOT IN MY STUDIES :) . For those using Angular 12 or 13 adjust onselectFile(event) use "any" onselectFile(event:any).

[@ahmedbahpullo8544]

thank you bro

[@weixiangng8279]

Thanks for the video. Help me a lot for the upload part.

[@utkarshgupta3209]

thank you so much sir, this video helped in saving my job

[@CreativeDeveloper]

My pleasure

[@NaveenMangoli]

Sir have to store this file to db in sql so what datatype have to choose in db

[@surajdhimaan9311]

thank you sir really you saved me dil se salaam

[@CreativeDeveloper]

Thanks for watching

[@vikasswamy3498]

sir want to know how to display an image after complete load of angular module /component .. after complete loading only it should display until then visibility is hidden

[@CreativeDeveloper]

Initially visibility hidden and inside ngafterviewinit you have to write visibility visible

[@AristeoPerez]

is it compatible with ionic/angular?

[@CreativeDeveloper]

I haven’t worked on iconic. Try this code and check it.

[@sebastianacosta4677]

You Are The Best.....

[@CreativeDeveloper]

Thanks

[@noelara4356]

Thank You SO Much, it has been easier than other ways I saw. I need this hehehe Thanks!

[@CreativeDeveloper]

Welcome.

[@santoshborgad9886]

Thank you so much sir , this video is very informative for me...

[@CreativeDeveloper]

You are welcome

[@utkarshgupta3209]

sir, if user selects a video then it should preview video and if user selects photo then it should preview photo, how to do it please help.

[@CreativeDeveloper]

You have to be show default image for video or any doc file.

[@MhmmDonuts]

Does it also show a preview when I try to upload a pdf file? I need to read the file and convert it into blob /base64 string to save it in db

[@CreativeDeveloper]

You can show default image or icon for pdf.

[@MhmmDonuts]

@@CreativeDeveloper perfect, nice video btw 👌

[@senthamarai_kannan.]

@@MhmmDonuts do you have any link to convert image to blob by post and get it from backend i am using angular and django

[@CreativeDeveloper]

@@MhmmDonuts Thanks for watching

[@archanabhowmick9787]

Great sir. It is helpful

[@CreativeDeveloper]

Thanks

[@Daniblueboy]

awesome, this really helped me

[@CreativeDeveloper]

My pleasure

[@anirudhabhowmik]

Excellent

[@suvendubiswal6820]

How can be saved in angular using ajax and laravel

[@CreativeDeveloper]

You have to understand the difference between client side and server side. Angular is fronted means client side. You can write download attribute to download image but if you want to download in specific folder then server side programming require.

[@nicenamenicesurname8365]

This is so good man thank you

[@CreativeDeveloper]

My pleasure

[@SusantaMuduli]

can you please tell how to upload image in local angular folder

[@CreativeDeveloper]

That you can’t do by fronted

[@thisworld6548]

thank you so much for making this video

[@CreativeDeveloper]

Thanks

[@geraldineacevedo1328]

Thanks!

[@georgeak4454]

niceee video Can u make one about multi step form with angular please ? it will be amazing

[@CreativeDeveloper]

Ok I will make a video on it

[@jlonso1840]

works good,

[@abthewebworld]

Please tell me how to send this uploaded image to other components. Please tell me. I am stucked at one point.

[@SanjayKumar-vd9gb]

I am also facing the same issue… my issue is:- I have attached a file in the parent component and I have to show the preview of that file in a dialog pop up while clicking on view button…….till now I have made the dialog box that works on clicking the view button but I am facing problem to call that attached file in the dialog box………please help me

[@CreativeDeveloper]

You have to pass the variable where I stored image data to other component

[@CreativeDeveloper]

@@SanjayKumar-vd9gb I have written html where image will display. You have to write that html file inside your popup

[@tamilselvan152]

How to get input field value like dis

[@CreativeDeveloper]

Input field value means?

[@MZ-uv3sr]

hmmm, it's hitting reader.onload but not updating the front end with the picture.

[@CreativeDeveloper]

Didn’t get your doubt

[@talalzeid7500]

I dont understand , where is the upload ? in which folder can i find it ?

[@CreativeDeveloper]

This is frontend part only.you can't find upload folder. This is for showing purpose to the user that which image is going to upload.

[@toan6375]

Thank you so much!!!

[@CreativeDeveloper]

My pleasure

[@CodeWithJamil786]

sir how to update image in angular please make video on it

[@CreativeDeveloper]

You have to write server side code means backend like node etc.

[@stensej6841]

Thx very much ! Like !

[@CreativeDeveloper]

Thanks for watching

[@NguyenHung-ye3cb]

it's so helpful

[@CreativeDeveloper]

Thanks for watching

[@raghavendrakesari337]

Thanks bro

[@CreativeDeveloper]

Welcome

[@pedromoreira1311]

Thank you sir.

[@CreativeDeveloper]

You are welcome

[@nothinganything7593]

Make like this video more

[@CreativeDeveloper]

Sure. Thanks for watching

[@ohmyfoodies2753]

Not getting preview

[@CreativeDeveloper]

You did anything wrong. Please check the video again

[@Pragya_Empower_Studies]

thanks a lot sir

[@CreativeDeveloper]

My pleasure

[@breakerk.7253]

thank you sir

[@CreativeDeveloper]

You are welcome

[@cricketloverz9026]

Sir we are waiting for new video please upload sir ❤️❤️❤️

[@CreativeDeveloper]

I upload video regularly. Please watch and thanks for watching this video

[@abbeygamekhel5884]

Helped

[@CreativeDeveloper]

My pleasure

[@aavsz]

thanks you!!!

[@CreativeDeveloper]

You are welcome

[@mrtrader3661]

where the image is uploaded?

[@CreativeDeveloper]

I lost my web site where I uploaded image.

[@ravindrachorge]

Thanks

[@CreativeDeveloper]

Welcome

[@jdmasoft]

thank u

[@CreativeDeveloper]

Welcome

[@CreativeDeveloper]

Welcome

[@kaloyanh.996]

The content is old and it doesn't work !

[@ahmedbahpullo8544]

thanks

[@CreativeDeveloper]

Welcome

[@Sully.....]

thank u

[@CreativeDeveloper]

You are welcome

[@usmanAli-hw5xu]

Thank you Sir