Refactor on upload media data fow

src/components/ControlPane.js

@@ -3,7 +3,7 @@ import Widgets from './Widgets';
 
 export default class ControlPane extends React.Component {
   controlFor(field) {
-    const { entry, getMedia, onChange, onAddMedia } = this.props;
+    const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
     const widget = Widgets[field.get('widget')] || Widgets._unknown;
     return React.createElement(widget.Control, {
       key: field.get('name'),
@@ -11,6 +11,7 @@ export default class ControlPane extends React.Component {
       value: entry.getIn(['data', field.get('name')]),
       onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
       onAddMedia: onAddMedia,
+      onRemoveMedia: onRemoveMedia,
       getMedia: getMedia
     });
   }

src/components/EntryEditor.js

@@ -5,7 +5,7 @@ import PreviewPane from './PreviewPane';
 export default class EntryEditor extends React.Component {
 
   render() {
-    const { collection, entry, getMedia, onChange, onAddMedia, onPersist } = this.props;
+    const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
     return <div>
       <h1>Entry in {collection.get('label')}</h1>
       <h2>{entry && entry.get('title')}</h2>
@@ -17,6 +17,7 @@ export default class EntryEditor extends React.Component {
               getMedia={getMedia}
               onChange={onChange}
               onAddMedia={onAddMedia}
+              onRemoveMedia={onRemoveMedia}
           />
         </div>
         <div className="cms-preview-pane" style={styles.pane}>

src/components/Widgets/ImageControl.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
+import MediaProxy from '../../valueObjects/MediaProxy';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -7,11 +8,6 @@ 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);
@@ -20,12 +16,6 @@ export default class ImageControl extends React.Component {
     this.renderImageName = this.renderImageName.bind(this);
   }
 
-  revokeCurrentImage() {
-    if (this.state.currentImage) {
-      //this.props.onRemoveMedia(this.state.currentImage);
-    }
-  }
-
   handleFileInputRef(el) {
     this._fileInput = el;
   }
@@ -47,7 +37,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\//;
@@ -59,21 +49,25 @@ export default class ImageControl extends React.Component {
       }
     });
 
+    this.props.onRemoveMedia(this.props.value);
     if (file) {
-      this.props.onAddMedia(file);
-      this.props.onChange(file.name);
-      this.setState({currentImage: file.name});
+      const mediaProxy = new MediaProxy(file.name, file);
+      this.props.onAddMedia(mediaProxy);
+      this.props.onChange(mediaProxy.uri);
     } else {
       this.props.onChange(null);
-      this.setState({currentImage: null});
     }
 
   }
 
   renderImageName() {
+    if (!this.props.value) return null;
+    if (this.value instanceof MediaProxy) {
+      return truncateMiddle(this.props.value.uri, MAX_DISPLAY_LENGTH);
+    } else {
+      return truncateMiddle(this.props.value, MAX_DISPLAY_LENGTH);
+    }
 
-    if (!this.state.currentImage) return null;
-    return truncateMiddle(this.props.getMedia(this.state.currentImage).uri, MAX_DISPLAY_LENGTH);
   }
 
   render() {