updated thumbnail to store as blob

react/components/Preview/index.jsx

@@ -10,25 +10,31 @@ class Preview extends React.Component {
     };
   }
   componentDidMount () {
-    this.previewFile(this.props.file);
+    this.setPreviewImageSource(this.props.file);
   }
   componentWillReceiveProps (newProps) {
     if (newProps.file !== this.props.file) {
-      this.previewFile(newProps.file);
+      this.setPreviewImageSource(newProps.file);
     }
     if (newProps.thumbnail !== this.props.thumbnail) {
-      this.setState({imgSource: (newProps.thumbnail || this.state.defaultThumbnail)});
+      this.setPreviewImageSourceFromFile(newProps.thumbnail);
     }
   }
-  previewFile (file) {
+  setPreviewImageSourceFromFile (file) {
+    const previewReader = new FileReader();
+    previewReader.readAsDataURL(file);
+    previewReader.onloadend = () => {
+      this.setState({imgSource: previewReader.result});
+    };
+  }
+  setPreviewImageSource (file) {
     if (file.type !== 'video/mp4') {
-      const previewReader = new FileReader();
-      previewReader.readAsDataURL(file);
-      previewReader.onloadend = () => {
-        this.setState({imgSource: previewReader.result});
-      };
+      this.setPreviewImageSourceFromFile(file);
     } else {
-      this.setState({imgSource: (this.props.thumbnail || this.state.defaultThumbnail)});
+      if (this.props.thumbnail) {
+        this.setPreviewImageSourceFromFile(this.props.thumbnail);
+      }
+      this.setState({imgSource: this.state.defaultThumbnail});
     }
   }
   render () {
@@ -46,7 +52,7 @@ class Preview extends React.Component {
 Preview.propTypes = {
   dimPreview: PropTypes.bool.isRequired,
   file      : PropTypes.object.isRequired,
-  thumbnail : PropTypes.string,
+  thumbnail : PropTypes.object,
 };
 
 export default Preview;

react/containers/PublishThumbnailInput/view.jsx

@@ -1,5 +1,18 @@
 import React from 'react';
 
+function dataURItoBlob(dataURI) {
+  // convert base64/URLEncoded data component to raw binary data held in a string
+  let byteString = atob(dataURI.split(',')[1]);
+  // separate out the mime component
+  let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+  // write the bytes of the string to a typed array
+  let ia = new Uint8Array(byteString.length);
+  for (var i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  return new Blob([ia], {type: mimeString});
+}
+
 class PublishThumbnailInput extends React.Component {
   constructor (props) {
     super(props);
@@ -68,7 +81,9 @@ class PublishThumbnailInput extends React.Component {
     // take a snapshot
     const snapshot = this.takeSnapShot();
     // set the thumbnail in redux store
-    if (snapshot) this.props.onThumbnailFileSelect(snapshot);
+    if (snapshot) {
+      this.props.onThumbnailFileSelect(snapshot);
+    }
   }
   takeSnapShot () {
     let video = document.getElementById('video-thumb-player');
@@ -76,7 +91,8 @@ class PublishThumbnailInput extends React.Component {
     canvas.width = video.videoWidth;
     canvas.height = video.videoHeight;
     canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
-    return canvas.toDataURL();
+    const dataUri = canvas.toDataURL();
+    return dataURItoBlob(dataUri);
   }
   render () {
     const { error, videoSource, sliderMinRange, sliderMaxRange, sliderValue } = this.state;