+file upload +Content relations

package-lock.json

@@ -2182,6 +2182,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.1.0.tgz",
+      "integrity": "sha512-sLzVM3zCCmmDtDNhI0i96k6PUztkotSOXqE4kDGQt/6iDi5M+H0srjeF+QC6jN581l4X/Zq3Zu/tgcErEssavg=="
+    },
     "autoprefixer": {
       "version": "9.8.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz",
@@ -5279,6 +5284,14 @@
         "schema-utils": "^1.0.0"
       }
     },
+    "file-selector": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.12.tgz",
+      "integrity": "sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -9890,6 +9903,16 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-dropzone": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.1.tgz",
+      "integrity": "sha512-x/6wqRHaR8jsrNiu/boVMIPYuoxb83Vyfv77hO7/3ZRn8Pr+KH5onsCsB8MLBa3zdJl410C5FXPUINbu16XIzw==",
+      "requires": {
+        "attr-accept": "^2.0.0",
+        "file-selector": "^0.1.12",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",

package.json

@@ -6,6 +6,7 @@
     "graphql-request": "^1.8.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-dropzone": "^11.0.1",
     "react-scripts": "3.0.1",
     "react-select": "^3.1.0",
     "react-sortable-hoc": "^1.11.0"

src/App.css

@@ -184,3 +184,11 @@ th {
 .SortableCell  button {
     width: 50px;
 }
+
+section.drop {
+    background-color: #FDD;
+    text-align: center;
+    border: 2px solid black;
+    border-radius: 10px;
+}
+

src/App.js

@@ -3,6 +3,7 @@ import logo from './logo.svg';
 import './App.css';
 import Select from 'react-select/async'
 import {sortableContainer, sortableElement} from 'react-sortable-hoc';
+import Dropzone from 'react-dropzone'
 
 import { GraphQLClient } from 'graphql-request';
 
@@ -248,7 +249,9 @@ const ModelView = ({model, models={}, options, components:Components={Search, Co
         }
     },[search, model])
 
-    console.log(Components)
+    //console.log(Components)
+    //
+    const Add = options.add[model.name] || "button"
 
     return (
         <>
@@ -262,11 +265,11 @@ const ModelView = ({model, models={}, options, components:Components={Search, Co
                                 sort: [{[sort]: cursorCalls.sort[0][sort] === 1 ? -1 : 1}]
                             })}/>
 
-                <button onClick={() => { 
-                    (new model).save()
+                <Add onClick={() => { 
+                    if (Add === 'button') (new model).save()
                     setCursorCalls({...cursorCalls, sort: [{_id: -1}]})
                     setSearch('')
-                }}>+</button>
+                }} model={model}>+</Add>
                 {records && <Components.Grid 
                                 models={models}
                                 options={options}
@@ -362,7 +365,8 @@ const defaultAdminOptions =
                 color:(props) => <span style={{backgroundColor: props.value}}>{props.value}</span>
             },
             relations: {
-                Image: ({children}) => <span className="ImageRelation"><img src={localStorage.url + children.url}/>{children.originalFileName}</span>
+                Image: ({children}) => <span className="ImageRelation"><img src={localStorage.url + children.url}/>{children.originalFileName}</span>,
+                Content: ({children}) => <span className="ImageRelation"><img src={localStorage.url + children.url}/>{children.originalFileName}</span>
             },
             models: {
 
@@ -412,6 +416,35 @@ const defaultAdminOptions =
             models: {
 
             }
+        },
+
+        add: {
+            Content({model, onClick}){
+                return (
+                    <Dropzone onDrop={async acceptedFiles => {
+                        await Promise.all(acceptedFiles.map(file => {
+                            const body = new FormData
+                            body.append('upload',file)
+                            fetch(`${localStorage.url}upload`, {
+                                method: "POST",
+                                headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
+                                body
+                            })
+                        }))
+                        onClick()
+                    }
+                    }>
+                    {({getRootProps, getInputProps}) => (
+                        <section className='drop'>
+                        <div {...getRootProps()}>
+                        <input {...getInputProps()} />
+                        <p>Drag 'n' drop some files here, or click to select files</p>
+                        </div>
+                        </section>
+                    )}
+                        </Dropzone>
+                )
+            }
         }
     }