persistence draft

Persisting individual media file objects

src/components/ControlPane.js

@@ -9,7 +9,8 @@ export default class ControlPane extends React.Component {
       key: field.get('name'),
       field: field,
       value: entry.getIn(['data', field.get('name')]),
-      onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value))
+      onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value)),
+      onAddMedia: (mediaFile) => this.props.onAddMedia(mediaFile)
     });
   }
 

src/components/EntryEditor.js

@@ -1,18 +1,32 @@
 import React from 'react';
+import Immutable from 'immutable';
 import ControlPane from './ControlPane';
 import PreviewPane from './PreviewPane';
 
 export default class EntryEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {entry: props.entry};
+    this.state = {
+      entry: props.entry,
+      mediaFiles: Immutable.List()
+    };
     this.handleChange = this.handleChange.bind(this);
+    this.handleAddMedia = this.handleAddMedia.bind(this);
+    this.handleSave = this.handleSave.bind(this);
   }
 
   handleChange(entry) {
     this.setState({entry: entry});
   }
 
+  handleAddMedia(mediaFile) {
+    this.setState({mediaFiles: this.state.mediaFiles.push(mediaFile)});
+  }
+
+  handleSave() {
+    this.props.onPersist(this.state.entry, this.state.mediaFiles);
+  }
+
   render() {
     const { collection, entry } = this.props;
 
@@ -21,12 +35,18 @@ export default class EntryEditor extends React.Component {
       <h2>{entry && entry.get('title')}</h2>
       <div className="cms-container" style={styles.container}>
         <div className="cms-control-pane" style={styles.pane}>
-          <ControlPane collection={collection} entry={this.state.entry} onChange={this.handleChange}/>
+          <ControlPane
+              collection={collection}
+              entry={this.state.entry}
+              onChange={this.handleChange}
+              onAddMedia={this.handleAddMedia}
+          />
         </div>
         <div className="cms-preview-pane" style={styles.pane}>
           <PreviewPane collection={collection} entry={this.state.entry}/>
         </div>
       </div>
+      <button onClick={this.handleSave}>Save</button>
     </div>;
   }
 }

src/components/Widgets/ImageControl.js

@@ -1,14 +1,18 @@
 import React from 'react';
+import ImageProxy from '../../valueObjects/ImageProxy';
 
 export default class ImageControl extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      currentImage: props.value
+      currentImage: {
+        file: null,
+        imageProxy: new ImageProxy(props.value, null, null, true)
+      }
     };
 
-    this.revokeCurrentImage = this.revokeCurrentImage.bind(this);
+    this.revokeCurrentObjectURL = this.revokeCurrentObjectURL.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleFileInputRef = this.handleFileInputRef.bind(this);
     this.handleClick = this.handleClick.bind(this);
@@ -18,12 +22,12 @@ export default class ImageControl extends React.Component {
   }
 
   componentWillUnmount() {
-    this.revokeCurrentImage();
+    this.revokeCurrentObjectURL();
   }
 
-  revokeCurrentImage() {
-    if (this.state.currentImage instanceof File) {
-      window.URL.revokeObjectURL(this.state.currentImage);
+  revokeCurrentObjectURL() {
+    if (this.state.currentImage.file) {
+      window.URL.revokeObjectURL(this.state.currentImage.file);
     }
   }
 
@@ -48,7 +52,8 @@ export default class ImageControl extends React.Component {
   handleChange(e) {
     e.stopPropagation();
     e.preventDefault();
-    this.revokeCurrentImage();
+    this.revokeCurrentObjectURL();
+    let imageRef = null;
     const fileList = e.dataTransfer ? e.dataTransfer.files : e.target.files;
     const files = [...fileList];
     const imageType = /^image\//;
@@ -61,27 +66,17 @@ 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.onAddMedia(file);
+      imageRef = new ImageProxy(file.name, file.size, window.URL.createObjectURL(file));
     }
 
-    this.props.onChange(file);
-    this.setState({currentImage: file});
+    this.props.onChange(imageRef);
+    this.setState({currentImage: {file:file, imageProxy: imageRef}});
   }
 
   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') {
-      const fileName = this.state.currentImage;
-      return fileName.substring(fileName.lastIndexOf('/') + 1);
-    }
-
-    return null;
+    if (!this.state.currentImage.imageProxy) return null;
+    return this.state.currentImage.imageProxy.uri;
   }
 
   render() {