New approach for layout and blob example.

app/components/blob-uploader.js

@@ -1,35 +0,0 @@
-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)

app/components/field.js

@@ -0,0 +1,13 @@
+const Field = ({ children }) => (
+  <label>
+    {children}
+    <style jsx>{`
+      label {
+        display: block;
+        margin-bottom: 0.5em;
+      }
+    `}</style>
+  </label>
+)
+
+export default Field

app/components/file-input.js

@@ -1,13 +0,0 @@
-const FileInput = props => (
-  <div>
-    <h3>{props.title}</h3>
-    <input type="file" {...props} />
-    <style jsx>{`
-      div {
-        padding: 0.5em;
-      }
-    `}</style>
-  </div>
-)
-
-export default FileInput

app/components/section.js

@@ -0,0 +1,15 @@
+const Section = ({ heading, children }) => (
+  <section>
+    <h1>{heading}</h1>
+    {children}
+    <style jsx>{`
+      h1 {
+        margin-top: 1.5em;
+        margin-bottom: 0.5em;
+        font-size: 120%;
+      }
+    `}</style>
+  </section>
+)
+
+export default Section

app/components/upload-blob.js

@@ -0,0 +1,70 @@
+import { Component } from 'react'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
+import Field from './field'
+import uploadsQuery from '../queries/uploads'
+
+class UploadBlob extends Component {
+  state = {
+    name: '',
+    content: ''
+  }
+
+  handleChange = ({ target: { name, value } }) =>
+    this.setState({ [name]: value })
+
+  handleSubmit = event => {
+    event.preventDefault()
+
+    const file = new Blob([this.state.content], { type: 'text/plain' })
+    file.name = `${this.state.name}.txt`
+
+    this.props.mutate({
+      variables: { file },
+      update: (proxy, { data: { singleUpload } }) => {
+        const data = proxy.readQuery({ query: uploadsQuery })
+        data.uploads.push(singleUpload)
+        proxy.writeQuery({ query: uploadsQuery, data })
+      }
+    })
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <Field>
+          <input
+            name="name"
+            placeholder="Name"
+            required
+            value={this.state.name}
+            onChange={this.handleChange}
+          />{' '}
+          .txt
+        </Field>
+        <Field>
+          <textarea
+            name="content"
+            placeholder="Content"
+            required
+            value={this.state.content}
+            onChange={this.handleChange}
+          />
+        </Field>
+        <button>Upload</button>
+      </form>
+    )
+  }
+}
+
+export default graphql(gql`
+  mutation($file: Upload!) {
+    singleUpload(file: $file) {
+      id
+      filename
+      encoding
+      mimetype
+      path
+    }
+  }
+`)(UploadBlob)

app/components/upload-file.js

@@ -1,13 +1,12 @@
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
-import FileInput from './file-input'
 import uploadsQuery from '../queries/uploads'
 
-const SingleUploader = ({ mutate }) => {
+const UploadFile = ({ mutate }) => {
-  const handleChange = ({ target }) =>
+  const handleChange = ({ target: { validity, files: [file] } }) =>
-    target.validity.valid &&
+    validity.valid &&
     mutate({
-      variables: { file: target.files[0] },
+      variables: { file },
       update: (proxy, { data: { singleUpload } }) => {
         const data = proxy.readQuery({ query: uploadsQuery })
         data.uploads.push(singleUpload)
@@ -15,7 +14,7 @@ const SingleUploader = ({ mutate }) => {
       }
     })
 
-  return <FileInput required onChange={handleChange} title={'Single file upload'} />
+  return <input type="file" required onChange={handleChange} />
 }
 
 export default graphql(gql`
@@ -28,4 +27,4 @@ export default graphql(gql`
       path
     }
   }
-`)(SingleUploader)
+`)(UploadFile)

app/components/upload-filelist.js

@@ -1,13 +1,12 @@
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
-import FileInput from './file-input'
 import uploadsQuery from '../queries/uploads'
 
-const MultipleUploader = ({ mutate }) => {
+const UploadFileList = ({ mutate }) => {
-  const handleChange = ({ target }) =>
+  const handleChange = ({ target: { validity, files } }) =>
-    target.validity.valid &&
+    validity.valid &&
     mutate({
-      variables: { files: target.files },
+      variables: { files },
       update: (proxy, { data: { multipleUpload } }) => {
         const data = proxy.readQuery({ query: uploadsQuery })
         data.uploads.push(...multipleUpload)
@@ -15,7 +14,7 @@ const MultipleUploader = ({ mutate }) => {
       }
     })
 
-  return <FileInput multiple required onChange={handleChange} title={'Multiple files upload'} />
+  return <input type="file" multiple required onChange={handleChange} />
 }
 
 export default graphql(gql`
@@ -28,4 +27,4 @@ export default graphql(gql`
       path
     }
   }
-`)(MultipleUploader)
+`)(UploadFileList)

app/components/uploads.js

@@ -2,7 +2,7 @@ import { graphql } from 'react-apollo'
 import { Table, Head, Cell } from './table'
 import uploadsQuery from '../queries/uploads'
 
-const UploadList = ({ data: { uploads = [] } }) => (
+const Uploads = ({ data: { uploads = [] } }) => (
   <Table
     thead={
       <tr>
@@ -23,4 +23,4 @@ const UploadList = ({ data: { uploads = [] } }) => (
   />
 )
 
-export default graphql(uploadsQuery)(UploadList)
+export default graphql(uploadsQuery)(Uploads)

app/pages/index.js

@@ -1,8 +1,9 @@
 import Page from '../components/page'
-import SingleUploader from '../components/single-uploader'
+import Section from '../components/section'
-import MultipleUploader from '../components/multiple-uploader'
+import UploadFile from '../components/upload-file'
-import BlobUploader from '../components/blob-uploader'
+import UploadFileList from '../components/upload-filelist'
-import UploadList from '../components/upload-list'
+import UploadBlob from '../components/upload-blob'
+import Uploads from '../components/uploads'
 import withData from '../providers/with-data'
 
 const HomePage = () => (
@@ -13,10 +14,18 @@ const HomePage = () => (
       height="128"
       alt="Apollo upload logo"
     />
-    <SingleUploader />
+    <Section heading="Upload FileList">
-    <MultipleUploader />
+      <UploadFileList />
-    <BlobUploader />
+    </Section>
-    <UploadList />
+    <Section heading="Upload File">
+      <UploadFile />
+    </Section>
+    <Section heading="Upload Blob">
+      <UploadBlob />
+    </Section>
+    <Section heading="Uploads">
+      <Uploads />
+    </Section>
   </Page>
 )