diff --git a/app/components/blob-uploader.js b/app/components/blob-uploader.js
new file mode 100644
index 0000000..75a6194
--- /dev/null
+++ b/app/components/blob-uploader.js
@@ -0,0 +1,35 @@
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
+import FileInput from './file-input'
+import uploadsQuery from '../queries/uploads'
+
+const BlobUploader = ({ mutate }) => {
+  const handleChange = ({ target }) => {
+    // We just convert the actual File to a Blob for the example
+    const blob = new Blob([target.files[0].slice(0, -1)], { type: target.files[0].type })
+    blob.name = target.files[0].name; // Don't forget to add the name to the Blob or it will be unnamed!
+
+    mutate({
+      variables: { file: blob },
+      update: (proxy, { data: { singleUpload } }) => {
+        const data = proxy.readQuery({ query: uploadsQuery })
+        data.uploads.push(singleUpload)
+        proxy.writeQuery({ query: uploadsQuery, data })
+      }
+    })
+  }
+
+  return <FileInput required onChange={handleChange} title={'Blob upload'} />
+}
+
+export default graphql(gql`
+  mutation($file: Upload!) {
+    singleUpload(file: $file) {
+      id
+      filename
+      encoding
+      mimetype
+      path
+    }
+  }
+`)(BlobUploader)
diff --git a/app/pages/index.js b/app/pages/index.js
index 8805796..2dc6750 100644
--- a/app/pages/index.js
+++ b/app/pages/index.js
@@ -1,6 +1,7 @@
 import Page from '../components/page'
 import SingleUploader from '../components/single-uploader'
 import MultipleUploader from '../components/multiple-uploader'
+import BlobUploader from '../components/blob-uploader'
 import UploadList from '../components/upload-list'
 import withData from '../providers/with-data'
 
@@ -14,6 +15,7 @@ const HomePage = () => (
     />
     <SingleUploader />
     <MultipleUploader />
+    <BlobUploader />
     <UploadList />
   </Page>
 )