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

How to upload and display images in angular with drag and drop area. In this session, we will learn how drag and drop events works in angular.

In this session, I have discussed following points.
1. How to upload and display images in angular with drag and drop area.

---------- Other related videos. ----------

Disclaimer - The music/audio used(if any) in this video is not a property of "Learn Programming Yourself". All credit goes to owners of respective music/audio. This music/audio is not prone to any "Copyright Strikes".

#programming #coding #technology #learning

---------- Links to my other FREE courses. ----------

[ninosalkaton]

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.

[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 =

fileHandle = {file, url};
this.files.emit(fileHandle);
}

Solved:

let fileHandle: FileHandle;

const file: any = evt.dataTransfer?.files[0];
const url =

fileHandle = { file, url };
this.files.emit(fileHandle);
}

[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?

[Vikashkumar-ghtd]

how can we add custom icon while dragging that image.

[sainadhparuchuri]

Bro next video please uplode user cart

[nryuskk]

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---
<div class="dropzone"
appDrag

<div class="text-wrapper">
<div class="centered">
Trascina e rilascia, oppure clicca su
<a (click)="selectFile.click()" file"</a>
</div>
</div>
</div>

---TS---


}

---DIRECTIVE---

@Output()
files: EventEmitter<FileHandle> = new EventEmitter();

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 =

fileHandle = {file, url};
this.files.emit(fileHandle)

[dineshkumar-nkme]

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

[botirovoybek]

<div class="dropzone" appDrag
<div class="text-wrapper">
<div class="centered">
Drag and drop your file or
<a class="browse-button" a file
</div>

</div>
</div>



ts

fileDropped(fileHandle: Filehandle) {

}



why two types of arguments?
not working