├── .vscode └── launch.json ├── LICENSE ├── README.md ├── client ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── CreatePost.css │ ├── CreatePost.js │ ├── Post.css │ ├── Post.js │ ├── Posts.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lock └── server ├── .eslintrc.js ├── .gitignore ├── .prettierrc.json ├── README.md ├── package.json ├── schema.sql ├── src └── index.js ├── uploads └── .keep └── yarn.lock /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | 5 | { 6 | "type": "node", 7 | "request": "launch", 8 | "name": "Launch Server", 9 | "protocol": "inspector", 10 | "cwd": "${workspaceRoot}/server", 11 | "program": "${workspaceRoot}/server/src/index.js", 12 | "args": [], 13 | "runtimeExecutable": null, 14 | "runtimeArgs": [ 15 | "--nolazy" 16 | ], 17 | "env": { 18 | "NODE_ENV": "development", 19 | }, 20 | "sourceMaps": true 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Matt Bretl 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # postgraphile-upload-example 2 | 3 | This app demonstrates how to add file upload support to PostGraphile using the [GraphQL Multipart Request Spec](https://github.com/jaydenseric/graphql-multipart-request-spec). 4 | 5 | Server: 6 | - PostGraphile 7 | - [postgraphile-plugin-upload-field](https://github.com/mattbretl/postgraphile-plugin-upload-field) 8 | - [graphql-upload](https://github.com/jaydenseric/graphql-upload) 9 | 10 | Client: 11 | - create-react-app 12 | - [apollo-client](https://github.com/apollographql/apollo-client) 13 | - [apollo-upload-client](https://github.com/jaydenseric/apollo-upload-client) 14 | 15 | ## Quick Start 16 | 17 | Clone this repo. 18 | 19 | In one terminal: 20 | 21 | ```bash 22 | cd server 23 | createdb upload_example 24 | psql -d upload_example -f schema.sql 25 | yarn 26 | yarn start 27 | ``` 28 | 29 | In another terminal: 30 | 31 | ```bash 32 | cd client 33 | yarn 34 | yarn start 35 | ``` 36 | 37 | The app should now be fully functional at localhost:3000. Uploaded files will be stored locally in `/server/uploads`. 38 | 39 | ## How does it work? 40 | 41 | The [server](https://github.com/mattbretl/postgraphile-upload-example/blob/master/server/src/index.js) code should be relatively straightforward if you're familiar with PostGraphile. The [graphql-upload](https://github.com/jaydenseric/graphql-upload) middleware handles the multipart requests using [busboy](https://github.com/mscdex/busboy). The [postgraphile-plugin-upload-field](https://github.com/mattbretl/postgraphile-plugin-upload-field) plugin for PostGraphile is minimally documented, but briefly, `match` is a function used to specify the file upload metadata columns and `resolve` is a function that handles the actual file upload stream. 42 | 43 | The client is full of React/Apollo boilerplate. The unique parts are: 44 | - [These lines in clients/src/index.js](https://github.com/mattbretl/postgraphile-upload-example/blob/master/client/src/index.js#L26-28) where createUploadLink replaces the usual createHttpLink in the ApolloClient constructor; and 45 | - [All of client/src/CreatePost.js](https://github.com/mattbretl/postgraphile-upload-example/blob/master/client/src/CreatePost.js), which is the actual upload form. It uses the `Query` and `Mutation` components that were [added in React Apollo 2.1](https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926). 46 | 47 | ## Preserving metadata 48 | 49 | By default, the example app only stores the local file path to Postgres. To preserve additional metadata, change the `header_image_file` column type to JSONB and replace the resolveUpload function with the following: 50 | 51 | ```js 52 | async function resolveUpload(upload) { 53 | const { filename, mimetype, encoding, createReadStream } = upload; 54 | const stream = createReadStream(); 55 | // Save file to the local filesystem 56 | const { id, path } = await saveLocal({ stream, filename }); 57 | // Return metadata to save it to Postgres 58 | return { 59 | id, 60 | path, 61 | filename, 62 | mimetype, 63 | encoding 64 | }; 65 | } 66 | ``` 67 | 68 | After making this change, you'll also need to update the client app to use the `path` property of the object. 69 | 70 | For a more robust solution, consider using something like [postgraphile-plugin-derived-field](https://github.com/mattbretl/postgraphile-plugin-derived-field) to expose URLs through GraphQL instead of exposing the raw path/metadata. 71 | 72 | If you're streaming file uploads to an object storage service such as S3, you can also use the derived field plugin to generate pre-signed URLs for clients. -------------------------------------------------------------------------------- /client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postgraphile-upload-example-client", 3 | "version": "1.0.0-alpha.0", 4 | "private": true, 5 | "author": "Matt Bretl", 6 | "license": "MIT", 7 | "dependencies": { 8 | "apollo-cache-inmemory": "^1.6.2", 9 | "apollo-client": "^2.6.3", 10 | "apollo-link": "^1.2.12", 11 | "apollo-link-error": "^1.1.11", 12 | "apollo-link-http": "^1.5.15", 13 | "apollo-upload-client": "^10.0.1", 14 | "graphql": "^14.4.2", 15 | "graphql-tag": "^2.10.1", 16 | "react": "^16.8.6", 17 | "react-apollo": "^2.5.8", 18 | "react-dom": "^16.8.6", 19 | "react-scripts": "3.0.1" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": [ 31 | ">0.2%", 32 | "not dead", 33 | "not ie <= 11", 34 | "not op_mini all" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/graphile-contrib/postgraphile-upload-example/1fd17352f85d103c52b398ae477c59ce7aef9a46/client/public/favicon.ico -------------------------------------------------------------------------------- /client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /client/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: whitesmoke; 3 | } 4 | 5 | .App-header { 6 | background-color: #222; 7 | padding: 20px; 8 | color: white; 9 | } 10 | 11 | .App-title { 12 | font-size: 1.5em; 13 | } 14 | 15 | .create-post { 16 | float: left; 17 | margin: 10px; 18 | padding: 20px; 19 | background: white; 20 | border: 1px solid silver; 21 | border-bottom: 2px solid silver; 22 | border-radius: 3px; 23 | } 24 | 25 | .posts { 26 | display: grid; 27 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 28 | } -------------------------------------------------------------------------------- /client/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./App.css"; 3 | import CreatePost from "./CreatePost"; 4 | import Posts from "./Posts"; 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
10 |
11 |

Posts

12 |
13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 |
22 | ); 23 | } 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /client/src/CreatePost.css: -------------------------------------------------------------------------------- 1 | .create-post-header { 2 | font-size: 1.2em; 3 | font-weight: bold; 4 | } 5 | 6 | form { 7 | display: grid; 8 | align-items: center; 9 | margin-top: 1rem; 10 | } 11 | 12 | @media (min-width: 400px) { 13 | form { 14 | grid-template-columns: auto 1fr; 15 | grid-gap: 10px; 16 | } 17 | 18 | label { 19 | text-align: right; 20 | grid-column: 1 / 2; 21 | } 22 | 23 | input, 24 | button, 25 | label.input { 26 | grid-column: 2 / 3; 27 | } 28 | } 29 | 30 | input[type="text"], 31 | select, 32 | textarea, 33 | button { 34 | padding: 4px; 35 | border: 1px solid #ccc; 36 | border-radius: 5px; 37 | background: white; 38 | } 39 | 40 | input[type="file"] { 41 | position: absolute; 42 | opacity: 0; 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 100%; 47 | cursor: pointer; 48 | } 49 | 50 | label.input { 51 | position: relative; 52 | } 53 | 54 | form button { 55 | border: 1px solid #ccc; 56 | padding: 4px; 57 | width: 100%; 58 | cursor: pointer; 59 | } 60 | 61 | form button input:disabled { 62 | background: inherit; 63 | color: inherit; 64 | border: 0; 65 | text-align: center; 66 | cursor: pointer; 67 | } 68 | 69 | form.locked { 70 | pointer-events: none; 71 | } 72 | 73 | @keyframes spinner { 74 | to {transform: rotate(360deg);} 75 | } 76 | 77 | form button[type="submit"].spinner { 78 | position: relative; 79 | } 80 | 81 | form button[type="submit"].spinner:after { 82 | content: ''; 83 | box-sizing: border-box; 84 | position: absolute; 85 | top: 50%; 86 | right: 10px; 87 | width: 20px; 88 | height: 20px; 89 | margin-top: -10px; 90 | margin-left: -10px; 91 | border-radius: 50%; 92 | border: 2px solid #ccc; 93 | border-top-color: #333; 94 | animation: spinner 0.7s linear infinite; 95 | z-index: 2; 96 | opacity: 0.0; 97 | transition: opacity .5s ease; 98 | } 99 | 100 | form.locked button[type="submit"].spinner:after { 101 | opacity: 0.5; 102 | } 103 | 104 | form.locked button[type="submit"] { 105 | background-color: gainsboro; 106 | border-color: gainsboro; 107 | } 108 | 109 | /* Firefox fix */ 110 | button::-moz-focus-inner { 111 | border: 0; 112 | } -------------------------------------------------------------------------------- /client/src/CreatePost.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import gql from "graphql-tag"; 3 | import { Mutation } from "react-apollo"; 4 | import "./CreatePost.css"; 5 | 6 | const CREATE_POST = gql` 7 | mutation createPost($input: CreatePostInput!) { 8 | createPost(input: $input) { 9 | post { 10 | headline 11 | body 12 | headerImageFile 13 | } 14 | } 15 | } 16 | `; 17 | 18 | const GET_POSTS = gql` 19 | query allPosts { 20 | allPosts(first: 50) { 21 | nodes { 22 | id 23 | headline 24 | headerImageFile 25 | } 26 | } 27 | } 28 | `; 29 | 30 | const CreatePost = () => { 31 | return ( 32 | { 35 | document.getElementsByTagName("form")[0].reset(); 36 | }} 37 | refetchQueries={[{ query: GET_POSTS }]} 38 | > 39 | {(createPost, { data, loading, error }) => ( 40 |
41 | Create Post 42 |
{ 45 | event.preventDefault(); 46 | const fd = new FormData(event.target); 47 | const headline = fd.get("headline"); 48 | const body = fd.get("body"); 49 | const headerImageFile = fd.get("headerImageFile"); 50 | createPost({ 51 | variables: { 52 | input: { 53 | post: { 54 | headline, 55 | body, 56 | headerImageFile 57 | } 58 | } 59 | } 60 | }); 61 | }} 62 | > 63 | 64 | 65 | 66 | 67 |