when uploading file, add file to project

client/modules/IDE/actions/files.js

@@ -13,10 +13,12 @@ export function updateFileContent(name, content) {
 
 export function createFile(formProps) {
   return (dispatch, getState) => {
+    debugger; // eslint-disable-line
     const state = getState();
     if (state.project.id) {
       const postParams = {
-        name: formProps.name
+        name: formProps.name,
+        url: formProps.url
       };
       axios.post(`${ROOT_URL}/projects/${state.project.id}/files`, postParams, { withCredentials: true })
         .then(response => {

client/modules/IDE/actions/uploader.js

@@ -1,52 +1,65 @@
 import axios from 'axios';
+import { createFile } from './files';
 
 const s3Bucket = 'http://p5js-web-editor-test.s3.amazonaws.com/';
 const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
 export function dropzoneAcceptCallback(file, done) {
-  file.postData = []; // eslint-disable-line
-  axios.post(`${ROOT_URL}/S3/sign`, {
-    name: file.name,
-    type: file.type,
-    size: file.size,
-    // _csrf: document.getElementById('__createPostToken').value
-  },
-    {
-      withCredentials: true
+  return () => {
+    file.postData = []; // eslint-disable-line
+    axios.post(`${ROOT_URL}/S3/sign`, {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      // _csrf: document.getElementById('__createPostToken').value
+    },
+      {
+        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();
     })
-  .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');
-  });
+    .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) {
-  Object.keys(file.postData).forEach(key => {
-    formData.append(key, file.postData[key]);
-  });
-  formData.append('Content-type', '');
-  formData.append('Content-length', '');
-  formData.append('acl', 'public-read');
+  return () => {
+    Object.keys(file.postData).forEach(key => {
+      formData.append(key, file.postData[key]);
+    });
+    formData.append('Content-type', '');
+    formData.append('Content-length', '');
+    formData.append('acl', 'public-read');
+  };
 }
 
 export function dropzoneCompleteCallback(file) {
-  let inputHidden = '<input type="hidden" name="attachments[]" value="';
-  const json = {
-    url: `${s3Bucket}${file.postData.key}`,
-    originalFilename: file.name
+  return (dispatch, getState) => { // eslint-disable-line
+    let inputHidden = '<input type="hidden" name="attachments[]" value="';
+    const json = {
+      url: `${s3Bucket}${file.postData.key}`,
+      originalFilename: file.name
+    };
+    console.log(json, JSON.stringify(json), JSON.stringify(json).replace('"', '\\"'));
+    inputHidden += `${window.btoa(JSON.stringify(json))}" />`;
+    // document.getElementById('uploader').appendChild(inputHidden);
+    document.getElementById('uploader').innerHTML += inputHidden;
+
+    const formParams = {
+      name: file.name,
+      url: `${s3Bucket}${file.postData.key}`
+    };
+    createFile(formParams)(dispatch, getState);
   };
-  console.log(json, JSON.stringify(json), JSON.stringify(json).replace('"', '\\"'));
-  inputHidden += `${window.btoa(JSON.stringify(json))}" />`;
-  // document.getElementById('uploader').appendChild(inputHidden);
-  document.getElementById('uploader').innerHTML += inputHidden;
 }

client/modules/IDE/components/FileUploader.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import Dropzone from 'dropzone';
 const s3Bucket = 'http://p5js-web-editor-test.s3.amazonaws.com/';
-import { dropzoneAcceptCallback,
-        dropzoneSendingCallback,
-        dropzoneCompleteCallback } from '../actions/uploader';
+import * as UploaderActions from '../actions/uploader';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 
 class FileUploader extends React.Component {
   componentDidMount() {
@@ -20,9 +20,9 @@ class FileUploader extends React.Component {
       thumbnailWidth: 150,
       thumbnailHeight: 150,
       acceptedMimeTypes: 'image/bmp,image/gif,image/jpg,image/jpeg,image/png',
-      accept: dropzoneAcceptCallback,
-      sending: dropzoneSendingCallback,
-      complete: dropzoneCompleteCallback
+      accept: this.props.dropzoneAcceptCallback,
+      sending: this.props.dropzoneSendingCallback,
+      complete: this.props.dropzoneCompleteCallback
     });
   }
 
@@ -33,4 +33,21 @@ class FileUploader extends React.Component {
   }
 }
 
-export default FileUploader;
+FileUploader.propTypes = {
+  dropzoneAcceptCallback: PropTypes.func.isRequired,
+  dropzoneSendingCallback: PropTypes.func.isRequired,
+  dropzoneCompleteCallback: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    files: state.files,
+    project: state.project
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(UploaderActions, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FileUploader);

server/models/project.js

@@ -33,7 +33,8 @@ const defaultCSS =
 
 const fileSchema = new Schema({
   name: { type: String, default: 'sketch.js' },
-  content: { type: String, default: defaultSketch }
+  content: { type: String },
+  url: { type: String }
 }, { timestamps: true, _id: true });
 
 fileSchema.virtual('id').get(function(){