Add image-paste demo for Angular 7.2.15.

Author: bennadel

README.md

@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Pasting Images Into Your App Using File Blobs And URL.createObjectURL() In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/pasting-images-angular7/)
 * [Creating An Inline Auto-Complete Directive Using NgModel And A Control Value Accessor In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/inline-auto-complete-input-angular7/)
 * [Desktop Safari Seems To Add Extra Padding To CSS Flexbox Item Inside List Item](https://bennadel.github.io/JavaScript-Demos/demos/safari-li-flexbox-wonky/)
 * [Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/center-ellipsis-angular7/)

demos/pasting-images-angular7/.gitignore

@@ -0,0 +1,4 @@
+
+# Now that we're using Webpack, we can install modules locally and just ignore 
+# them since the assets are baked into the compiled modules.
+node_modules/

demos/pasting-images-angular7/app/app.component.less

@@ -0,0 +1,31 @@
+
+:host {
+	display: block ;
+	font-size: 18px ;
+}
+
+.sample-images {
+	align-items: flex-start ;
+	display: flex ;
+	flex-wrap: wrap ;
+}
+
+.sample-image {
+	border-bottom: 1px solid #bababa ;
+	border-radius: 5px 5px 5px 5px ;
+	box-shadow: 0px 1px 3px rgba( 0, 0, 0, 0.2 ) ;
+	flex: 0 0 auto ;
+	margin: 0px 20px 20px 0px ;
+	width: 200px ;
+}
+
+.images {}
+
+.image {
+	border-bottom: 1px solid #bababa ;
+	border-radius: 5px 5px 5px 5px ;
+	box-shadow: 0px 1px 3px rgba( 0, 0, 0, 0.2 ) ;
+	display: block ;
+	margin: 20px 0px 20px 0px ;
+	width: 500px;
+}

demos/pasting-images-angular7/app/app.component.ts

@@ -0,0 +1,137 @@
+
+// Import the core angular services.
+import { Component } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { SafeUrl } from "@angular/platform-browser";
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+@Component({
+	selector: "my-app",
+	host: {
+		"(window:paste)": "handlePaste( $event )"
+	},
+	styleUrls: [ "./app.component.less" ],
+	template:
+	`
+		<h2>
+			Sample Images (That You Can Right-Click And Copy)
+		</h2>
+
+		<p class="sample-images">
+			<img src="./img/image-1.jpg" class="sample-image" />
+			<img src="./img/image-2.jpg" class="sample-image" />
+			<img src="./img/image-3.png" class="sample-image" />
+			<img src="./img/image-4.jpg" class="sample-image" />
+			<img src="./img/image-5.jpg" class="sample-image" />
+		</p>
+
+		<h2>
+			Pasted Images
+		</h2>
+
+		<p class="images">
+			<ng-template ngFor let-imageUrl [ngForOf]="imageUrls">
+
+				<img [src]="imageUrl" class="image" />
+
+			</ng-template>
+		</p>
+	`
+})
+export class AppComponent {
+
+	public imageUrls: SafeUrl[];
+
+	private lastObjectUrl: string;
+	private sanitizer: DomSanitizer;
+
+	// I initialize the app component.
+	constructor( sanitizer: DomSanitizer ) {
+
+		this.sanitizer = sanitizer;
+
+		this.imageUrls = [];
+		this.lastObjectUrl = "";
+
+	}
+
+	// ---
+	// PUBLIC METHODS.
+	// ---
+
+	// I handle the paste event on the Window (see host bindings).
+	public handlePaste( event: ClipboardEvent ) : void {
+
+		var pastedImage = this.getPastedImage( event );
+
+		if ( ! pastedImage ) {
+
+			return;
+
+		}
+
+		// When we create Object URLs, the browser will keep them in memory until the
+		// document is unloaded or until the URL is explicitly released. Since we are
+		// going to create a new URL every time the user pastes an image into the app (in
+		// this particular demo), we need to be sure to release the previous Object URL
+		// before we create the new one.
+		// --
+		// NOTE: One the Image is rendered in the DOM, releasing the Object URL will not
+		// affect the rendering.
+		if ( this.lastObjectUrl ) {
+
+			URL.revokeObjectURL( this.lastObjectUrl );
+
+		}
+
+		// At this point, the "pastedImage" is a File object, which is a specialized type
+		// of "Blob". We can now generate a "blob:" URL using the given File.
+		this.lastObjectUrl = URL.createObjectURL( pastedImage );
+
+		// By default, Angular WILL NOT TRUST this "blob:" style URLs. However, since we
+		// know these are going to be expected, we can use the DOM Sanitizer to bypass
+		// the security checks on these images.
+		// --
+		// NOTE: The sanitizer doesn't return Strings - it returns SafeUrls. 
+		this.imageUrls.unshift(
+			this.sanitizer.bypassSecurityTrustUrl( this.lastObjectUrl )
+		);
+
+	}
+
+	// ---
+	// PRIVATE METHODS.
+	// ---
+
+	// I return the first Image File from the given paste event (or null).
+	private getPastedImage( event: ClipboardEvent ) : File | null {
+
+		// NOTE: I am not very familiar with the Paste Event. As such, I am probably
+		// being more cautious here than I need to be. However, in an abundance of
+		// caution, I am checking each part of the targeted object path.
+		if (
+			event.clipboardData && 
+			event.clipboardData.files && 
+			event.clipboardData.files.length &&
+			this.isImageFile( event.clipboardData.files[ 0 ] )
+			) {
+
+			return( event.clipboardData.files[ 0 ] );
+
+		}
+
+		return( null );
+
+	}
+
+
+	// I determine if the given File is an Image (according do its Mime-Type).
+	private isImageFile( file: File ) : boolean {
+
+		return( file.type.search( /^image\//i ) === 0 );
+
+	}
+
+}

demos/pasting-images-angular7/app/app.module.ts

@@ -0,0 +1,25 @@
+
+// Import the core angular services.
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+
+// Import the application components and services.
+import { AppComponent } from "./app.component";
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+@NgModule({
+	imports: [
+		BrowserModule
+	],
+	declarations: [
+		AppComponent
+	],
+	bootstrap: [
+		AppComponent
+	]
+})
+export class AppModule {
+	// ...
+}

demos/pasting-images-angular7/app/main.htm

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+
+	<title>
+		Pasting Images Into Your App Using File Blobs And URL.createObjectURL() In Angular 7.2.15
+	</title>
+</head>
+<body>
+
+	<h1>
+		Pasting Images Into Your App Using File Blobs And URL.createObjectURL() In Angular 7.2.15
+	</h1>
+
+	<my-app>
+		<p>
+			<em>Loading files...</em>
+		</p>
+
+		<p>
+			npm Run Scripts:
+		</p>
+
+		<ul>
+			<li>
+				<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
+			</li>
+			<li>
+				<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
+			</li>
+		</ul>
+	</my-app>
+
+</body>
+</html>

demos/pasting-images-angular7/app/main.polyfill.ts

@@ -0,0 +1,4 @@
+
+// Import these libraries for their side-effects.
+import "core-js/es";
+import "zone.js/dist/zone.js";

demos/pasting-images-angular7/app/main.ts

@@ -0,0 +1,20 @@
+
+// Import the core angular services.
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+
+// Import the root module for bootstrapping.
+import { AppModule } from "./app.module";
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+// NOTE: This ENV value is being provided by Webpack's DefinePlugin. It is populated
+// on the mode in which the webpack-cli was invoked.
+if ( process.env.NODE_ENV === "production" ) {
+
+	enableProdMode();
+
+}
+
+platformBrowserDynamic().bootstrapModule( AppModule );