diff --git a/src/file/file-store.js b/src/file/file-store.js index 6843d7a..659748e 100644 --- a/src/file/file-store.js +++ b/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) } diff --git a/src/widget/edit-widget/edit-widget-image-control.js b/src/widget/edit-widget/edit-widget-image-control.js index fdef5ff..de6eaf9 100644 --- a/src/widget/edit-widget/edit-widget-image-control.js +++ b/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
Image - this.props.handleChange(e)}> + this.handleFileChange(e)}> {this.props.files.length === 0 ? ( ) : ( - this.props.files.reduce((entries, file, index) => { - entries.push(); - return entries; - }, [ - - ]) + this.props.files.map((file, index) => ( + + )) )} diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index c5b8a39..d5a555b 100644 --- a/src/widget/widget-factory.js +++ b/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; diff --git a/src/widget/widgets/image.js b/src/widget/widgets/image.js index 3d24227..92ef00e 100644 --- a/src/widget/widgets/image.js +++ b/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 (
{file ? ( - {file.name} e.preventDefault()} /> + {file.name} e.preventDefault()} /> ) : ( - questionmark e.preventDefault()} /> + No file selected. )}
);