Commit 56196a5c authored by Sonja Happ's avatar Sonja Happ

image widget shows file based on objectURL, file can be selected, new image...

image widget shows file based on objectURL, file can be selected, new image widget defaults to no file selected #147
parent bd57f243
......@@ -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">
......
......@@ -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;
......
......@@ -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);
fileData = new Blob([file.data], {type: file.type});
objectURL = window.URL.createObjectURL(fileData);
console.log("Image created new file", fileData, "and objectID", objectURL)
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
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." />
)}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment