diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js
index ad5e9c51..44173a59 100644
--- a/client/modules/IDE/actions/uploader.js
+++ b/client/modules/IDE/actions/uploader.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { createFile } from './files';
+const textFileRegex = /text\//;
 
 const s3Bucket = `http://${process.env.S3_BUCKET}.s3.amazonaws.com/`;
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
@@ -34,7 +35,7 @@ export function dropzoneAcceptCallback(file, done) {
     // check mime type
     // if text, local interceptor
     console.log(file.type);
-    if (file.type.match(/text\//)) {
+    if (file.type.match(textFileRegex)) {
       localIntercept(file).then(result => {
         file.content = result; // eslint-disable-line
         done();
@@ -74,7 +75,7 @@ export function dropzoneAcceptCallback(file, done) {
 
 export function dropzoneSendingCallback(file, xhr, formData) {
   return () => {
-    if (!file.type.match(/text\//)) {
+    if (!file.type.match(textFileRegex)) {
       Object.keys(file.postData).forEach(key => {
         formData.append(key, file.postData[key]);
       });
@@ -87,7 +88,7 @@ export function dropzoneSendingCallback(file, xhr, formData) {
 
 export function dropzoneCompleteCallback(file) {
   return (dispatch, getState) => { // eslint-disable-line
-    if (!file.type.match(/text\//)) {
+    if (!file.type.match(textFileRegex)) {
       let inputHidden = '<input type="hidden" name="attachments[]" value="';
       const json = {
         url: `${s3Bucket}${file.postData.key}`,
diff --git a/client/modules/IDE/components/FileUploader.js b/client/modules/IDE/components/FileUploader.js
index a034715d..d79d4b55 100644
--- a/client/modules/IDE/components/FileUploader.js
+++ b/client/modules/IDE/components/FileUploader.js
@@ -24,11 +24,15 @@ class FileUploader extends React.Component {
       thumbnailWidth: 200,
       thumbnailHeight: 200,
       // TODO what is a good list of MIME types????
-      acceptedFiles: 'image/*,audio/*,text/javascript,text/html,text/css',
+      acceptedFiles: 'image/*,audio/*,text/javascript,text/html,text/css,application/json,application/x-font-ttf,application/x-font-truetype',
       dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
       accept: this.props.dropzoneAcceptCallback,
       sending: this.props.dropzoneSendingCallback,
-      complete: this.props.dropzoneCompleteCallback
+      complete: this.props.dropzoneCompleteCallback,
+      error: (file, errorMessage) => {
+        console.log(file);
+        console.log(errorMessage);
+      }
     });
   }
 
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 3abd5455..a7fd872a 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -104,7 +104,7 @@ class PreviewFrame extends React.Component {
       let jsFileStrings = newJSFile.content.match(/(['"])((\\\1|.)*?)\1/gm);
       jsFileStrings = jsFileStrings || [];
       jsFileStrings.forEach(jsFileString => {
-        if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg)('|")$/)) {
+        if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp|mp3|wav|aiff|ogg|json)('|")$/i)) {
           const filePath = jsFileString.substr(1, jsFileString.length - 2);
           let fileName = filePath;
           if (fileName.match(/^\.\//)) {
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
index ff1a5a16..0f19f511 100644
--- a/client/modules/IDE/reducers/files.js
+++ b/client/modules/IDE/reducers/files.js
@@ -131,9 +131,9 @@ export const setSelectedFile = (state, id) =>
   });
 
 export const getFile = (state, id) => state.filter(file => file.id === id)[0];
-export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/))[0];
-export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/));
-export const getCSSFiles = (state) => state.filter(file => file.name.match(/.*\.css$/));
+export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/i))[0];
+export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/i));
+export const getCSSFiles = (state) => state.filter(file => file.name.match(/.*\.css$/i));
 export const getLinkedFiles = (state) => state.filter(file => file.url);
 
 export default files;