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 ( +
Select an image to upload and view the response in the console.
-Select an image to upload and view the response in the console.
+Select multiple images to upload and view the response in the console.
+