From 56196a5c98682bfe3c1c92dfc662c6ba8b4cf2eb Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Wed, 13 May 2020 15:22:21 +0200
Subject: [PATCH] image widget shows file based on objectURL, file can be
 selected, new image widget defaults to no file selected #147

---
 .../edit-widget/edit-widget-image-control.js  | 23 ++++----
 src/widget/widget-factory.js                  |  2 +-
 src/widget/widgets/image.js                   | 57 +++++++++++++------
 3 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/src/widget/edit-widget/edit-widget-image-control.js b/src/widget/edit-widget/edit-widget-image-control.js
index 0f2c9e7..abfd517 100644
--- a/src/widget/edit-widget/edit-widget-image-control.js
+++ b/src/widget/edit-widget/edit-widget-image-control.js
@@ -21,6 +21,7 @@ import {FormGroup, FormControl, FormLabel, Button, ProgressBar} from 'react-boot
 import AppDispatcher from '../../common/app-dispatcher';
 
 class EditImageWidgetControl extends React.Component {
+
   constructor(props) {
     super(props);
 
@@ -43,7 +44,7 @@ class EditImageWidgetControl extends React.Component {
 
     for (let key in this.state.fileList) {
       if (this.state.fileList.hasOwnProperty(key) && this.state.fileList[key] instanceof File) {
-        formData.append(key, this.state.fileList[key]);
+        formData.append("file", this.state.fileList[key]);
       }
     }
 
@@ -68,7 +69,6 @@ class EditImageWidgetControl extends React.Component {
   }
 
   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 } });
   }
 
@@ -80,7 +80,14 @@ class EditImageWidgetControl extends React.Component {
       isCustomProperty = false;
     }
 
-    console.log("edit image: files: ", this.props.files, "widget", this.state.widget, "upload file list:", this.state.fileList);
+    let fileOptions;
+    if (this.props.files.length > 0){
+      fileOptions = this.props.files.map((file, index) => (
+        <option key={index+1} value={file.id}>{file.name}</option>
+      ))
+    } else {
+      fileOptions.set = <option disabled value style={{ display: 'none' }}>No files found, please upload one first.</option>
+    }
 
     return <div>
       <FormGroup controlId="file">
@@ -89,15 +96,7 @@ class EditImageWidgetControl extends React.Component {
           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.map((file, index) => (
-              <option key={index+1} value={file.id}>{file.name}</option>
-            ))
-          )}
-        </FormControl>
+          onChange={(e) => this.handleFileChange(e)}>{fileOptions} </FormControl>
       </FormGroup>
 
       <FormGroup controlId="upload">
diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js
index 7fc407d..a886957 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -122,7 +122,7 @@ class WidgetFactory {
                 widget.width = 200;
                 widget.height = 200;
                 widget.customProperties.lockAspect = true;
-                widget.customProperties.file = 2; // ID of image file, -1 means non selected
+                widget.customProperties.file = -1; // ID of image file, -1 means non selected
                 break;
             case 'Button':
                 widget.minWidth = 100;
diff --git a/src/widget/widgets/image.js b/src/widget/widgets/image.js
index 2fea54b..393412b 100644
--- a/src/widget/widgets/image.js
+++ b/src/widget/widgets/image.js
@@ -21,39 +21,64 @@ import AppDispatcher from '../../common/app-dispatcher';
 
 class WidgetImage extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      file: undefined,
+    }
+  }
+
   componentDidMount() {
     // Query the image referenced by the widget
     let widgetFile = this.props.widget.customProperties.file;
-    if (widgetFile !== -1 && !this.props.files.find(file => file.id === widgetFile)) {
+    if (widgetFile !== -1 && this.state.file === undefined) {
       AppDispatcher.dispatch({
-        type: 'files/start-load',
+        type: 'files/start-download',
         data: widgetFile,
         token: this.props.token
       });
     }
   }
 
-  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);
+  componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
 
-        fileData = new Blob([file.data],  {type: file.type});
-        objectURL = window.URL.createObjectURL(fileData);
-        console.log("Image created new file", fileData, "and objectID", objectURL)
+    let file = this.props.files.find(file => file.id === parseInt(this.props.widget.customProperties.file, 10));
+
+    if(file !== undefined){
+      if(this.state.file === undefined || (this.state.file.id !== file.id )){
+
+        // if file has changed, download new file
+        if (this.state.file !== undefined && this.state.file.id !== file.id){
+          AppDispatcher.dispatch({
+            type: 'files/start-download',
+            data: file.id,
+            token: this.props.token
+          });
+        }
+
+        // either first time update or file id has changed
+        this.setState({file:file})
       }
     }
 
-    console.log("Image: has data:", fileHasData);
+  }
+
+  imageError(e){
+    console.error("Image ", this.state.file.name, "cannot be displayed.");
+  }
+
+  render() {
+
+    let objectURL=''
+    if(this.state.file !== undefined && this.state.file.objectURL !== undefined) {
+      objectURL = this.state.file.objectURL
+    }
 
     return (
       <div className="full">
-        {file ? (
-          <img className="full" alt={file.name} src={fileHasData ? objectURL : ''} onDragStart={e => e.preventDefault()} />
+        {objectURL !== '' ? (
+          <img onError={(e) => this.imageError(e)} className="full" alt={this.state.file.name} src={objectURL} onDragStart={e => e.preventDefault()} />
         ) : (
           <img className="full" alt="No file selected." />
         )}