{"id":98,"date":"2024-01-30T21:57:25","date_gmt":"2024-01-30T20:57:25","guid":{"rendered":"https:\/\/www.broggi.dev\/blog\/?p=98"},"modified":"2024-01-30T21:57:28","modified_gmt":"2024-01-30T20:57:28","slug":"clipboard-api-and-angular","status":"publish","type":"post","link":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/","title":{"rendered":"Clipboard API and Angular"},"content":{"rendered":"\n<p>In this article, I will show you how to display an image copied directly into your application using Ctrl+V.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Configuration in the Template<\/strong><\/h5>\n\n\n\n<p>In your template, you will create a div that listens to the (paste) event. This event will be triggered when the user performs a CTRL+V, and it defines an area in your application where users can paste content:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"height: 500px; width: 500px;\" (paste)=\"onPaste($event)\" >\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;img *ngIf=\"imageSrc\" &#91;src]=\"imageSrc\" alt=\"Pasted Image\">\n\n\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Processing Clipboard Data<\/strong><\/h5>\n\n\n\n<p>This will provide you with a ClipboardEvent, in which you can find everything that has been copied, be it text, an image, a PDF file, etc. Here, I will filter based on the MIME type of the file to ensure it is indeed an image. However, you can also paste other file types like a Word or PDF file directly into an &lt;input type=&#8221;file&#8221;>, for example, using Ctrl+V.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public onPaste(event: ClipboardEvent): void {\n\n\u00a0\u00a0\u00a0\u00a0const clipboardData = event.clipboardData;\n\n\u00a0\u00a0\u00a0\u00a0if (clipboardData) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const items = clipboardData.items;\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Check if there is at least one item and if the first item is an \u00a0 \u00a0 \u00a0 \u00a0 image\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (items.length > 0 &amp;&amp; items&#91;0].type.indexOf('image') !== -1) {\n\n\/\/ Attempt to retrieve the image file from the clipboard item\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const blob = items&#91;0].getAsFile();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (blob) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const reader = new FileReader();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0reader.onload = (event: ProgressEvent&lt;FileReader>) => {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event.target)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Setting the component's imageSrc property to the base64 data URL of the image\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.imageSrc = event.target.result as string;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0reader.readAsDataURL(blob);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}<\/code><\/pre>\n\n\n\n<p>\u00a0Remember to declare your imageSrc as public:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0public imageSrc = \"\";\n\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Global Listening on the Document<\/strong><\/h5>\n\n\n\n<p>You also have the option to set up global listening on the entire document, not just on a div, in this manner:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>constructor(@Inject(DOCUMENT) private document: Document) { }\n\n\u00a0\u00a0ngOnInit() {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.document.addEventListener('paste', this.onPaste.bind(this));\n\n\u00a0\u00a0}<\/code><\/pre>\n\n\n\n<p>This way, no matter where the focus is, you can retrieve the file.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, I will show you how to display an image copied directly into your application using Ctrl+V. Configuration in the Template In your template, you will create a div that listens to the (paste) event. This event will be triggered when the user performs a CTRL+V, and it defines an area in your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[25,57,36],"class_list":["post-98","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","tag-clipboard-api","tag-file-handling"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Clipboard API and Angular - Quentin Broggi&#039;s blog about Angular &amp; .Net<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Clipboard API and Angular - Quentin Broggi&#039;s blog about Angular &amp; .Net\" \/>\r\n<meta property=\"og:description\" content=\"In this article, I will show you how to display an image copied directly into your application using Ctrl+V. Configuration in the Template In your template, you will create a div that listens to the (paste) event. This event will be triggered when the user performs a CTRL+V, and it defines an area in your [&hellip;]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Quentin Broggi&#039;s blog about Angular &amp; .Net\" \/>\r\n<meta property=\"article:published_time\" content=\"2024-01-30T20:57:25+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2024-01-30T20:57:28+00:00\" \/>\r\n<meta name=\"author\" content=\"Broggi Quentin\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Broggi Quentin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/\"},\"author\":{\"name\":\"Broggi Quentin\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"headline\":\"Clipboard API and Angular\",\"datePublished\":\"2024-01-30T20:57:25+00:00\",\"dateModified\":\"2024-01-30T20:57:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/\"},\"wordCount\":188,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"keywords\":[\"Angular\",\"Clipboard API\",\"File Handling\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/\",\"url\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/\",\"name\":\"Clipboard API and Angular - Quentin Broggi&#039;s blog about Angular &amp; .Net\",\"isPartOf\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#website\"},\"datePublished\":\"2024-01-30T20:57:25+00:00\",\"dateModified\":\"2024-01-30T20:57:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.broggi.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Clipboard API and Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#website\",\"url\":\"https:\/\/www.broggi.dev\/blog\/\",\"name\":\"Broggi Quentin blog about Angular & .Net\",\"description\":\"Exploring Angular &amp; .NET Development\",\"publisher\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.broggi.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb\",\"name\":\"Broggi Quentin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg\",\"contentUrl\":\"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg\",\"width\":2560,\"height\":1828,\"caption\":\"Broggi Quentin\"},\"logo\":{\"@id\":\"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/\"},\"description\":\"I'm an independent .NET \/ Angular developer with a passion for creating dynamic and efficient solutions. With years of experience under my belt, I've had the opportunity to work on diverse projects, always aiming to bridge the gap between technology and user needs. If you're interested in collaborating or just want to connect, feel free to reach out to me on LinkedIn: https:\/\/www.linkedin.com\/in\/quentin-broggi\/. I'm always open to new opportunities and discussions!\",\"sameAs\":[\"https:\/\/www.broggisoft.com\/blog\",\"https:\/\/www.linkedin.com\/in\/quentin-broggi\/\"],\"url\":\"https:\/\/www.broggi.dev\/blog\/index.php\/author\/adminblog\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Clipboard API and Angular - Quentin Broggi&#039;s blog about Angular &amp; .Net","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/","og_locale":"en_US","og_type":"article","og_title":"Clipboard API and Angular - Quentin Broggi&#039;s blog about Angular &amp; .Net","og_description":"In this article, I will show you how to display an image copied directly into your application using Ctrl+V. Configuration in the Template In your template, you will create a div that listens to the (paste) event. This event will be triggered when the user performs a CTRL+V, and it defines an area in your [&hellip;]","og_url":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/","og_site_name":"Quentin Broggi&#039;s blog about Angular &amp; .Net","article_published_time":"2024-01-30T20:57:25+00:00","article_modified_time":"2024-01-30T20:57:28+00:00","author":"Broggi Quentin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Broggi Quentin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#article","isPartOf":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/"},"author":{"name":"Broggi Quentin","@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"headline":"Clipboard API and Angular","datePublished":"2024-01-30T20:57:25+00:00","dateModified":"2024-01-30T20:57:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/"},"wordCount":188,"commentCount":0,"publisher":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"keywords":["Angular","Clipboard API","File Handling"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/","url":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/","name":"Clipboard API and Angular - Quentin Broggi&#039;s blog about Angular &amp; .Net","isPartOf":{"@id":"https:\/\/www.broggi.dev\/blog\/#website"},"datePublished":"2024-01-30T20:57:25+00:00","dateModified":"2024-01-30T20:57:28+00:00","breadcrumb":{"@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.broggi.dev\/blog\/index.php\/2024\/01\/30\/clipboard-api-and-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.broggi.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Clipboard API and Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.broggi.dev\/blog\/#website","url":"https:\/\/www.broggi.dev\/blog\/","name":"Broggi Quentin blog about Angular & .Net","description":"Exploring Angular &amp; .NET Development","publisher":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.broggi.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/720a0c86dcf121f7d788f878e2d6c4bb","name":"Broggi Quentin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg","contentUrl":"https:\/\/www.broggi.dev\/blog\/wp-content\/uploads\/2023\/09\/ultralight_photo2-1-scaled.jpg","width":2560,"height":1828,"caption":"Broggi Quentin"},"logo":{"@id":"https:\/\/www.broggi.dev\/blog\/#\/schema\/person\/image\/"},"description":"I'm an independent .NET \/ Angular developer with a passion for creating dynamic and efficient solutions. With years of experience under my belt, I've had the opportunity to work on diverse projects, always aiming to bridge the gap between technology and user needs. If you're interested in collaborating or just want to connect, feel free to reach out to me on LinkedIn: https:\/\/www.linkedin.com\/in\/quentin-broggi\/. I'm always open to new opportunities and discussions!","sameAs":["https:\/\/www.broggisoft.com\/blog","https:\/\/www.linkedin.com\/in\/quentin-broggi\/"],"url":"https:\/\/www.broggi.dev\/blog\/index.php\/author\/adminblog\/"}]}},"_links":{"self":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":1,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/98\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/posts\/98\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.broggi.dev\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}