in memmory persistence for test-repo

src/backends/test-repo/implementation.js

@@ -5,6 +5,30 @@ function getSlug(path) {
   return m && m[1];
 }
 
+function getFileData(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = function() {
+      reject('Unable to read file');
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+// Only necessary in test-repo, where images won't actually be persisted on server
+function changeFilePathstoBase64(content, mediaFiles, base64Files) {
+  let _content = content;
+  mediaFiles.forEach((media, index) => {
+    const reg = new RegExp('\\b' + media.uri + '\\b', 'g');
+    _content = _content.replace(reg, base64Files[index]);
+  });
+
+  return _content;
+}
+
 export default class TestRepo {
   constructor(config) {
     this.config = config;
@@ -48,8 +72,19 @@ export default class TestRepo {
     ));
   }
 
-  persist(collection, entry, mediaFiles) {
+  persist(collection, entry, mediaFiles = []) {
-    alert('This will be the persisted data:\n' + entry.raw);
+    return new Promise((resolve, reject) => {
-    return Promise.resolve({collection, entry});
+      Promise.all(mediaFiles.map((imageProxy) => getFileData(imageProxy.file))).then(
+        (base64Files) => {
+          const content = changeFilePathstoBase64(entry.raw, mediaFiles, base64Files);
+          const folder = collection.get('folder');
+          const fileName = entry.path.substring(entry.path.lastIndexOf('/') + 1);
+
+          window.repoFiles[folder][fileName]['content'] = content;
+          resolve({collection, entry});
+        },
+        (error) => reject({collection, entry, error})
+      );
+    });
   }
 }

src/components/Widgets/ImageControl.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import ImageProxy from '../../valueObjects/ImageProxy';
 
+const MAX_DISPLAY_LENGTH = 50;
+
 export default class ImageControl extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      currentImage: {
+      currentImage: new ImageProxy(props.value, null, true)
-        file: null,
-        imageProxy: new ImageProxy(props.value, null, null, true)
-      }
     };
 
     this.revokeCurrentImage = this.revokeCurrentImage.bind(this);
@@ -21,14 +20,9 @@ export default class ImageControl extends React.Component {
     this.renderImageName = this.renderImageName.bind(this);
   }
 
-  componentWillUnmount() {
-    this.revokeCurrentImage();
-  }
-
   revokeCurrentImage() {
-    if (this.state.currentImage.file) {
+    if (this.state.currentImage && !this.state.currentImage.uploaded) {
-      this.props.onRemoveMedia(this.state.currentImage.file);
+      this.props.onRemoveMedia(this.state.currentImage);
-      window.URL.revokeObjectURL(this.state.currentImage.file);
     }
   }
 
@@ -67,17 +61,21 @@ export default class ImageControl extends React.Component {
     });
 
     if (file) {
-      this.props.onAddMedia(file);
+      imageRef = new ImageProxy(file.name, file);
-      imageRef = new ImageProxy(file.name, file.size, window.URL.createObjectURL(file));
+      this.props.onAddMedia(imageRef);
     }
 
     this.props.onChange(imageRef);
-    this.setState({currentImage: {file:file, imageProxy: imageRef}});
+    this.setState({currentImage: imageRef});
   }
 
   renderImageName() {
-    if (!this.state.currentImage.imageProxy) return null;
+    if (!this.state.currentImage) return null;
-    return this.state.currentImage.imageProxy.uri;
+    if (this.state.currentImage.uri.length < MAX_DISPLAY_LENGTH) {
+      return this.state.currentImage.uri;
+    }
+
+    return this.state.currentImage.uri.substring(0, MAX_DISPLAY_LENGTH) + '\u2026';
   }
 
   render() {

src/valueObjects/ImageProxy.js

@@ -3,12 +3,12 @@ export const setConfig = (configObj) => {
   config = configObj;
 };
 
-export default function ImageProxy(name, size, objectURL, uploaded = false) {
+export default function ImageProxy(value, file, uploaded = false) {
+  this.value = value;
+  this.file = file;
   this.uploaded = uploaded;
-  this.name = name;
+  this.uri = config.media_folder && !uploaded ? config.media_folder + '/' + value : value;
-  this.size = size || 0;
-  this.uri = config.media_folder && !uploaded ? config.media_folder + '/' + name : name;
   this.toString = function() {
-    return uploaded ? this.uri : objectURL;
+    return uploaded ? this.uri : window.URL.createObjectURL(this.file, {oneTimeOnly: true});
   };
 }