{"id":1858,"date":"2017-10-26T17:19:16","date_gmt":"2017-10-26T15:19:16","guid":{"rendered":"https:\/\/blog.kodono.info\/wordpress\/?p=1858"},"modified":"2017-10-26T17:19:16","modified_gmt":"2017-10-26T15:19:16","slug":"how-to-drag-and-drop-a-file-into-a-dropzone-in-html5","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2017\/10\/26\/how-to-drag-and-drop-a-file-into-a-dropzone-in-html5\/","title":{"rendered":"How to drag and drop a file into a dropzone in HTML5"},"content":{"rendered":"<p>We can find plenty of demo and tutorials about it on the web, but it took me a while to understand how to setup something easy and quick.<\/p>\n<p>The purpose is to have a zone where we can drop a file from our computer.<\/p>\n<p>You need:<\/p>\n<ol>\n<li>A zone where the file will be dropped (for example a <code>&lt;div>&lt;\/div><\/code>)<\/li>\n<li>A minimum of three events:\n<ul>\n<li><code>drop<\/code><\/li>\n<li><code>dragover<\/code><\/li>\n<li><code>dragleave<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>The three events attached to our dropzone must all call <code>event.preventDefault()<\/code> otherwise it won&#8217;t work as expected.<\/strong><\/p>\n<p>Then, you can apply a style to the dropzone based on <code>dragover<\/code> and <code>dragleave<\/code>, and read the property <code>event.dataTransfer.files<\/code> from <code>drop<\/code> to get the file.<\/p>\n<p>See here the super simple example: <a href=\"https:\/\/codepen.io\/Aymkdn\/pen\/oovXNY\">https:\/\/codepen.io\/Aymkdn\/pen\/oovXNY<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We can find plenty of demo and tutorials about it on the web, but it took me a while to understand how to setup something easy and quick. The purpose is to have a zone where we can drop a file from our computer. You need: A zone where the file will be dropped (for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[15,170,11,33],"tags":[153,123,151,158],"class_list":["post-1858","post","type-post","status-publish","format-standard","hentry","category-astuce","category-english","category-niveau-debutant","category-programmation","tag-astuce","tag-english","tag-niveau-debutant","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1858"}],"version-history":[{"count":1,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1858\/revisions"}],"predecessor-version":[{"id":1859,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1858\/revisions\/1859"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}