From e2420c2a63239d4e52d44c42c411948b9fdb7458 Mon Sep 17 00:00:00 2001
From: Michael Merrill <michael@michaelmerrill.io>
Date: Mon, 3 Apr 2017 12:37:32 -0600
Subject: [PATCH] Add multiple file upload component

---
 client/components/multi-uploader.js | 31 +++++++++++++++++++++++++++++
 client/pages/index.js               | 17 +++++++++++++---
 2 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 client/components/multi-uploader.js

diff --git a/client/components/multi-uploader.js b/client/components/multi-uploader.js
new file mode 100644
index 0000000..517ed04
--- /dev/null
+++ b/client/components/multi-uploader.js
@@ -0,0 +1,31 @@
+import {Component} from 'react'
+import {graphql, gql} from 'react-apollo'
+
+class MultiUploader extends Component {
+  handleChange = ({target}) => {
+    if (target.validity.valid) {
+      this.props
+        .mutate({
+          variables: {
+            files: target.files
+          }
+        })
+        .then(({data}) => console.log('Mutation response:', data))
+    }
+  }
+
+  render () {
+    return <input type='file' accept={'image/jpeg,image/png'} multiple required onChange={this.handleChange} />
+  }
+}
+
+export default graphql(gql`
+  mutation multiUpload ($files: [Upload!]) {
+    multiUpload (files: $files) {
+      name
+      type
+      size
+      path
+    }
+  }
+`)(MultiUploader)
diff --git a/client/pages/index.js b/client/pages/index.js
index 26ad181..adbb4e3 100644
--- a/client/pages/index.js
+++ b/client/pages/index.js
@@ -1,6 +1,7 @@
 import Head from 'next/head'
 import withData from '../helpers/with-data'
 import SingleUploader from '../components/single-uploader'
+import MultiUploader from '../components/multi-uploader'
 
 export default withData(props => (
   <div>
@@ -13,10 +14,20 @@ export default withData(props => (
         body {
           margin: 2em;
         }
+        section {
+          height: 50vh;
+        }
       `}</style>
     </Head>
-    <h1>Apollo upload example</h1>
-    <p>Select an image to upload and view the response in the console.</p>
-    <SingleUploader />
+    <section>
+      <h1>Apollo upload example (single file)</h1>
+      <p>Select an image to upload and view the response in the console.</p>
+      <SingleUploader />
+    </section>
+    <section>
+      <h1>Apollo upload example (multiple files)</h1>
+      <p>Select multiple images to upload and view the response in the console.</p>
+      <MultiUploader />
+    </section>
   </div>
 ))