Maps an image file DOMString to its toString function

(So the File can be used straight into an image tag)

src/components/Widgets/ImageControl.js

@@ -3,11 +3,28 @@ import React from 'react';
 export default class ImageControl extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      currentImage: props.value
+    };
+
+    this.revokeCurrentImage = this.revokeCurrentImage.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleFileInputRef = this.handleFileInputRef.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleDragEnter = this.handleDragEnter.bind(this);
     this.handleDragOver = this.handleDragOver.bind(this);
+    this.renderImageName = this.renderImageName.bind(this);
+  }
+
+  componentWillUnmount() {
+    this.revokeCurrentImage();
+  }
+
+  revokeCurrentImage() {
+    if (this.state.currentImage instanceof File) {
+      window.URL.revokeObjectURL(this.state.currentImage);
+    }
   }
 
   handleFileInputRef(el) {
@@ -31,6 +48,7 @@ export default class ImageControl extends React.Component {
   handleChange(e) {
     e.stopPropagation();
     e.preventDefault();
+    this.revokeCurrentImage();
     const fileList = e.dataTransfer ? e.dataTransfer.files : e.target.files;
     const files = [...fileList];
     const imageType = /^image\//;
@@ -42,18 +60,40 @@ export default class ImageControl extends React.Component {
       }
     });
 
+    if (file) {
+      // Custom toString function on file, so it can be used on regular image fields
+      file.toString = function() {
+        return window.URL.createObjectURL(file);
+      };
+    }
+
     this.props.onChange(file);
+    this.setState({currentImage: file});
+  }
+
+  renderImageName() {
+    if (!this.state.currentImage) return null;
+
+    if (this.state.currentImage instanceof File) {
+      return this.state.currentImage.name;
+    } else if (typeof this.state.currentImage === 'string') {
+      return this.state.currentImage;
+    }
+
+    return null;
   }
 
   render() {
+    const imageName = this.renderImageName();
     return (
       <div
-          onClick={this.handleClick}
           onDragEnter={this.handleDragEnter}
           onDragOver={this.handleDragOver}
           onDrop={this.handleChange}
       >
-        Click or drop image here.
+        <span onClick={this.handleClick}>
+          {imageName ? imageName : 'Click or drop imag here.'}
+        </span>
         <input
             type="file"
             accept="image/*"