12. How to Upload and Display Image in Angular (Drag and Drop Images)

[@ninosalkaton4461]

Thanks for the best tutorial, I have a question:
How do get (display) these images in the user component?
I think we should write another method in spring to get images.

[@LearnProgrammingYourself]

Yes, correct

[@DavidMateusReis]

I'm facing this error: Type 'null' is not assignable to type 'FileHandle'.
@HostListener("drop", ["$event"])
public onDrop(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#eee";
let fileHandle: FileHandle = null;
const file = evt.dataTransfer.files[0];
const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
fileHandle = {file, url};
this.files.emit(fileHandle);
}
Solved:
let fileHandle: FileHandle;
const file: any = evt.dataTransfer?.files[0];
const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
fileHandle = { file, url };
this.files.emit(fileHandle);
}

[@LearnProgrammingYourself]

Thanks for providing solution.

[@JesudasJerome]

you can use like this: const file = evt.dataTransfer!.files[0];

[@pushpdev1902]

Thanks bruhhh🙏🏻🙏🏻

[@keimasterV]

Hello, i implemented the directive as you, but when I try to use it, the background doesn't change, do you have any idea what could happen?

[@LearnProgrammingYourself]

I think you can just check directive file line by line. Any small mistake will affect the functionality

[@SamiKhan_15]

Hi. I was facing the same issue as you. Make sure to check your code line by line. Afterwards, stop the execution by "ctrl+c" and serve it again.

[@Vikashkumar-gh1td]

how can we add custom icon while dragging that image.

[@LearnProgrammingYourself]

Will check and let you know.

[@dineshkumar-nk2me]

I am facing issue in drag. directive.spec.ts file
"An argument for 'sanitizer' was not provided "

[@LearnProgrammingYourself]

I might need to check the code to suggest you something.

[@sainadhparuchuri1928]

Bro next video please uplode user cart

[@LearnProgrammingYourself]

Yup sure. We will be learning this soon

[@yulinliu9223]

no git

[@LearnProgrammingYourself]

Please check last session in this playlist

[@AlessioDiGiacomo-s4r]

Why this error?
--> Argument of type 'Event' is not assignable to parameter of type 'FileHandle'.
Type 'Event' is missing the following properties from type 'FileHandle': file, url
---HTML---

Trascina e rilascia, oppure clicca su
"scegli file"
---TS---
fileDropped(fileHandle:FileHandle){
this.product.imageUrl.push(fileHandle)
}
---DIRECTIVE---
@Output()
files: EventEmitter = new EventEmitter();
@HostBinding("style.background") private background = "#eee"
constructor(private sanitizer: DomSanitizer){}
@HostListener("dragover",["$event"])
public onDragOver(evt: DragEvent){
evt.preventDefault();
evt.stopPropagation();
this.background = "#999";
}
@HostListener("dragleave",["$event"])
public onDragLeave(evt: DragEvent){
evt.preventDefault();
evt.stopPropagation();
this.background = "#eee";
}
@HostListener("drop",["$event"])
public onDrop(evt: DragEvent){
evt.preventDefault();
evt.stopPropagation();
this.background = "#eee";
let fileHandle:FileHandle;
const file = evt.dataTransfer!.files[0];
const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
fileHandle = {file, url};
this.files.emit(fileHandle)

[@LearnProgrammingYourself]

Need to check your entire code

[@botirovoybek]

Drag and drop your file or
browse a file


ts
----------------
fileDropped(fileHandle: Filehandle) {
this.product.productImages.push(fileHandle);
}
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
why two types of arguments?
not working

[@fabianodias806]

not working to me too.

[@LearnProgrammingYourself]

Just focus on code. there are lot of small things used in the code.
To answer your question.
1st fileDropped($event) ----> this function is used in directive file.
2nd fileDropped(fileHandle: FileHandle) ----> this function is used in ts file of the component.
we can define function with the same name in different files. So that is the case here. Don't get confused with the names. The name seems same, but they are completely different from each other.