Removed submodule react-s3

.gitmodules

@@ -1,4 +1 @@
 
-[submodule "node_modules/react-s3-fineuploader"]
-	path = node_modules/react-s3-fineuploader
-	url = https://bitbucket.org/ascribe/react-s3-fineuploader.git

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
+
+
+// Taken from: https://github.com/fedosejev/react-file-drag-and-drop
+var FileDragAndDrop = React.createClass({
+    propTypes: {
+        onDragStart: React.PropTypes.func,
+        onDrop: React.PropTypes.func.isRequired,
+        onDragEnter: React.PropTypes.func,
+        onLeave: React.PropTypes.func,
+        onDragOver: React.PropTypes.func,
+        onDragEnd: React.PropTypes.func,
+        filesToUpload: React.PropTypes.array,
+        handleDeleteFile: React.PropTypes.func
+    },
+
+    handleDragStart(event) {
+        if (typeof this.props.onDragStart === 'function') {
+            this.props.onDragStart(event);
+        }
+    },
+
+    handleDrag(event) {
+        if (typeof this.props.onDrag === 'function') {
+            this.props.onDrag(event);
+        }
+    },
+
+    handleDragEnd(event) {
+        if (typeof this.props.onDragEnd === 'function') {
+          this.props.onDragEnd(event);
+        }
+    },
+
+    handleDragEnter(event) {
+        if (typeof this.props.onDragEnter === 'function') {
+            this.props.onDragEnter(event);
+        }
+    },
+
+    handleDragLeave(event) {
+        if (typeof this.props.onDragLeave === 'function') {
+            this.props.onDragLeave(event);
+        }
+    },
+
+    handleDragOver(event) {
+        event.preventDefault();
+
+        if (typeof this.props.onDragOver === 'function') {
+            this.props.onDragOver(event);
+        }
+    },
+
+
+    handleDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        let files;
+
+        // handle Drag and Drop
+        if(event.dataTransfer && event.dataTransfer.files.length > 0) {
+            files = event.dataTransfer.files;
+        } else if(event.target.files) { // handle input type file
+            files = event.target.files;
+        }
+
+        if(typeof this.props.onDrop === 'function' && files) {
+          this.props.onDrop(files);
+        }
+
+    },
+
+    handleDeleteFile(fileId) {
+        // input's value is not change the second time someone
+        // inputs the same file again, therefore we need to reset its value
+        this.refs.fileinput.getDOMNode().value = '';
+        this.props.handleDeleteFile(fileId);
+    },
+
+    handleOnClick() {
+        // Simulate click on hidden file input
+        var event = document.createEvent("HTMLEvents");
+        event.initEvent("click", false, true);
+        this.refs.fileinput.getDOMNode().dispatchEvent(event);
+    },
+
+    render: function () {
+        let hasFiles = this.props.filesToUpload.length > 0;
+
+        return (
+            <div
+                className={hasFiles ? 'file-drag-and-drop has-files' : 'file-drag-and-drop' }
+                onClick={this.handleOnClick}
+                onDragStart={this.handleDragStart}
+                onDrag={this.handleDrop}
+                onDragEnter={this.handleDragEnter}
+                onDragLeave={this.handleDragLeave}
+                onDragOver={this.handleDragOver}
+                onDrop={this.handleDrop}
+                onDragEnd={this.handleDragEnd}>
+                    {hasFiles ? null : <span>Click or drag to add files</span>}
+                    <FileDragAndDropPreviewIterator 
+                        files={this.props.filesToUpload}
+                        handleDeleteFile={this.handleDeleteFile}/>
+                    <input
+                        multiple
+                        ref="fileinput"
+                        type="file" 
+                        style={{
+                            display: 'none',
+                            height:0,
+                            width:0
+                        }}
+                        onChange={this.handleDrop} />
+            </div>
+      );
+    }
+});
+
+module.exports = FileDragAndDrop;

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
+import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
+
+
+let FileDragAndDropPreview = React.createClass({
+
+    propsTypes: {
+        file: React.PropTypes.shape({
+            url: React.PropTypes.string,
+            type: React.PropTypes.string
+        }).isRequired,
+        handleDeleteFile: React.PropTypes.func
+    },
+
+    handleDeleteFile(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        // handleDeleteFile is optional, so if its not submitted,
+        // don't run it
+        if(this.props.handleDeleteFile) {
+            this.props.handleDeleteFile(this.props.file.id);
+        }
+    },
+
+    render() {
+        let previewElement;
+
+        // Decide wether an image or a placeholder picture should be displayed
+        if(this.props.file.type.split('/')[0] === 'image') {
+            previewElement = (<FileDragAndDropPreviewImage 
+                    progress={this.props.file.progress} 
+                    url={this.props.file.url}/>);
+        } else {
+            previewElement = (<FileDragAndDropPreviewOther 
+                    progress={this.props.file.progress} 
+                    type={this.props.file.type.split('/')[1]}/>);
+        }
+
+        return (
+            <div 
+                className="file-drag-and-drop-position" 
+                onClick={this.handleDeleteFile}>
+                {previewElement}
+            </div>
+        );
+    }
+});
+
+export default FileDragAndDropPreview;

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ProgressBar from 'react-progressbar';
+
+let FileDragAndDropPreviewImage = React.createClass({
+    propTypes: {
+        progress: React.PropTypes.number,
+        url: React.PropTypes.string
+    },
+
+    render() {
+        let imageStyle = {
+            backgroundImage: 'url("' + this.props.url + '")',
+            backgroundSize: 'cover'
+        };
+
+        return (
+            <div
+                className="file-drag-and-drop-preview-image"
+                style={imageStyle}>
+                    <ProgressBar completed={this.props.progress} color="black"/>
+            </div>
+        );
+    }
+});
+
+export default FileDragAndDropPreviewImage;

