diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f319765 --- /dev/null +++ b/.gitignore @@ -0,0 +1,10 @@ +# Build files +.tmp +bower_components +node_modules +coverage +.sass-cache +.idea +.env +npm-debug.log +.DS_Store \ No newline at end of file diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..7cbea07 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +5.2.0 \ No newline at end of file diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..9de147f --- /dev/null +++ b/.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=" diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..c2001b2 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/README.md b/README.md index 28170cf..a5e4694 100644 --- a/README.md +++ b/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 +``` diff --git a/components/ExampleApp/ExampleApp.cjsx b/components/ExampleApp/ExampleApp.cjsx new file mode 100644 index 0000000..85e31fe --- /dev/null +++ b/components/ExampleApp/ExampleApp.cjsx @@ -0,0 +1,17 @@ +require './ExampleApp.scss' + +React = require 'react' +ExampleNav = require '../ExampleNav/ExampleNav.cjsx' + +component = + render: -> +
+
{this.props.children}
+ + +
+ + + +module.exports = React.createClass component + diff --git a/components/ExampleApp/ExampleApp.scss b/components/ExampleApp/ExampleApp.scss new file mode 100644 index 0000000..703006c --- /dev/null +++ b/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; + } +} diff --git a/components/ExampleNav/ExampleNav.cjsx b/components/ExampleNav/ExampleNav.cjsx new file mode 100644 index 0000000..ec1a88c --- /dev/null +++ b/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}) -> + + +module.exports = component \ No newline at end of file diff --git a/components/ExampleNav/ExampleNav.scss b/components/ExampleNav/ExampleNav.scss new file mode 100644 index 0000000..7f6e441 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/components/FileUploader/FileUploader.cjsx b/components/FileUploader/FileUploader.cjsx new file mode 100644 index 0000000..521bd56 --- /dev/null +++ b/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}) -> +
+ { + if loading + + } + + +
+ + + +
+
+ +module.exports = FileUploader + + diff --git a/components/FileUploader/FileUploaderContainer.cjsx b/components/FileUploader/FileUploaderContainer.cjsx new file mode 100644 index 0000000..8303eba --- /dev/null +++ b/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)) + diff --git a/components/FileUploader/FileUploaderContainerExamples.cjsx b/components/FileUploader/FileUploaderContainerExamples.cjsx new file mode 100644 index 0000000..cfc09e5 --- /dev/null +++ b/components/FileUploader/FileUploaderContainerExamples.cjsx @@ -0,0 +1,13 @@ +'use strict' + +FileUploaderContainer = require './FileUploaderContainer' +React = require 'react' + +FileUploaderContainerExamples = -> +
+

Default

+ + +
+ +module.exports = FileUploaderContainerExamples diff --git a/components/FileUploader/FileUploaderExamples.cjsx b/components/FileUploader/FileUploaderExamples.cjsx new file mode 100644 index 0000000..8f13193 --- /dev/null +++ b/components/FileUploader/FileUploaderExamples.cjsx @@ -0,0 +1,17 @@ +'use strict' + +FileUploader = require './FileUploader' +React = require 'react' + +FileUploaderExamples = -> +
+

Default

+ + + +

multiple is true

+ + +
+ +module.exports = FileUploaderExamples diff --git a/components/FileUploader/FileUploaderStyles.scss b/components/FileUploader/FileUploaderStyles.scss new file mode 100644 index 0000000..01174bf --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/components/Router/Router.cjsx b/components/Router/Router.cjsx new file mode 100644 index 0000000..227a6d6 --- /dev/null +++ b/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 = -> + + + + + + + + + + + + + + + +module.exports = component \ No newline at end of file diff --git a/components/UploadedFile/UploadedFile.cjsx b/components/UploadedFile/UploadedFile.cjsx new file mode 100644 index 0000000..fe94dba --- /dev/null +++ b/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 }) -> +
+
+ { + if status == 'failed' +
+ + + +
+ else + if preview +
+ else + + } + { + if status == 'uploading' +
+ + {progress}% + +
+ } +
+ +
+

{ fileName }

+ { + unless status == 'uploading' + + } +
+ + { + if enableCaptions +