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,9 +1,11 @@
 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) {
+  return () => {
     file.postData = []; // eslint-disable-line
     axios.post(`${ROOT_URL}/S3/sign`, {
       name: file.name,
@@ -28,18 +30,22 @@ export function dropzoneAcceptCallback(file, done) {
       }
       done('error preparing the upload');
     });
+  };
 }
 
 export function dropzoneSendingCallback(file, xhr, formData) {
+  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) {
+  return (dispatch, getState) => { // eslint-disable-line
     let inputHidden = '<input type="hidden" name="attachments[]" value="';
     const json = {
       url: `${s3Bucket}${file.postData.key}`,
@@ -49,4 +55,11 @@ export function dropzoneCompleteCallback(file) {
     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);
+  };
 }

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(){