WIP: Work on saving and showing images in image widget using objectURL (not working yet)

src/file/file-store.js

@@ -27,6 +27,21 @@ class FileStore extends ArrayStore {
     super('files', FilesDataManager);
   }
 
+  saveFile(state, action){
+
+    // save file data file
+    let fileID = parseInt(action.data.id)
+    console.log("Received file", action);
+    for (let f of state){
+      if (f.id === fileID){
+        f["data"] = action.data.data;
+        f.type = action.data.type;
+        console.log("Saving file data to file id", fileID);
+      }
+    }
+
+  }
+
   reduce(state, action) {
     switch (action.type) {
       case 'files/start-upload':
@@ -46,6 +61,7 @@ class FileStore extends ArrayStore {
         } else {
           // in this case a file is contained in the response (no JSON)
           // TODO we have to extract and process the file here (=save it somewhere?)
+          this.saveFile(state, action)
           return super.reduce(state, action)
         }
 

src/widget/edit-widget/edit-widget-image-control.js

@@ -20,7 +20,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel, Button, ProgressBar } from 'react-bootstrap';
+import {FormGroup, FormControl, FormLabel, Button, ProgressBar} from 'react-bootstrap';
 
 import AppDispatcher from '../../common/app-dispatcher';
 
@@ -29,11 +29,7 @@ class EditImageWidgetControl extends React.Component {
     super(props);
 
     this.state = {
-      widget: {
-        customProperties:{
-        file: ''
-        }
-      },
+      widget: { },
       fileList: null,
       progress: 0
     };
@@ -61,7 +57,9 @@ class EditImageWidgetControl extends React.Component {
       data: formData,
       token: this.props.sessionToken,
       progressCallback: this.uploadProgress,
-      finishedCallback: this.clearProgress
+      finishedCallback: this.clearProgress,
+      objectType: "widget",
+      objectID: this.props.widget.id,
     });
   }
 
@@ -73,20 +71,35 @@ class EditImageWidgetControl extends React.Component {
     this.setState({ progress: 0 });
   }
 
+  handleFileChange(e){
+    console.log("Changing image: ", this.props.controlId, "to", e.target.value)
+    this.props.handleChange({ target: { id: this.props.controlId, value: e.target.value } });
+  }
+
   render() {
+
+    let parts = this.props.controlId.split('.');
+    let isCustomProperty = true;
+    if(parts.length === 1){
+      isCustomProperty = false;
+    }
+
+    console.log("edit image: files: ", this.props.files, "widget", this.state.widget, "upload file list:", this.state.fileList);
+
     return <div>
       <FormGroup controlId="file">
         <FormLabel>Image</FormLabel>
-        <FormControl className="select" value={this.state.widget.customProperties.file} onChange={(e) => this.props.handleChange(e)}>
+        <FormControl
+          as="select"
+          placeholder="Select image file"
+          value={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
+          onChange={(e) => this.handleFileChange(e)}>
           {this.props.files.length === 0 ? (
             <option disabled value style={{ display: 'none' }}>No images found, please upload one first.</option>
           ) : (
-            this.props.files.reduce((entries, file, index) => {
-              entries.push(<option key={++index} value={file.id}>{file.name}</option>);
-              return entries;
-            }, [
-              <option key={0} value=''>Please select one image</option>
-            ])
+            this.props.files.map((file, index) => (
+              <option key={index+1} value={file.id}>{file.name}</option>
+            ))
           )}
         </FormControl>
       </FormGroup>

src/widget/widget-factory.js

@@ -124,7 +124,7 @@ class WidgetFactory {
                 widget.width = 200;
                 widget.height = 200;
                 widget.customProperties.lockAspect = true;
-                widget.customProperties.file = 1; // ID of image file, -1 means non selected
+                widget.customProperties.file = 2; // ID of image file, -1 means non selected
                 break;
             case 'Button':
                 widget.minWidth = 100;

src/widget/widgets/image.js

@@ -22,7 +22,6 @@
 import React from 'react';
 
 import AppDispatcher from '../../common/app-dispatcher';
-import config from '../../config';
 
 class WidgetImage extends React.Component {
 
@@ -40,13 +39,27 @@ class WidgetImage extends React.Component {
 
   render() {
     const file = this.props.files.find(file => file.id === this.props.widget.customProperties.file);
+    let fileHasData = false;
+    let fileData, objectURL;
+    if (file){
+      fileHasData = file.hasOwnProperty("data");
+      if (fileHasData){
+        //console.log("File data: ", file.data);
+
+        fileData = new Blob([file.data],  {type: file.type});
+        objectURL = window.URL.createObjectURL(fileData);
+        console.log("Image created new file", fileData, "and objectID", objectURL)
+      }
+    }
+
+    console.log("Image: has data:", fileHasData);
 
     return (
       <div className="full">
         {file ? (
-          <img className="full" alt={file.name} src={'/' + config.publicPathBase + file.path} onDragStart={e => e.preventDefault()} />
+          <img className="full" alt={file.name} src={fileHasData ? objectURL : ''} onDragStart={e => e.preventDefault()} />
         ) : (
-          <img className="full" alt="questionmark" src={'/' + config.publicPathBase + 'missing-image.png'} onDragStart={e => e.preventDefault()} />
+          <img className="full" alt="No file selected." />
         )}
       </div>
     );