diff --git a/.gitignore b/.gitignore index ba8e7fa..840014a 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ node_modules yarn.lock .env .DS_Store +db.json diff --git a/api/package.json b/api/package.json index b2efe64..cf79592 100644 --- a/api/package.json +++ b/api/package.json @@ -16,6 +16,7 @@ "koa-bodyparser": "^4.2.0", "koa-compress": "^2.0.0", "koa-router": "^7.1.1", + "lowdb": "^0.16.0", "source-map-support": "^0.4.14", "webpack": "^2.3.3", "zoo": "^0.1.9" diff --git a/api/resolvers.js b/api/resolvers.js index 4de7971..d335296 100644 --- a/api/resolvers.js +++ b/api/resolvers.js @@ -1,13 +1,35 @@ +import low from 'lowdb' +import fileAsync from 'lowdb/lib/storages/file-async' + +// Start database using file-async storage +const db = low('db.json', { + storage: fileAsync +}) + +db.defaults({uploads: []}) + .write() + +const saveFile = (file) => { + return db.get('uploads') + .push(file) + .last() + .write() + .then((result) => result) +} export default { Query: { - ignore () { - return null + allUploads () { + return db.get('uploads').value() } }, Mutation: { - singleUpload (root, {file}) { - console.log('Uploaded file:', file) - return file + singleUpload (_, {file}) { + return saveFile(file) + }, + multiUpload (_, {files}) { + return Promise.all(files.map((file) => { + return saveFile(file) + })).then((results) => results) } } } diff --git a/api/schema.graphql b/api/schema.graphql index 2a2a100..deab78d 100644 --- a/api/schema.graphql +++ b/api/schema.graphql @@ -13,10 +13,10 @@ input Upload { } type Query { - # GraphQL will not work without defining a query. - ignore: Boolean + allUploads: [File] } type Mutation { singleUpload (file: Upload!): File! + multiUpload (files: [Upload!]!): [File!]! } diff --git a/app/components/multi-uploader.js b/app/components/multi-uploader.js new file mode 100644 index 0000000..de9b45b --- /dev/null +++ b/app/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 + } +} + +export default graphql(gql` + mutation multiUpload ($files: [Upload!]!) { + multiUpload (files: $files) { + name + type + size + path + } + } +`)(MultiUploader) diff --git a/app/components/upload-list.js b/app/components/upload-list.js new file mode 100644 index 0000000..c25ec41 --- /dev/null +++ b/app/components/upload-list.js @@ -0,0 +1,22 @@ +import {graphql, gql} from 'react-apollo' + +const UploadList = ({data: {allUploads, loading}}) => { + return ( + + ) +} + +export default graphql(gql` + query allUploads { + allUploads { + name + type + size + path + } + } +`)(UploadList) diff --git a/app/pages/index.js b/app/pages/index.js index 26ad181..5876c16 100644 --- a/app/pages/index.js +++ b/app/pages/index.js @@ -1,6 +1,8 @@ import Head from 'next/head' import withData from '../helpers/with-data' import SingleUploader from '../components/single-uploader' +import MultiUploader from '../components/multi-uploader' +import UploadList from '../components/upload-list' export default withData(props => (
@@ -13,10 +15,24 @@ export default withData(props => ( body { margin: 2em; } + section { + padding-top: 3em; + } `}

Apollo upload example

-

Select an image to upload and view the response in the console.

- +
+

Single file upload

+

Select an image to upload and view the response in the console.

+ +
+
+

Multiple file upload

+

Select multiple images to upload and view the response in the console.

+ +
+
+ +
)) diff --git a/app/readme.md b/app/readme.md index 19caebb..ee06ba1 100644 --- a/app/readme.md +++ b/app/readme.md @@ -5,7 +5,7 @@ An example web application using [Next.js](https://github.com/zeit/next.js), [Re ## Setup 1. Install the latest [Node.js](https://nodejs.org). -2. Run `npm install` within the `api` directory in Terminal. +2. Run `npm install` within the `app` directory in Terminal. 3. Copy `.env.example`, rename it `.env` and customize. For development run `npm run dev`.