{"id":262,"date":"2012-01-04T03:32:33","date_gmt":"2012-01-04T03:32:33","guid":{"rendered":"http:\/\/blog.alexandremagno.net\/?p=262"},"modified":"2012-03-30T22:08:49","modified_gmt":"2012-03-30T22:08:49","slug":"the-html5-upload-api","status":"publish","type":"post","link":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/","title":{"rendered":"The html5 upload API"},"content":{"rendered":"<p>One of the great things that&#8217;s the new to <strong>HTML specification<\/strong> for <strong>Mozilla<\/strong> it&#8217;s the new way to access files and handle upload. Now you have access to basic file information, that it wasn&#8217;t possible before with native implementation, cause you just had access to file after the user post the form data. Now the <strong>Mozilla browsers<\/strong> since <strong>version 4.0<\/strong> has a temporary <strong>storage of the file at client machine<\/strong>, and there&#8217;s more, you can handle <strong>multiple uploads<\/strong>. You don&#8217;t need use third party libraries like <a title=\"swfupload - a flash \/ javascript upload library to handle multiple uploads\" href=\"http:\/\/swfupload.org\/\" target=\"_blank\">swfupload<\/a> anymore, but to keep full support for any kind of users, you can still use it as fallback.<\/p>\n<p>The support is still limited to <a title=\"A open source browser from Mozilla\" href=\"http:\/\/www.mozilla.org\/en-US\/firefox\/new\/\" target=\"_blank\">Firefox<\/a>, but it&#8217;s a great example how the new things at <strong>HTML5<\/strong> gave us freedom to make a better user experience.<\/p>\n<p>So let&#8217;s imagine that you have a simple <strong>html form<\/strong> with a input file, a <strong>related css<\/strong> and the <strong>following javascript <\/strong>explained.<\/p>\n<p>[jsfiddle url=&#8221;http:\/\/jsfiddle.net\/q8FTA\/3\/&#8221; height=&#8221;300px&#8221; include=&#8221;html,css,js,result&#8221;]<\/p>\n<p>With the new <a title=\"How to handle files using FileReader\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/\" target=\"_blank\"><strong>FileReader<\/strong><\/a> Class you can trigger a click at file input, and this way you can handle the file choose dialog after a user select a file. So you can bind a change event and handle the file chosen.<\/p>\n<p>You can have a <a title=\"The FileReader API\" href=\"https:\/\/developer.mozilla.org\/en\/DOM\/FileReader\" target=\"_blank\">complete documentation at mozilla MDC page<\/a>.<\/p>\n<p><strong>Important: <\/strong>If you want to use a normal link to trigger the dialog page, you should hide the input file, but not with display hidden, but with opacity: 0, because chrome don&#8217;t accept to trigger a event in a hidden file field.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the great things that&#8217;s the new to HTML specification for Mozilla it&#8217;s the new way to access files and handle upload. Now you have access to basic file information, that it wasn&#8217;t possible before with native implementation, cause you just [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[76,74,75],"class_list":["post-262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css","tag-api","tag-html5","tag-upload"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The html5 upload API - Webpoint<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The html5 upload API - Webpoint\" \/>\n<meta property=\"og:description\" content=\"One of the great things that&#8217;s the new to HTML specification for Mozilla it&#8217;s the new way to access files and handle upload. Now you have access to basic file information, that it wasn&#8217;t possible before with native implementation, cause you just [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Webpoint\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-04T03:32:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-03-30T22:08:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/01\/html5logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"296\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"alexanmtz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alexanmtz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/\"},\"author\":{\"name\":\"alexanmtz\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\"},\"headline\":\"The html5 upload API\",\"datePublished\":\"2012-01-04T03:32:33+00:00\",\"dateModified\":\"2012-03-30T22:08:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/\"},\"wordCount\":271,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"keywords\":[\"api\",\"html5\",\"upload\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/\",\"url\":\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/\",\"name\":\"The html5 upload API - Webpoint\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/#website\"},\"datePublished\":\"2012-01-04T03:32:33+00:00\",\"dateModified\":\"2012-03-30T22:08:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/alexandremagno.net\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The html5 upload API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alexandremagno.net\/#website\",\"url\":\"https:\/\/alexandremagno.net\/\",\"name\":\"Webpoint\",\"description\":\"Weblosofia com desenvolvimento web\",\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alexandremagno.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/alexandremagno.net\/#organization\",\"name\":\"Webpoint\",\"url\":\"https:\/\/alexandremagno.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"contentUrl\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"width\":35,\"height\":31,\"caption\":\"Webpoint\"},\"image\":{\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\",\"name\":\"alexanmtz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"caption\":\"alexanmtz\"},\"sameAs\":[\"https:\/\/alexandremagno.net\"],\"url\":\"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The html5 upload API - Webpoint","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:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/","og_locale":"en_US","og_type":"article","og_title":"The html5 upload API - Webpoint","og_description":"One of the great things that&#8217;s the new to HTML specification for Mozilla it&#8217;s the new way to access files and handle upload. Now you have access to basic file information, that it wasn&#8217;t possible before with native implementation, cause you just [&hellip;]","og_url":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/","og_site_name":"Webpoint","article_published_time":"2012-01-04T03:32:33+00:00","article_modified_time":"2012-03-30T22:08:49+00:00","og_image":[{"width":300,"height":296,"url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/01\/html5logo.png","type":"image\/png"}],"author":"alexanmtz","twitter_card":"summary_large_image","twitter_misc":{"Written by":"alexanmtz","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#article","isPartOf":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/"},"author":{"name":"alexanmtz","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af"},"headline":"The html5 upload API","datePublished":"2012-01-04T03:32:33+00:00","dateModified":"2012-03-30T22:08:49+00:00","mainEntityOfPage":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/"},"wordCount":271,"commentCount":0,"publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"keywords":["api","html5","upload"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/","url":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/","name":"The html5 upload API - Webpoint","isPartOf":{"@id":"https:\/\/alexandremagno.net\/#website"},"datePublished":"2012-01-04T03:32:33+00:00","dateModified":"2012-03-30T22:08:49+00:00","breadcrumb":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/alexandremagno.net\/en\/2012\/01\/04\/the-html5-upload-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/alexandremagno.net\/en\/"},{"@type":"ListItem","position":2,"name":"The html5 upload API"}]},{"@type":"WebSite","@id":"https:\/\/alexandremagno.net\/#website","url":"https:\/\/alexandremagno.net\/","name":"Webpoint","description":"Weblosofia com desenvolvimento web","publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexandremagno.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/alexandremagno.net\/#organization","name":"Webpoint","url":"https:\/\/alexandremagno.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/","url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","contentUrl":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","width":35,"height":31,"caption":"Webpoint"},"image":{"@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af","name":"alexanmtz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","caption":"alexanmtz"},"sameAs":["https:\/\/alexandremagno.net"],"url":"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/"}]}},"_links":{"self":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":10,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":326,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/262\/revisions\/326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media\/324"}],"wp:attachment":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}