js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import FileDragAndDropPreview from './file_drag_and_drop_preview';
+
+let FileDragAndDropPreviewIterator = React.createClass({
+    propTypes: {
+        files: React.PropTypes.array,
+        handleDeleteFile: React.PropTypes.func
+    },
+
+    render() {
+        if(this.props.files) {
+            return (
+                <div>
+                    {this.props.files.map((file, i) => {
+                        return (
+                            <FileDragAndDropPreview 
+                                key={i}
+                                file={file}
+                                handleDeleteFile={this.props.handleDeleteFile}/>
+                        );
+                    })}
+                </div>
+            );
+        } else {
+            return null;
+        }
+    }
+});
+
+export default FileDragAndDropPreviewIterator;

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ProgressBar from 'react-progressbar';
+
+let FileDragAndDropPreviewOther = React.createClass({
+    propTypes: {
+        type: React.PropTypes.string,
+        progress: React.PropTypes.number
+    },
+
+    render() {
+        return(
+            <div 
+                className="file-drag-and-drop-preview">
+                <ProgressBar completed={this.props.progress} color="black"/>
+                <div className="file-drag-and-drop-preview-table-wrapper">
+                    <div className="file-drag-and-drop-preview-other">
+                        <span>{'.' + this.props.type}</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default FileDragAndDropPreviewOther;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -0,0 +1,269 @@
+'use strict';
+
+import React from 'react/addons';
+
+import promise from 'es6-promise';
+promise.polyfill();
+
+import fetch from 'isomorphic-fetch';
+
+import fineUploader from 'fineUploader';
+import FileDragAndDrop from './file_drag_and_drop';
+
+var ReactS3FineUploader = React.createClass({
+
+    getInitialState() {
+        return {
+            filesToUpload: [],
+            uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
+        };
+    },
+
+    componentDidMount() {
+        //console.log(JSON.stringify(this.propsToConfig()));
+        //let file = this.state.uploader.getResumableFilesData()[0];
+        //this.state.uploader.retry('1RKieODp_EBoDPNhISXBDNuA1JKdVuXCWhyk44DTK81WUQvpu3M8TXsKPLkjm3ICSvbbyR2KaHhEysvRQ_s4qHNFCbBiYrZ0Q8clXGCYtzk-');
+    },
+
+    propTypes: {
+        keyRoutine: React.PropTypes.shape({
+            url: React.PropTypes.string,
+            fileClass: React.PropTypes.string
+        }),
+        autoUpload: React.PropTypes.bool,
+        debug: React.PropTypes.bool,
+        objectProperties: React.PropTypes.shape({
+            acl: React.PropTypes.string
+        }),
+        request: React.PropTypes.shape({
+            endpoint: React.PropTypes.string,
+            accessKey: React.PropTypes.string,
+            params: React.PropTypes.shape({
+                csrfmiddlewaretoken: React.PropTypes.string
+            })
+        }),
+        signature: React.PropTypes.shape({
+            endpoint: React.PropTypes.string
+        }),
+        uploadSuccess: React.PropTypes.shape({
+            method: React.PropTypes.string,
+            endpoint: React.PropTypes.string,
+            params: React.PropTypes.shape({
+                isBrowserPreviewCapable: React.PropTypes.any, // maybe fix this later
+                bitcoin_ID_noPrefix: React.PropTypes.string
+            })
+        }),
+        cors: React.PropTypes.shape({
+            expected: React.PropTypes.bool
+        }),
+        chunking: React.PropTypes.shape({
+            enabled: React.PropTypes.bool
+        }),
+        resume: React.PropTypes.shape({
+            enabled: React.PropTypes.bool
+        }),
+        deleteFile: React.PropTypes.shape({
+            enabled: React.PropTypes.bool,
+            method: React.PropTypes.string,
+            endpoint: React.PropTypes.string
+        }),
+        session: React.PropTypes.shape({
+            endpoint: React.PropTypes.bool
+        }),
+        validation: React.PropTypes.shape({
+            itemLimit: React.PropTypes.number,
+            sizeLimit: React.PropTypes.string
+        }),
+        messages: React.PropTypes.shape({
+            unsupportedBrowser: React.PropTypes.string
+        }),
+        formatFileName: React.PropTypes.func,
+        multiple: React.PropTypes.bool,
+        retry: React.PropTypes.shape({
+            enableAuto: React.PropTypes.bool
+        })
+    },
+
+    propsToConfig() {
+        let objectProperties = this.props.objectProperties;
+        objectProperties['key'] = this.requestKey;
+
+        return {
+            autoUpload: this.props.autoUpload,
+            debug: this.props.debug,
+            objectProperties: objectProperties, // do a special key handling here
+            request: this.props.request,
+            signature: this.props.signature,
+            uploadSuccess: this.props.uploadSuccess,
+            cors: this.props.cors,
+            chunking: this.props.chunking,
+            resume: this.props.resume,
+            deleteFile: this.props.deleteFile,
+            session: this.props.session,
+            validation: this.props.validation,
+            messages: this.props.messages,
+            formatFileName: this.props.formatFileName,
+            multiple: this.props.multiple,
+            retry: this.props.retry,
+            callbacks: {
+                onSubmit: this.onSubmit,
+                onComplete: this.onComplete,
+                onDelete: this.onDelete,
+                onSessionRequestComplete: this.onSessionRequestComplete, 
+                onProgress: this.onProgress,
+                onRetry: this.onRetry,
+                onAutoRetry: this.onAutoRetry,
+                onManualRetry: this.onManualRetry,
+                onDeleteComplete: this.onDeleteComplete
+            }
+        };
+    },
+    getCookie(name) {
+        console.log(document.cookie);
+        let value = '; ' + document.cookie;
+        let parts = value.split('; ' + name + '=');
+        if (parts.length === 2) {
+            return parts.pop().split(';').shift();
+        }
+    },
+    requestKey(fileId) {
+        let filename = this.state.uploader.getName(fileId);
+        let defer = new fineUploader.Promise();
+        fetch(this.props.keyRoutine.url, {
+            method: 'post',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'X-CSRFToken': this.getCookie('csrftoken')
+            },
+            credentials: 'include',
+            body: JSON.stringify({
+                'filename': filename,
+                'file_class': 'digitalwork'
+            })
+        })
+        .then((res) => {
+            return res.json();
+        })
+        .then((res) =>{
+            defer.success(res.key);
+        })
+        .catch((err) => {
+            console.error(err);
+        });
+        return defer;
+    },
+
+    /* FineUploader specific callback function handlers */
+
+    onSubmit() {
+        console.log('submit');
+    },
+
+    onComplete() {
+        console.log('complete');
+    },
+
+    onRetry() {
+        console.log('retry');
+    },
+
+    onAutoRetry() {
+        console.log('autoretry');
+    },
+
+    onManualRetry() {
+        console.log('manualretry');
+    },
+
+    onDelete() {
+        console.log('delete');
+    },
+
+    onCancel() {
+        console.log('cancel');
+    },
+
+    onSessionRequestComplete() {
+        console.log('sessionrequestcomplete');
+    },
+
+    onDeleteComplete(id, xhr, isError) {
+        if(isError) {
+            // also, sync files from state with the ones from fineuploader
+            let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
+            // splice because I can
+            filesToUpload.splice(fileId, 1);
+
+            // set state
+            this.setState({
+                filesToUpload: React.addons.update(this.state.filesToUpload, {$set: filesToUpload})
+            });
+        } else {
+            // TODO: add global notification
+        }
+    },
+
+    onProgress(id, name, uploadedBytes, totalBytes) {
+        var newState = React.addons.update(this.state, {
+            filesToUpload: { [id]: {
+                progress: { $set: (uploadedBytes/totalBytes)*100} }
+            }
+        });
+        this.setState(newState);
+    },
+
+    handleDeleteFile(fileId) {
+        // delete file from server
+        this.state.uploader.deleteFile(fileId);
+        // this is being continues in onDeleteFile, as 
+        // fineuploaders deleteFile does not return a correct callback or
+        // promise
+    },
+
+    handleUploadFile(files) {
+        this.state.uploader.addFiles(files);
+        let oldFiles = this.state.filesToUpload;
+        let oldAndNewFiles = this.state.uploader.getUploads();
+
+        // Add fineuploader specific information to new files
+        for(let i = 0; i < oldAndNewFiles.length; i++) {
+            for(let j = 0; j < files.length; j++) {
+                if(oldAndNewFiles[i].originalName === files[j].name) {
+                    oldAndNewFiles[i].progress = 0;
+                    oldAndNewFiles[i].type = files[j].type;
+                    oldAndNewFiles[i].url = URL.createObjectURL(files[j]);
+                }
+            }
+        }
+
+        // and re-add fineuploader specific information for old files as well
+        for(let i = 0; i < oldAndNewFiles.length; i++) {
+            for(let j = 0; j < oldFiles.length; j++) {
+                if(oldAndNewFiles[i].originalName === oldFiles[j].name) {
+                    oldAndNewFiles[i].progress = 0;
+                    oldAndNewFiles[i].type = oldFiles[j].type;
+                    oldAndNewFiles[i].url = oldFiles[j].url;
+                }
+            }
+        }
+
+        let newState = React.addons.update(this.state, {
+            filesToUpload: { $set: oldAndNewFiles }
+        });
+        this.setState(newState);
+    },
+
+    render() {
+        return (
+            <FileDragAndDrop 
+                onDrop={this.handleUploadFile}
+                filesToUpload={this.state.filesToUpload}
+                handleDeleteFile={this.handleDeleteFile}/>
+        );
+    }
+
+});
+
+
+export default ReactS3FineUploader;

node_modules/react-s3-fineuploader

@@ -1 +0,0 @@
-Subproject commit e2890cf3d28d010abc04e0de3b218afe8c949596

sass/ascribe_uploader.scss

@@ -0,0 +1,64 @@
+.file-drag-and-drop {
+    display: table-cell;
+    outline: 1px dashed #616161;
+    cursor: pointer;
+    vertical-align: middle;
+    text-align: center;
+    height:208px;
+    width: 672px;
+    background-color: #FAFAFA;
+    transition: .1s linear background-color;
+}
+
+.file-drag-and-drop:hover {
+    background-color: rgba(72, 218, 203, 0.2);
+}
+
+.file-drag-and-drop > span {
+    font-size: 1.5em;
+}
+
+.has-files {
+    text-align: left;
+    padding: 3em 0 0 0;
+}
+
+.file-drag-and-drop-position {
+    display: inline-block;
+    margin: 0 0 3em 3em;
+    float:left;
+}
+
+.file-drag-and-drop-preview-table-wrapper {
+    display: table;
+    height:94px;
+    width:104px;
+}
+
+.file-drag-and-drop-preview {
+    overflow:hidden;
+    cursor: default;
+    background-color: #EEEEEE;
+    border: 1px solid #616161;
+}
+
+.file-drag-and-drop-preview-image {
+    display: table;
+    height:104px;
+    width:104px;
+    overflow:hidden;
+    border: 1px solid #616161;
+}
+
+.file-drag-and-drop-preview-other {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+
+}
+
+.file-drag-and-drop-preview-other span {
+    font-size: 1.1em;
+    display: block;
+    margin-top: -10px;
+}