diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index 729bd8a9..fa9ceef4 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -1,5 +1,6 @@
 import * as ActionTypes from '../../../constants';
 import axios from 'axios';
+import blobUtil from 'blob-util';
 
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
@@ -11,6 +12,20 @@ export function updateFileContent(name, content) {
   };
 }
 
+export function getBlobUrl(file) {
+  return (dispatch) => {
+    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 createFile(formProps) {
   return (dispatch, getState) => {
     const state = getState();
@@ -21,6 +36,9 @@ export function createFile(formProps) {
       };
       axios.post(`${ROOT_URL}/projects/${state.project.id}/files`, postParams, { withCredentials: true })
         .then(response => {
+          if (response.data.url) {
+            getBlobUrl(response.data)(dispatch);
+          }
           dispatch({
             type: ActionTypes.CREATE_FILE,
             ...response.data
@@ -40,6 +58,9 @@ export function createFile(formProps) {
           maxFileId = parseInt(file.id, 10);
         }
       });
+      if (formProps.url) {
+        getBlobUrl(formProps)(dispatch);
+      }
       dispatch({
         type: ActionTypes.CREATE_FILE,
         name: formProps.name,
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 20411e4c..1ea6cc33 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -3,7 +3,7 @@ import { browserHistory } from 'react-router';
 import axios from 'axios';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
-import blobUtil from 'blob-util';
+import { getBlobUrl } from './files';
 
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
@@ -12,15 +12,7 @@ export function getProjectBlobUrls() {
     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
-            });
-          });
+        getBlobUrl(file)(dispatch);
       }
     });
   };