Support for file uploads

bhch · bhch · commit 3790ad97ca90 · 2021-08-27T17:18:55.000+05:30
diff --git a/dev/index.html b/dev/index.html
@@ -98,6 +98,61 @@
         .rjf-remove-button:hover + .rjf-form-group {
             background-color: #fff3f3;
         }
+        .rjf-form-text {
+            display: block;
+            font-size: 0.88em;
+            color: #777;
+            margin-top: 8px;
+        }
+        .rjf-current-file-name {
+            font-size: 0.9em;
+            margin-top: 0.5em;
+            margin-bottom: 0.5em;
+        }
+        .rjf-current-file-name span {
+            display: inline-block;
+            vertical-align: bottom;
+            background-color: #eee;
+            padding: 0 4px;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .rjf-loader {
+            width: 32px;
+            height: 32px;
+            clear: both;
+            margin: 20px auto;
+            display: inline-block;
+            margin: 0;
+            margin-right: 0.25em;
+            height: 1em;
+            width: 1em;
+            vertical-align: middle;;
+            border: 2px #a7e6f0 solid;
+            border-top-color: #1191a6;
+            border-radius: 50%;
+            -webkit-animation: loaderRotate .4s infinite linear;
+            animation: loaderRotate .4s infinite linear;
+        }
+
+        @-webkit-keyframes loaderRotate {
+            from {
+                -webkit-transform: rotate(0deg);
+            }
+            to {
+                -webkit-transform: rotate(359deg);
+            }
+        }
+        @keyframes loaderRotate {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(359deg);
+            }
+        }
     </style>
 </head>
 <body>
@@ -159,7 +214,8 @@ <h1>JSON Editor</h1>
             min_items: 0,
             items: {
                 type: 'string',
-                title: 'Tag'
+                title: 'Tag',
+                format: 'file-url'
             }
         },
     });
diff --git a/src/components/form.js b/src/components/form.js
@@ -1,4 +1,6 @@
 import Button from './buttons';
