File uploader

.gitignore

@@ -0,0 +1,10 @@
+# Build files
+.tmp
+bower_components
+node_modules
+coverage
+.sass-cache
+.idea
+.env
+npm-debug.log
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+5.2.0

.travis.yml

@@ -0,0 +1,20 @@
+language: node_js
+node_js:
+- 5.2.0
+before_install:
+- npm install
+sudo: false
+before_deploy:
+- npm-prepublish --verbose
+deploy:
+- provider: npm
+  email: "$NPM_EMAIL"
+  api_key: "$NPM_API_KEY"
+  on:
+    tags: true
+env:
+  global:
+  # NPM_EMAIL
+  - secure: "XVgfIy4vm0kOX+saefkpE98aHSzvSk0S9OydHC2/TfNnnfJfrdySOPyuVhfgtap/pKd9R2VtofSCIAy1bRNeE3wsFOpXNv/V/wQQ40cyJGQRL6uCJDkc7yvYnhCh5ZD6Jh2kJzB2FcT8V18+u12Azftbxz+SM0/wk4tgw5akRtUGVEZ01PaivY4VIESJ2qBJZiXeKfMCtCDi/a3OnUMUA6b8tbP+n35zl6JZGJtJhwcYqliyxzgnIR5bCDqPcab32cHsdcb7E8+Q/Co8vYc2ZVI6aQ/Oe+Cd2ON+WyTHZoWfKlKnXuYJ3DUnUxaDRTgfz+AdFZHwvlwfuDLexoTOS5Lps/aNh5/4kt7LwJyj3N4kxW/XgoZzJvn6foIYCqd6RnvTp05PVTUWiLKQwiMN9QxTLPhVv0RBqo+N9sDflq4eORv9WlsRF3XawZIr8GSqLiu7WM8w9wzdn66V94j4qO+gHQH/U3ck4z4Bie+QeDeOc8oYckbH5PaUcoRc3vEnGy9YKMwZ0RwJKZHXLE+g4xbDzJfhovC6835Hb6Sj81muSz4E8WVAsnyEtLs+JaWHA90qpfwsNB11aZHB7YO0HrHnMKA9P1F6A8eRagj6Ynhbl5Ko4Agtz0bqHVhyWi9bcF1V8WneuJSreC9naoWVvLYoyKc4UY/Qt7j7mdynm7w="
+  # NPM_API_KEY
+  - secure: "S9r5O41PS0+95/N5CTr8Euf5GISLmE8E6Rn9UWhuigjfuiquU3D7MWtl+v3Nyog7HH4k7wP13yg7UtmXekB9T5axSg3ViXiFAedGH7breS0nl0CCUCFCJdNiBDxiMTCDpI2C0KWKvTFdU1aCXJfRhVfDQE1kjJksdQ1BQvr0rLF5OIjh0JgRl6lmR9gMI3kY9hB/m6DRbvjonVe5T9yoWGKWPDODdkLT3GXW7hAQABluX01ARodHwvo5t/5dfIVjm3A2TKt7UHpR33ZM18zZ6qaJKsHosoWZ7JxuN4FrUvfxC4G/bXQML4a8MG566qV2Jr8cl6CYWY9sVyFWwgncbJdJEsYXongr6Mm41wREX0efXh0Fy9rDSGmXxVJSqY33MyYXGNQHzQ38V+dNascQ2V4Sk++3kfGGcDQ5s3yQpFdYXTORBra+O/eYwP8midJlLSJLD+vmrzTg/NWiFJeCvr0mqOMuQ+1Rwyf7xx6Qa2vhq8Bb8qEZgoPlefgHl5ivUzHT7JFiCcuigyeAGuOdR8Rdi6CEvmRpEy8KDvc/VtdBEXRCx2MZ/SGT4Q0h3Q4bdbeFDaXz8slLqt9uKhzHI5e+1CU5csHwpzkXrnsX/JZWYZtCT+3QopMwZYuDUNYF0hIJNCps6NCODrU2MulokcbTxUDMSkA8GQlNriGgF/0="

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Appirio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,17 @@
-# file-uploader
-File uploader component built in ReactJS
+# Appirio File Uploader
+
+## Using the repo in your app
+
+## Install
+
+```shell
+npm install appirio-tech-file-uploader
+```
+
+## Developing
+
+```shell
+nvm use
+npm install
+npm run example
+```

components/ExampleApp/ExampleApp.cjsx

@@ -0,0 +1,17 @@
+require './ExampleApp.scss'
+
+React      = require 'react'
+ExampleNav = require '../ExampleNav/ExampleNav.cjsx'
+
+component =
+  render: ->
+    <div className="ExampleApp">
+      <main>{this.props.children}</main>
+
+      <ExampleNav />
+    </div>
+
+
+
+module.exports = React.createClass component
+

