add function to create all blob urls

client/constants.js

@@ -33,6 +33,7 @@ export const SET_SELECTED_FILE = 'SET_SELECTED_FILE';
 export const SHOW_MODAL = 'SHOW_MODAL';
 export const HIDE_MODAL = 'HIDE_MODAL';
 export const CREATE_FILE = 'CREATE_FILE';
+export const SET_BLOB_URL = 'SET_BLOB_URL';
 
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';

client/modules/IDE/actions/project.js

@@ -3,14 +3,33 @@ import { browserHistory } from 'react-router';
 import axios from 'axios';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
+import blobUtil from 'blob-util';
 
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
+export function getProjectBlobUrls() {
+  return (dispatch, getState) => {
+    const state = getState();
+    state.files.forEach(file => {
+      if (file.url) {
+        blobUtil.imgSrcToBlob(file.url, undefined, { crossOrigin: 'Anonymous' })
+          .then(blobUtil.createObjectURL)
+          .then(objectURL => {
+            dispatch({
+              type: ActionTypes.SET_BLOB_URL,
+              name: file.name,
+              blobURL: objectURL
+            });
+          });
+      }
+    });
+  };
+}
+
 export function getProject(id) {
-  return (dispatch) => {
+  return (dispatch, getState) => {
     axios.get(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
       .then(response => {
-        console.log(response.data);
         browserHistory.push(`/projects/${id}`);
         dispatch({
           type: ActionTypes.SET_PROJECT,
@@ -19,6 +38,7 @@ export function getProject(id) {
           selectedFile: response.data.selectedFile,
           owner: response.data.user
         });
+        getProjectBlobUrls()(dispatch, getState);
       })
       .catch(response => dispatch({
         type: ActionTypes.ERROR,

client/modules/IDE/reducers/files.js

@@ -60,6 +60,13 @@ const files = (state = initialState, action) => {
 
         return Object.assign({}, file, { content: action.content });
       });
+    case ActionTypes.SET_BLOB_URL:
+      return state.map(file => {
+        if (file.name !== action.name) {
+          return file;
+        }
+        return Object.assign({}, file, { blobURL: action.blobURL });
+      });
     case ActionTypes.NEW_PROJECT:
       return [...action.files];
     case ActionTypes.SET_PROJECT:

package.json

@@ -59,6 +59,7 @@
     "axios": "^0.12.0",
     "babel-core": "^6.8.0",
     "bcrypt-nodejs": "0.0.3",
+    "blob-util": "^1.2.1",
     "body-parser": "^1.15.1",
     "bson-objectid": "^1.1.4",
     "classnames": "^2.2.5",