+import Loader from './loaders';
+import {EditorContext, getCsrfCookie} from '../util';
 
 
 export function FormInput({label, help_text, error, inputRef, ...props}) {
@@ -128,12 +130,15 @@ export function dataURItoBlob(dataURI) {
 
 
 export class FormFileInput extends React.Component {
+    static contextType = EditorContext;
+
     constructor(props) {
         super(props);
 
         this.state = {
             value: props.value,
-            fileName: this.getFileName()
+            fileName: this.getFileName(),
+            loading: false
         };
 
         this.inputRef = React.createRef();
@@ -176,31 +181,71 @@ export class FormFileInput extends React.Component {
 
     handleChange = (e) => {
         if (this.props.type === 'data-url') {
+            let file = e.target.files[0];
+            let fileName = file.name
 
-        }
-
-        let file = e.target.files[0];
-        let fileName = file.name
+            let reader = new FileReader();
 
-        let reader = new FileReader();
+            reader.onload = () => {
 
-        reader.onload = () => {
+                // this.setState({src: reader.result});
 
-            // this.setState({src: reader.result});
+                // we create a fake event object
+                let event = {
+                    target: {
+                        type: 'text',
+                        value: this.addNameToDataURL(reader.result, fileName),
+                        name: this.props.name
+                    }
+                };
 
-            // we create a fake event object
-            let event = {
-                target: {
-                    type: 'text',
-                    value: this.addNameToDataURL(reader.result, fileName),
-                    name: this.props.name
-                }
-            };
+                this.props.onChange(event);
 
-            this.props.onChange(event);
+            }
+            reader.readAsDataURL(file);
+        } else if (this.props.type === 'file-url') {
+            let endpoint = this.context.fileUploadEndpoint;
+            if (!endpoint) {
+                console.error(
+                    "Error: fileUploadEndpoint option need to be passed "
+                    + "while initializing editor for enabling file uploads.");
+                alert("Files can't be uploaded.");
+                return;
+            }
+
+            this.setState({loading: true});
+
+            let formData = new FormData();
+            formData.append('file', e.target.files[0]);
+
+            fetch(endpoint, {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': getCsrfCookie(),
+                },
+                body: formData
+            })
+            .then((response) => response.json())
+            .then((result) => {
+                // we create a fake event object
+                let event = {
+                    target: {
+                        type: 'text',
+                        value: result.file_path,
+                        name: this.props.name
+                    }
+                };
+
+                this.props.onChange(event);
+                this.setState({loading: false});
+            })
+            .catch((error) => {
+                alert('Something went wrong while uploading file');
+                console.error('Error:', error);
+                this.setState({loading: false});
+            });
 
         }
-        reader.readAsDataURL(file);
 
     }
 
@@ -220,10 +265,14 @@ export class FormFileInput extends React.Component {
                     {this.state.value && 
                         <div className="rjf-current-file-name">Current file: <span>{this.state.fileName}</span></div>
                     }
-                    {this.state.value && 'Change:'}
+                    {this.state.value && !this.state.loading && 'Change:'}
+                    {this.state.loading ?
+                        <div className="rjf-file-field-loading"><Loader/> Uploading...</div>
+                    : 
                     <div className="rjf-file-field-input">
                         <FormInput {...props} inputRef={this.inputRef} />
                     </div>
+                    }
                     </div>
             </div>
         );
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,9 +1,11 @@
 import Button from './buttons';
 import {FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput} from './form';
 import {FormRow, FormGroup} from './containers';
+import Loader from './loaders';
 
 export {
     Button,
     FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
-    FormRow, FormGroup
+    FormRow, FormGroup,
+    Loader,
 };
diff --git a/src/components/loaders.js b/src/components/loaders.js
@@ -0,0 +1,3 @@
+export default function Loader (props) {
+    return <div className="rjf-loader"></div>;
+}
diff --git a/src/data.js b/src/data.js
@@ -5,12 +5,14 @@ export function getBlankObject(schema) {
         let value = schema.keys[key];
         let type = value.type;
 
-        if (type === 'string')
-            keys[key] = ''; 
-        else if (type === 'array')
+        if (type === 'array')
             keys[key] = getBlankArray(value);
         else if (type === 'object')
             keys[key] = getBlankObject(value);
+        else if (type === 'string')
+            keys[key] = '';
+        else if (schema.type === 'number')
+            return '';
     }
 
     return keys;
@@ -21,12 +23,14 @@ export function getBlankArray(schema) {
     let items = [];
     let type = schema.items.type;
 
-    if (type === 'string')
-        items.push('');
-    else if (type === 'array')
+    if (type === 'array')
         items.push(getBlankArray(schema.items))
     else if (type === 'object')
         items.push(getBlankObject(schema.items));
+    else if (type === 'string')
+        items.push('');
+    else if (schema.type === 'number')
+        items.push('');
 
     return items;
 }
@@ -40,6 +44,8 @@ export function getBlankData(schema) {
         return getBlankObject(schema);
     } else if (schema.type === 'string') {
         return '';
+    } else if (schema.type === 'number') {
+        return '';
     }
 }
 
diff --git a/src/form.js b/src/form.js
@@ -1,5 +1,6 @@
 import {getBlankData, getSyncedData} from './data';
 import {getArrayFormRow, getObjectFormRow} from './ui';
+import {EditorContext} from './util';
 
 
 export default class Form extends React.Component {
@@ -170,7 +171,13 @@ export default class Form extends React.Component {
         return (
             <div className="rjf-form-wrapper">
                 <fieldset className="module aligned">
+                    <EditorContext.Provider 
+                        value={{
+                            fileUploadEndpoint: this.props.fileUploadEndpoint
+                        }}
+                    >
                     {this.getFields()}
+                    </EditorContext.Provider>
                 </fieldset>
             </div>
         );
diff --git a/src/renderer.js b/src/renderer.js
@@ -6,13 +6,15 @@ export default function JSONForm(config) {
     this.dataInputId = config.dataInputId;
     this.schema = config.schema;
     this.data = config.data;
+    this.fileUploadEndpoint = config.fileUploadEndpoint;
 
     this.render = function() {
         ReactDOM.render(
             <Form
                 schema={this.schema}
                 dataInputId={this.dataInputId}
                 data={this.data}
+                fileUploadEndpoint={this.fileUploadEndpoint}
             />,
             document.getElementById(this.containerId)
         );
diff --git a/src/util.js b/src/util.js
@@ -1,3 +1,6 @@
+export const EditorContext = React.createContext();
+
+
 export function capitalize(string) {
     if (!string)
         return '';
@@ -12,4 +15,12 @@ export function getVerboseName(name) {
 
     name = name.replace(/_/g, ' ');
     return capitalize(name);
-}
+}
+
+
+export function getCsrfCookie() {
+    if ((document.cookie.split(';').filter((item) => item.trim().indexOf('csrftoken=') === 0)).length) {
+        return document.cookie.split(';').filter((item) => item.trim().indexOf('csrftoken=') === 0)[0].split('=')[1];
+    }
+    return null;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Loader (props) {`
	`2`	`+ return <div className="rjf-loader"></div>;`
	`3`	`+}`