components/ExampleApp/ExampleApp.scss

@@ -0,0 +1,18 @@
+@import "work/work-styles";
+
+body {
+  background-color: $grey-lighter;
+  padding: 15px;
+
+  .invisible {
+    opacity: .3;
+    visibility: visible;
+  }
+
+  h1 {
+    margin        : 80px 0 40px 0;
+    text-align    : center;
+    padding-bottom: 10px;
+    border-bottom : 1px solid $grey-light;
+  }
+}

components/ExampleNav/ExampleNav.cjsx

@@ -0,0 +1,23 @@
+'use strict'
+
+require './ExampleNav.scss'
+
+React      = require 'react'
+classNames = require 'classnames'
+
+{ Link } = require 'react-router'
+
+component = ({data, state}) ->
+  <ul className="ExampleNav">
+    <li>
+      <Link to="/">FileUploaderContainer</Link>
+
+      <Link to="/UploadedFileExamples">UploadedFile</Link>
+
+      <Link to="/UploadedFilesExamples">UploadedFiles</Link>
+
+      <Link to="/FileUploaderExamples">FileUploader</Link>
+    </li>
+  </ul>
+
+module.exports = component

components/ExampleNav/ExampleNav.scss

@@ -0,0 +1,15 @@
+.ExampleNav {
+  position: fixed;
+  bottom: 0;
+  background-color: #fff;
+  opacity: 0.6;
+
+  li {
+    display: inline-block;
+  }
+
+  a {
+    margin: 10px;
+    display: inline-block;
+  }
+}

components/FileUploader/FileUploader.cjsx

@@ -0,0 +1,27 @@
+'use strict'
+
+require './FileUploaderStyles'
+
+React                  = require 'react'
+UploadedFilesContainer = require '../UploadedFiles/UploadedFilesContainer'
+Dropzone               = require 'react-dropzone'
+Loader                 = require 'appirio-tech-ng-ui-components/components/Loader/Loader.cjsx'
+
+FileUploader = ({ multiple, onChange, loading}) ->
+  <div className="FileUploader">
+    {
+      if loading
+        <Loader />
+    }
+    <UploadedFilesContainer/>
+
+    <div className="dropzone-container">
+      <Dropzone multiple={multiple} onDrop={onChange} className="Dropzone">
+        <button>Choose files to upload.</button>
+      </Dropzone>
+    </div>
+  </div>
+
+module.exports = FileUploader
+
+

components/FileUploader/FileUploaderContainer.cjsx

@@ -0,0 +1,38 @@
+'use strict'
+
+React          = require 'react'
+{ connect }    = require 'react-redux'
+{ uploadFile } = require 'appirio-tech-client-app-layer'
+classnames     = require 'classnames'
+FileUploader   = require './FileUploader'
+
+{ createClass, createElement, PropTypes } = React
+
+mapStateToProps = (state) ->
+  { id, assetType, category, loading } = state?.fileUploader
+
+  { id, assetType, category, loading }
+
+container =
+  propTypes:
+    id       : PropTypes.string.isRequired
+    assetType: PropTypes.string.isRequired
+    category : PropTypes.string.isRequired
+    dispatch : PropTypes.func.isRequired
+    loading  : PropTypes.bool
+
+  onChange: (files) ->
+    { dispatch, id, assetType, category } = this.props
+
+    files.map (file) ->
+      dispatch uploadFile({ id, assetType, category, file })
+
+  render: ->
+    { onChange } = this
+
+    { loading } = this.props
+
+    createElement FileUploader, { onChange, loading }
+
+module.exports = connect(mapStateToProps)(createClass(container))
+

components/FileUploader/FileUploaderContainerExamples.cjsx

@@ -0,0 +1,13 @@
+'use strict'
+
+FileUploaderContainer = require './FileUploaderContainer'
+React                 = require 'react'
+
+FileUploaderContainerExamples = ->
+  <div className="FileUploaderContainerExamples flex column middle center light-bg">
+    <h1>Default</h1>
+
+    <FileUploaderContainer/>
+  </div>
+
+module.exports = FileUploaderContainerExamples

components/FileUploader/FileUploaderExamples.cjsx

@@ -0,0 +1,17 @@
+'use strict'
+
+FileUploader = require './FileUploader'
+React        = require 'react'
+
+FileUploaderExamples = ->
+  <div className="FileUploaderExamples flex column middle center light-bg">
+    <h1>Default</h1>
+
+    <FileUploader/>
+
+    <h1>multiple is true</h1>
+
+    <FileUploader multiple={true} id={'123'} assetType={'work'} category={'development'}/>
+  </div>
+
+module.exports = FileUploaderExamples

