Add multiple file upload component

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)

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>
+    <section>
-    <p>Select an image to upload and view the response in the console.</p>
+      <h1>Apollo upload example (single file)</h1>
-    <SingleUploader />
+      <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>
 ))