{"id":6632,"date":"2018-09-12T14:41:14","date_gmt":"2018-09-12T12:41:14","guid":{"rendered":"https:\/\/anexia.com\/stagingblog\/?p=6632"},"modified":"2022-04-21T12:49:02","modified_gmt":"2022-04-21T10:49:02","slug":"trainee-howto-upload-images-from-clipboard","status":"publish","type":"post","link":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/","title":{"rendered":"Trainee-Howto: Upload images from clipboard"},"content":{"rendered":"

Now I am already over 1 year in the apprenticeship as a software developer at Anexia. When I started here in March 2017, I could just create a simple page with HTML and CSS<\/a> and I knew what Swift and Java was. Since that time I have been able to gain a lot of know-how. But most of all I use Javascript and PHP<\/a>.<\/p>\n

Recently, however, I encountered a small problem. I should make a small change on the already existing Link-Shortener of Anexia, anx.io. This page is not only used to shorten a long link, you can also upload pictures from your PC to which a link is displayed after clicking on the upload button. If you use this link, the image you used will be displayed.<\/p>\n

I got the task that the user can use the function to simply insert an image from his clipboard with „stgr+v“ or an image via drag&drop. To accomplish this, ZeroClipboard was used earlier, but for me this was out of the question, because I wanted to use a pure Javascript solution.<\/p>\n

Here I present you a small project<\/a> with the source code to try it out for yourself.<\/p>\n

 <\/p>\n

Clipboard<\/h2>\n

For my solution, jQuery is included first, I just do that in the header:<\/p>\n

<script src=\"https:\/\/code.jquery.com\/jquery-latest.min.js\"<\/script><\/pre>\n
To send the later uploaded picture with a post-request I first create a form tag and underneath a submit button to send it.<\/p>\n
<form action=\"\/upload.php\" method=\"POST\">\r\n    <button type=\"submit\" id=\"upload\">Upload<\/button>\r\n<\/form>\r\n<\/pre>\n
Next I create an input field, which I set to hidden.<\/p>\n
<input type=\"hidden\" id=\"base64_file_form\"\/><\/pre>\n
The type is intentionally set to „hidden“ and an eventlistener is placed on the page that listens to the key combination „ctrl+v“ (‚paste‘). The image will be converted to base64 and saved to the input field.<\/p>\n
document.getElementById(\"base64_file_form\").value = evt.target.result;\r\ndocument.getElementById(\"base64_file_form\").setAttribute('name', 'base64_file');<\/pre>\n
Base64 is a method for encoding 8-bit binary data (e.g. executable files or images) into a character string consisting only of ASCII characters. So you can e.g. send the image as a Post Request and save it in your database.<\/p>\n
Then I insert a div into my HTML file, in which the user can see the image he has inserted immediately for verification. That’s why I give the div a certain size so that we can see the picture afterwards.<\/p>\n
<div id=\"picture\"><\/div>\r\n\r\n<style>\r\n   #picture {\r\n      background-size: contain;\r\n      background-repeat: no-repeat;\r\n      max-height: 150px;\r\n   }\r\n<\/style><\/pre>\n
On this div the base64 string is set as background image in the script.<\/p>\n
document.getElementById(\"picture\").style.backgroundImage = \"url('\"+evt.target.result+\"')\";<\/pre>\n
 <\/p>\n
Drag & Drop<\/h2>\n
For the Drag & Drop function I create a div, which I call the „dropzone“, because an image is drawn into this area. Also this one gets a certain width and a certain height and I give the div a dotted border, so the drop zone in which the image is drawn is clearer.<\/p>\n
<div id=\"dropzone\">\r\n    <input type=\"hidden\" id=\"dropy\"\/>\r\n<\/div>\r\n\r\n<style>\r\n#dropzone {\r\n     width: 200px;\r\n     height: 100px;\r\n     border: 1px dashed #000000;\r\n}\r\n<\/style><\/pre>\n
In the dropzone I nested an input field, in which the base64 string is written as above. So you can also fire a Post Request here.<\/p>\n
window.addEventListener(\"load\", function() {\r\n  $(\"#dropzone\")\r\n    .bind(\"dragover\", function(e) {\r\n      $(this).addClass(\"dragover\");\r\n      return false;\r\n    })\r\n    .bind(\"dragleave\", function(e) {\r\n      $(this).removeClass(\"dragover\");\r\n      e.stopPropagation();\r\n      e.preventDefault();\r\n      return false;\r\n    })\r\n    .bind(\"drop\", function(e) {\r\n      $(this).removeClass(\"dragover\");\r\n      e.stopPropagation();\r\n      e.preventDefault();\r\n      readImages(e);\r\n      return false;\r\n    });\r\n\r\n  $(document.body)\r\n    .bind(\"dragover\", function(e) {\r\n      return false;\r\n    })\r\n    .bind(\"drop\", function(e) {\r\n      e.stopPropagation();\r\n      e.preventDefault();\r\n      return false;\r\n    });\r\n});\r\n<\/pre>\n
It is important to set an event listener to this function as well. This is how the function is called when an image is dragged in.<\/p>\n
Again the background of the id=“picture“ is set for control.<\/p>\n
function readImage(file, event) {\r\n  document.getElementById(\"dropy\").value = event.target.result;\r\n  document.getElementById(\"base64_image\").style.backgroundImage = \"url('\"+event.target.result+\"')\";\r\n  document.getElementById(\"dropzone\").setAttribute('name', 'base64_file');\r\n}\r\n\r\nfunction readImages(event) {\r\n  var files = event.originalEvent.dataTransfer.files;\r\n  $.each( files, function(index, file){\r\n    var fileReader = new FileReader();\r\n    fileReader.onload = (function(file) {\r\n      return readImage(file, event);\r\n    }\r\n  })(file);\r\n  fileReader.readAsDataURL(file);\r\n  return found = true;\r\n  });\r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n
Tip<\/h2>\n
It is important to note that a user cannot upload code or other files, these could contain unwanted code and cause damage to the application.<\/p>\n
A secure upload for images can look like this:<\/p>\n
\/\/checking the file extension\r\n$allowed_extensions = array('png', 'jpg', 'jpeg', 'gif');\r\nif(!in_array($extension, $allowed_extensions)) {\r\n die();\r\n}\r\n \r\n\/\/checking the file size\r\n$max_size = 500*1024; \/\/500 KB\r\nif($_FILES['datei']['size'] > $max_size) {\r\n die();\r\n}<\/pre>\n
It checks that an image file is really uploaded and also checks the size of the image to exclude files that are too large.<\/p>\n
You could also query this in the frontend, but an attacker could manipulate the JavaScript code to upload other file formats anyway. That’s why it makes more sense to perform the check in the backend (server side). To be on the safe side, it can also be explicitly stated that the folder in which the uploads land has no executable rights.<\/p>\n
Fazit<\/h2>\n
A year like that goes by really fast, and even though the project „Upload pictures to Link Shortener“ might be a piece of cake for any trained developer, I’m still surprised to be able to „code“ it so easily. My self a year ago would be thrilled by the skills I acquired in this relatively short time.<\/p>\n
By the way, Anexia always trains young people as software developers, and I think it’s worth applying: joinourrevolution.net<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This tutorials shows you how to implement a function to simply insert an image from your clipboard with „ctrl+v“ or an image via drag&drop.<\/p>\n","protected":false},"author":28,"featured_media":4137,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1135],"tags":[1367,1572,1353,1329,1570],"yoast_head":"\nTrainee-Howto: Upload images from clipboard - ANEXIA Blog<\/title>\n<meta name=\"description\" content=\"This tutorials shows you how to implement a function to simply insert an image from your clipboard with "ctrl+v" or an image via drag&drop.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trainee-Howto: Upload images from clipboard - ANEXIA Blog\" \/>\n<meta property=\"og:description\" content=\"This tutorials shows you how to implement a function to simply insert an image from your clipboard with "ctrl+v" or an image via drag&drop.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/\" \/>\n<meta property=\"og:site_name\" content=\"ANEXIA Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/anexiagmbh\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-12T12:41:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-21T10:49:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"672\" \/>\n\t<meta property=\"og:image:height\" content=\"372\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dennis Schaffer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_ANEXIA\" \/>\n<meta name=\"twitter:site\" content=\"@_ANEXIA\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dennis Schaffer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/\",\"url\":\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/\",\"name\":\"Trainee-Howto: Upload images from clipboard - ANEXIA Blog\",\"isPartOf\":{\"@id\":\"https:\/\/anexia.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\",\"datePublished\":\"2018-09-12T12:41:14+00:00\",\"dateModified\":\"2022-04-21T10:49:02+00:00\",\"author\":{\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933\"},\"description\":\"This tutorials shows you how to implement a function to simply insert an image from your clipboard with \\\"ctrl+v\\\" or an image via drag&drop.\",\"breadcrumb\":{\"@id\":\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#primaryimage\",\"url\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\",\"contentUrl\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg\",\"width\":672,\"height\":372,\"caption\":\"JOR_Dennis_Tutorial-Teaser\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/anexia.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Trainee-Howto: Upload images from clipboard\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/anexia.com\/blog\/#website\",\"url\":\"https:\/\/anexia.com\/blog\/\",\"name\":\"ANEXIA Blog\",\"description\":\"[:de] ANEXIA Blog - Technischen Themen, Anexia News und Insights [:]\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/anexia.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933\",\"name\":\"Dennis Schaffer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g\",\"caption\":\"Dennis Schaffer\"},\"url\":\"https:\/\/anexia.com\/blog\/author\/dschaffer\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Trainee-Howto: Upload images from clipboard - ANEXIA Blog","description":"This tutorials shows you how to implement a function to simply insert an image from your clipboard with \"ctrl+v\" or an image via drag&drop.","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:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/","og_locale":"de_DE","og_type":"article","og_title":"Trainee-Howto: Upload images from clipboard - ANEXIA Blog","og_description":"This tutorials shows you how to implement a function to simply insert an image from your clipboard with \"ctrl+v\" or an image via drag&drop.","og_url":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/","og_site_name":"ANEXIA Blog","article_publisher":"https:\/\/www.facebook.com\/anexiagmbh\/","article_published_time":"2018-09-12T12:41:14+00:00","article_modified_time":"2022-04-21T10:49:02+00:00","og_image":[{"width":672,"height":372,"url":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","type":"image\/jpeg"}],"author":"Dennis Schaffer","twitter_card":"summary_large_image","twitter_creator":"@_ANEXIA","twitter_site":"@_ANEXIA","twitter_misc":{"Verfasst von":"Dennis Schaffer","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/","url":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/","name":"Trainee-Howto: Upload images from clipboard - ANEXIA Blog","isPartOf":{"@id":"https:\/\/anexia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#primaryimage"},"image":{"@id":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#primaryimage"},"thumbnailUrl":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","datePublished":"2018-09-12T12:41:14+00:00","dateModified":"2022-04-21T10:49:02+00:00","author":{"@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933"},"description":"This tutorials shows you how to implement a function to simply insert an image from your clipboard with \"ctrl+v\" or an image via drag&drop.","breadcrumb":{"@id":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#primaryimage","url":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","contentUrl":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2019\/01\/JOR_Dennis_Tutorial-Teaser.jpg","width":672,"height":372,"caption":"JOR_Dennis_Tutorial-Teaser"},{"@type":"BreadcrumbList","@id":"https:\/\/anexia.com\/blog\/en\/trainee-howto-upload-images-from-clipboard\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/anexia.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Trainee-Howto: Upload images from clipboard"}]},{"@type":"WebSite","@id":"https:\/\/anexia.com\/blog\/#website","url":"https:\/\/anexia.com\/blog\/","name":"ANEXIA Blog","description":"[:de] ANEXIA Blog - Technischen Themen, Anexia News und Insights [:]","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/anexia.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/857f12ece50543091254fc42d4745933","name":"Dennis Schaffer","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d1a5d6a965d42684225f8b1ba672be5?s=96&d=mm&r=g","caption":"Dennis Schaffer"},"url":"https:\/\/anexia.com\/blog\/author\/dschaffer\/"}]}},"lang":"en","translations":{"en":6632,"de":3850},"amp_enabled":true,"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/6632"}],"collection":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/comments?post=6632"}],"version-history":[{"count":1,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/6632\/revisions"}],"predecessor-version":[{"id":6635,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/6632\/revisions\/6635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/media\/4137"}],"wp:attachment":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/media?parent=6632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/categories?post=6632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/tags?post=6632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}