From 625608ebbb35ff94ada083ecc811872a3adcc290 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 19 Jul 2016 16:49:46 -0400 Subject: [PATCH] when uploading file, add file to project --- client/modules/IDE/actions/files.js | 4 +- client/modules/IDE/actions/uploader.js | 87 +++++++++++-------- client/modules/IDE/components/FileUploader.js | 33 +++++-- server/models/project.js | 3 +- 4 files changed, 80 insertions(+), 47 deletions(-) diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js index ea8f7078..748d5f10 100644 --- a/client/modules/IDE/actions/files.js +++ b/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 => { diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js index bf2b59c7..09e0513a 100644 --- a/client/modules/IDE/actions/uploader.js +++ b/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 = '`; + // 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; } diff --git a/client/modules/IDE/components/FileUploader.js b/client/modules/IDE/components/FileUploader.js index b62759dc..9574556f 100644 --- a/client/modules/IDE/components/FileUploader.js +++ b/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); diff --git a/server/models/project.js b/server/models/project.js index de202c22..54e97adb 100644 --- a/server/models/project.js +++ b/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(){