FormData demo

robnyman · Feb 11, 2013 · 7bd4685 · 7bd4685
1 parent 53b0570
commit 7bd4685
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 0 deletions.
diff --git a/html5demos/formdata/css/base.css b/html5demos/formdata/css/base.css
@@ -0,0 +1,51 @@
+body {
+    font: 12px "Helvetica Neue", "Helvetica", sans-serif;
+    background: #ccc;
+}
+
+h1 {
+    margin-top: 0;
+}
+
+img {
+    padding: 10px;
+    box-shadow: 0 0 10px 2px #ccc;
+    margin-bottom: 5px;
+}
+
+figcaption {
+    font-style: italic;
+}
+
+.container {
+    width: 900px;
+    background: #fff;
+    border-radius: 10px;
+    margin: 0 auto;
+    padding: 30px;
+}
+
+header {
+    margin-bottom: 20px;
+    border-bottom: 1px solid #000;
+}
+
+.main-content {
+    overflow: hidden;
+}
+
+.additional-content {
+    float: right;
+    width: 300px;
+    height: 400px;
+    padding: 10px;
+    background: #ccc;
+    border-radius: 5px
+}
+
+.page-footer {
+    border-top: 1px solid #000;
+    margin-top: 30px;
+    padding-top: 10px;
+}
+
diff --git a/html5demos/formdata/getfile.php b/html5demos/formdata/getfile.php
@@ -0,0 +1,7 @@
+<?php 
+    $fileName = $_FILES['blobbie']['name'];
+    $fileType = $_FILES['blobbie']['type'];
+    $fileContent = file_get_contents($_FILES['blobbie']['tmp_name']);
+    $dataURL = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);
+    echo $dataURL;
+?>
diff --git a/html5demos/formdata/index.html b/html5demos/formdata/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>HTML5 demo with FormData</title>
+        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
+    </head>
+
+    <body>
+
+        <div class="container">
+
+            <header class="header" role="banner">
+                <h1>HTML5 demo with FormData</h1>
+            </header>
+
+            <div class="main">
+                <article class="main-content" role="main">
+
+                    <aside class="additional-content" aria-live="polite" aria-relevant="additions" aria-atomic="true">
+                        <p>This is a demo page displaying how you can use FormData to send files and values to the servers through XMLHttpRequest. The response from the server is the contents of a blob, turned itno a data URL. That image is then being shoown in the image below (use Developer Tools in your web browser to check the source of it).</p>
+                        <p>In the <a href="js/base.js">base.js</a> file you can see the code to achieve this.</p>
+                        <p>All the <a href="https://github.com/robnyman/robnyman.github.com">code is available at GitHub</a>, for this page and other related demos.</p>
+                    </aside>
+
+                    <h2>Rhino, sent with FormData, retrieved back and shown through a data URL.</h2>
+                    <figure>
+                        <img id="rhino" src="rhino.png" alt="A close up of a rhino">
+                        <figcaption>Rhinos are big!</figcaption>
+                    </figure>
+
+                </article>
+            </div>
+
+            <footer class="page-footer" role="contentinfo">
+                Created by <a href="http://robertnyman.com/">Robert Nyman</a><br>
+                <a href="https://github.com/robnyman/robnyman.github.com">All demo code at GitHub</a>.
+            </footer>
+
+        </div>
+
+        <script src="js/base.js"></script>
+
+    </body>
+</html>
diff --git a/html5demos/formdata/js/base.js b/html5demos/formdata/js/base.js
@@ -0,0 +1,45 @@
+(function () {
+    // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
+    var rhino = document.querySelector("#rhino");
+    if (rhino) {
+        var xhr = new XMLHttpRequest(),
+            blob;
+
+        xhr.open("GET", "rhino.png", true);
+        /*
+            Set the responseType to "blob". 
+            If it isn't supported in the targeted web browser, 
+            use "arraybuffer" instead and wrap the response 
+            with new Uint8Array() below
+        */
+        xhr.responseType = "blob";
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                /* 
+                    Create a blob from the response
+                    Only needed if the responseType isn't already blob
+                    If it's "arraybuffer", do this:
+    
+                    blob = new Blob([new Uint8Array(xhr.response)], {type: "image/png"});
+                */
+                blob = xhr.response;
+                var form = new FormData();
+                form.append("blobbie", blob);
+
+                var xhrForm = new XMLHttpRequest();
+                xhrForm.open("POST", "getfile.php");
+                xhrForm.send(form);
+
+                xhrForm.onreadystatechange = function () {
+                    if (xhrForm.readyState === 4) {
+                        console.log(xhrForm.response);
+                        rhino.src = xhrForm.response;
+                    }
+                };
+            }
+        };
+        // Send XHR
+        xhr.send();
+    }
+})();
diff --git a/html5demos/formdata/rhino.png b/html5demos/formdata/rhino.png