Add support for file input (data-url)

Author: bhch

src/components/form.js

@@ -1,8 +1,14 @@
-export function FormInput({label, help_text, error, ...props}) {
+import Button from './buttons';
+
+
+export function FormInput({label, help_text, error, inputRef, ...props}) {
 
     if (props.type === 'string')
         props.type = 'text'
 
+    if (inputRef)
+        props.ref = inputRef;
+
     return (
         <div>
             {label && <label>{label}</label>}
@@ -86,7 +92,140 @@ export function FormSelectInput({label, help_text, error, value, options, ...pro
     );
 }
 
+export function dataURItoBlob(dataURI) {
+      // Split metadata from data
+      const splitted = dataURI.split(",");
+      // Split params
+      const params = splitted[0].split(";");
+      // Get mime-type from params
+      const type = params[0].replace("data:", "");
+      // Filter the name property from params
+      const properties = params.filter(param => {
+            return param.split("=")[0] === "name";
+      });
+      // Look for the name and use unknown if no name property.
+      let name;
+      if (properties.length !== 1) {
+            name = "unknown";
+      } else {
+            // Because we filtered out the other property,
+            // we only have the name case here.
+            name = properties[0].split("=")[1];
+      }
+
+      // Built the Uint8Array Blob parameter from the base64 string.
+      const binary = atob(splitted[1]);
+      const array = [];
+      for (let i = 0; i < binary.length; i++) {
+            array.push(binary.charCodeAt(i));
+      }
+      // Create the blob object
+      const blob = new window.Blob([new Uint8Array(array)], { type });
+
+      return {blob, name};
+}
+
+
+
+export class FormFileInput extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            value: props.value,
+            fileName: this.getFileName()
+        };
+
+        this.inputRef = React.createRef();
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this.props.value !== prevProps.value) {
+            this.setState({
+                value: this.props.value, 
+                fileName: this.getFileName()
+            });
+        }
+    }
+
+    getFileName = () => {
+        if (!this.props.value)
+            return '';
+
+        if (this.props.type === 'data-url') {
+            return this.extractFileInfo(this.props.value).name;
+        } else if (this.props.type === 'file-url') {
+            return this.props.value;
+        } else {
+            return 'Unknown file';
+        }
+    }
+
+    extractFileInfo = (dataURL) => {
+        const {blob, name} = dataURItoBlob(dataURL);
+        return {
+            name: name,
+            size: blob.size,
+            type: blob.type
+        }
+    }
+
+    addNameToDataURL = (dataURL, name) => {
+        return dataURL.replace(';base64', ';name=' + encodeURIComponent(name) + ';base64');
+    }
 
-export function FileInput(props) {
-    return <FormInput {...props} />
+    handleChange = (e) => {
+        if (this.props.type === 'data-url') {
+
+        }
+
+        let file = e.target.files[0];
+        let fileName = file.name
+
+        let reader = new FileReader();
+
+        reader.onload = () => {
+
+            // 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
+                }
+            };
+
+            this.props.onChange(event);
+
+        }
+        reader.readAsDataURL(file);
+
+    }
+
+    showFileBrowser = () => {
+        this.inputRef.current.click();
+    }
+
+    render() {
+        let {label, value, ...props} = {value, ...this.props};
+        props.type = 'file';
+        props.onChange = this.handleChange;
+
+        return (
+            <div>
+                {label && <label>{label}</label>}
+                <div className="rjf-file-field">
+                    {this.state.value && 
+                        <div className="rjf-current-file-name">Current file: <span>{this.state.fileName}</span></div>
+                    }
+                    {this.state.value && 'Change:'}
+                    <div className="rjf-file-field-input">
+                        <FormInput {...props} inputRef={this.inputRef} />
+                    </div>
+                    </div>
+            </div>
+        );
+    }
 }

src/components/index.js

@@ -1,9 +1,9 @@
 import Button from './buttons';
-import {FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FileInput} from './form';
+import {FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput} from './form';
 import {FormRow, FormGroup} from './containers';
 
 export {
     Button,
-    FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FileInput,
+    FormInput, FormCheckInput, FormRadioInput, FormSelectInput, FormFileInput,
     FormRow, FormGroup
 };

src/ui.js

@@ -1,6 +1,6 @@
 import {getBlankData} from './data';
 import {Button, FormInput, FormCheckInput, FormRadioInput, FormSelectInput,
-    FormRow, FormGroup} from './components';
+    FormFileInput, FormRow, FormGroup} from './components';
 import {getVerboseName} from './util';
 
 
@@ -42,8 +42,17 @@ function FormField(props) {
 
     switch (type) {
         case 'string':
-            inputProps.type = 'text';
             InputField = FormInput;
+
+            if (props.schema.format) {
+                if (props.schema.format === 'data-url' || props.schema.format === 'file-url') {
+                    InputField = FormFileInput;
+                }
+                inputProps.type = props.schema.format;
+            }
+            else {
+                inputProps.type = 'text';
+            }
             break;
         case 'number':
             inputProps.type = 'number';
@@ -77,7 +86,7 @@ function FormField(props) {
         <InputField 
             {...inputProps}
             label={
-                props.editable ? <span>{porps.schema.title} <Button className="edit" onClick={props.onEdit} title="Edit">Edit</Button></span>
+                props.editable ? <span>{props.schema.title} <Button className="edit" onClick={props.onEdit} title="Edit">Edit</Button></span>
                 :
                 props.schema.title
             }