components/FileUploader/FileUploaderStyles.scss

@@ -0,0 +1,21 @@
+@import "work/work-includes";
+
+.FileUploader {
+  position: relative;
+
+  .Loader {
+    z-index: 1;
+  }
+
+  .UploadedFiles {
+    margin-bottom: 20px;
+  }
+
+  .Dropzone {
+    display: inline-block;
+  }
+
+  .dropzone-container {
+    text-align: center;
+  }
+}

components/Router/Router.cjsx

@@ -0,0 +1,64 @@
+'use strict'
+
+React                         = require 'react'
+{ Provider }                  = require 'react-redux'
+configureStore                = require('appirio-tech-client-app-layer').default
+ExampleApp                    = require '../ExampleApp/ExampleApp.cjsx'
+Router                        = require '../Router/Router.cjsx'
+UploadedFileExamples          = require '../UploadedFile/UploadedFileExamples.cjsx'
+UploadedFilesExamples         = require '../UploadedFiles/UploadedFilesExamples.cjsx'
+FileUploaderExamples          = require '../FileUploader/FileUploaderExamples.cjsx'
+FileUploaderContainerExamples = require '../FileUploader/FileUploaderContainerExamples.cjsx'
+
+{ Router, Route, Link, IndexRoute, browserHistory } = require 'react-router'
+
+store = configureStore
+  attachments:
+    'mockDataInRouter.jpg':
+      assetType   : 'specs'
+      progress    : 33
+      category    :'work'
+      fileName    : 'mockDataInRouter.jpg'
+      filePath    : 'some/unique/path'
+      fileType    : 'image/jpeg'
+      id          : 'workid'
+    'specsworkworkidmockDataInRouterError.jpg':
+      assetType   : 'specs'
+      progress    : 33
+      category    :'work'
+      fileName    : 'mockDataInRouterError.jpg'
+      filePath    : 'some/unique/path3'
+      fileType    : 'image/jpeg'
+      id          : 'workid'
+      errors      : []
+    'mockDataInRouter2.jpg':
+      assetType   : 'specs'
+      progress    : 33
+      category    :'work'
+      fileName    : 'mockDataInRouter2.jpg'
+      filePath    : 'some/unique/path2'
+      fileType    : 'image/jpeg'
+      id          : 'workid'
+      preview     : 'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
+  fileUploader:
+    id       : 'workid' # has to match schemas
+    assetType: 'specs' # has to match schemas
+    category : 'work' # has to match schemas
+
+component = ->
+  <Provider store={store}>
+    <Router history={browserHistory}>
+      <Route path="/" component={ExampleApp}>
+        <IndexRoute component={FileUploaderContainerExamples}/>
+
+        <Route path="/UploadedFileExamples" component={UploadedFileExamples}/>
+
+        <Route path="/UploadedFilesExamples" component={UploadedFilesExamples}/>
+
+        <Route path="/FileUploaderExamples" component={FileUploaderExamples}/>
+      </Route>
+    </Router>
+  </Provider>
+
+
+module.exports = component

components/UploadedFile/UploadedFile.cjsx

@@ -0,0 +1,53 @@
+'use strict'
+
+require './UploadedFileStyles'
+
+React      = require 'react'
+classnames = require 'classnames'
+
+UploadedFile = ({ status, preview, progress, fileName, enableCaptions, captions, onDelete }) ->
+  <div className="UploadedFile">
+    <main className="flex column middle center" >
+      {
+        if status == 'failed'
+          <div className="failed flex column center">
+            <img className="icon" src={require './icon-alert-red.svg'}/>
+
+            <button className="clean" onClick="" type="button">
+              retry
+            </button>
+          </div>
+        else
+          if preview
+            <div className="preview" style={backgroundImage: "url(#{preview})"} />
+          else
+            <img className="document-icon" src={require './icon-document.svg'} />
+      }
+      {
+        if status == 'uploading'
+          <div className="progress">
+            <progress value={progress} max="100">
+              {progress}%
+            </progress>
+          </div>
+      }
+    </main>
+
+    <div className="file-name flex space-between">
+      <p className="file-name">{ fileName }</p>
+      {
+        unless status == 'uploading'
+          <button className="clean" type="button" onClick={onDelete}>
+            <div className="icon cross"/>
+          </button>
+      }
+    </div>
+
+    {
+      if enableCaptions
+        <textarea placeholder="enter a caption" value={captions} />
+    }
+  </div>
+
+module.exports = UploadedFile
+