upload text files locally

client/modules/IDE/actions/files.js

@@ -104,7 +104,8 @@ export function createFile(formProps) {
         type: ActionTypes.CREATE_FILE,
         name: createUniqueName(formProps.name, state.files),
         id: `${maxFileId + 1}`,
-        url: formProps.url
+        url: formProps.url,
+        content: formProps.content || ''
       });
       dispatch({
         type: ActionTypes.HIDE_MODAL

client/modules/IDE/actions/uploader.js

@@ -4,62 +4,111 @@ import { createFile } from './files';
 const s3Bucket = `http://${process.env.S3_BUCKET}.s3.amazonaws.com/`;
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
+function localIntercept(file, options = {}) {
+  return new Promise((resolve, reject) => {
+    if (!options.readType) {
+      // const mime = file.type;
+      // const textType = a(_textTypes).any(type => {
+      //   const re = new RegExp(type);
+      //   return re.test(mime);
+      // });
+      // options.readType = textType ? 'readAsText' : 'readAsDataURL';
+      options.readType = 'readAsText'; // eslint-disable-line
+    }
+    const reader = new window.FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = () => {
+      reject(reader.result);
+    };
+
+    // run the reader
+    reader[options.readType](file);
+  });
+}
+
 export function dropzoneAcceptCallback(file, done) {
   return () => {
-    file.postData = []; // eslint-disable-line
+    // for text files and small files
-    axios.post(`${ROOT_URL}/S3/sign`, {
+    // check mime type
-      name: file.name,
+    // if text, local interceptor
-      type: file.type,
+    if (file.type.match(/text\//)) {
-      size: file.size,
+      localIntercept(file).then(result => {
-      // _csrf: document.getElementById('__createPostToken').value
+        file.content = result; // eslint-disable-line
-    },
+        done();
-      {
-        withCredentials: true
       })
-    .then(response => {
+      .catch(result => {
-      file.custom_status = 'ready'; // eslint-disable-line
+        done(`Failed to download file ${file.name}: ${result}`);
-      file.postData = response.data; // eslint-disable-line
+        console.warn(file);
-      file.s3 = response.data.key; // eslint-disable-line
+      });
-      file.previewTemplate.className += ' uploading'; // eslint-disable-line
+    } else {
-      done();
+      file.postData = []; // eslint-disable-line
-    })
+      axios.post(`${ROOT_URL}/S3/sign`, {
-    .catch(response => {
+        name: file.name,
-      file.custom_status = 'rejected'; // eslint-disable-line
+        type: file.type,
-      if (response.data.responseText && response.data.responseText.message) {
+        size: file.size,
-        done(response.data.responseText.message);
+        // _csrf: document.getElementById('__createPostToken').value
-      }
+      },
-      done('error preparing the upload');
+        {
-    });
+          withCredentials: true
+        })
+      .then(response => {
+        file.custom_status = 'ready'; // eslint-disable-line
+        file.postData = response.data; // eslint-disable-line
+        file.s3 = response.data.key; // eslint-disable-line
+        file.previewTemplate.className += ' uploading'; // eslint-disable-line
+        done();
+      })
+      .catch(response => {
+        file.custom_status = 'rejected'; // eslint-disable-line
+        if (response.data.responseText && response.data.responseText.message) {
+          done(response.data.responseText.message);
+        }
+        done('error preparing the upload');
+      });
+    }
   };
 }
 
 export function dropzoneSendingCallback(file, xhr, formData) {
   return () => {
-    Object.keys(file.postData).forEach(key => {
+    if (!file.type.match(/text\//)) {
-      formData.append(key, file.postData[key]);
+      Object.keys(file.postData).forEach(key => {
-    });
+        formData.append(key, file.postData[key]);
-    formData.append('Content-type', '');
+      });
-    formData.append('Content-length', '');
+      formData.append('Content-type', '');
-    formData.append('acl', 'public-read');
+      formData.append('Content-length', '');
+      formData.append('acl', 'public-read');
+    }
   };
 }
 
 export function dropzoneCompleteCallback(file) {
   return (dispatch, getState) => { // eslint-disable-line
-    let inputHidden = '<input type="hidden" name="attachments[]" value="';
+    if (!file.type.match(/text\//)) {
-    const json = {
+      let inputHidden = '<input type="hidden" name="attachments[]" value="';
-      url: `${s3Bucket}${file.postData.key}`,
+      const json = {
-      originalFilename: file.name
+        url: `${s3Bucket}${file.postData.key}`,
-    };
+        originalFilename: file.name
-    console.log(json, JSON.stringify(json), JSON.stringify(json).replace('"', '\\"'));
+      };
-    inputHidden += `${window.btoa(JSON.stringify(json))}" />`;
+      console.log(json, JSON.stringify(json), JSON.stringify(json).replace('"', '\\"'));
-    // document.getElementById('uploader').appendChild(inputHidden);
+      inputHidden += `${window.btoa(JSON.stringify(json))}" />`;
-    document.getElementById('uploader').innerHTML += inputHidden;
+      // document.getElementById('uploader').appendChild(inputHidden);
+      document.getElementById('uploader').innerHTML += inputHidden;
 
-    const formParams = {
+      const formParams = {
-      name: file.name,
+        name: file.name,
-      url: `${s3Bucket}${file.postData.key}`
+        url: `${s3Bucket}${file.postData.key}`
-    };
+      };
-    createFile(formParams)(dispatch, getState);
+      createFile(formParams)(dispatch, getState);
+    } else {
+      const formParams = {
+        name: file.name,
+        content: file.content
+      };
+      console.log(formParams);
+      createFile(formParams)(dispatch, getState);
+    }
   };
 }

client/modules/IDE/components/FileUploader.js

@@ -23,7 +23,8 @@ class FileUploader extends React.Component {
       maxThumbnailFilesize: 8, // 3MB
       thumbnailWidth: 200,
       thumbnailHeight: 200,
-      acceptedFiles: 'image/bmp,image/gif,image/jpg,image/jpeg,image/png,audio/*',
+      // TODO what is a good list of MIME types????
+      acceptedFiles: 'image/*,audio/*,text/javascript,text/html,text/css',
       dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
       accept: this.props.dropzoneAcceptCallback,
       sending: this.props.dropzoneSendingCallback,

client/modules/IDE/reducers/files.js

@@ -74,7 +74,7 @@ const files = (state = initialState, action) => {
     case ActionTypes.RESET_PROJECT:
       return initialState;
     case ActionTypes.CREATE_FILE:
-      return [...state, { name: action.name, id: action.id, content: '', url: action.url }];
+      return [...state, { name: action.name, id: action.id, content: action.content, url: action.url }];
     case ActionTypes.SHOW_FILE_OPTIONS:
       return state.map(file => {
         if (file.id !== action.id) {