Removes styles.css imports, client code must import this stylesheet; …

…prepares for 2.0.1

README.md

@@ -13,33 +13,36 @@ React Dropzone Uploader is a customizable HTML5 file dropzone and uploader for R
 - Detailed upload status and progress, upload cancellation and restart
 - Trivially set auth headers and additional upload fields for any upload (see S3 example)
 - Modular design allows for use as standalone file dropzone, file input, file uploader
-- Easily customize styles using CSS or JSX
-- Lightweight at ~15kB, including styles
+- Easily customize styles using CSS or JS
+- Lightweight at <15kB, including styles
 
 
 ## Installation
 `npm install --save react-dropzone-uploader`
 
+Import styles and the dropzone.
 
-## Getting Started
-RDU's defaults make it very powerful out of the box. The following code gives your users a dropzone / file input that uploads files to `https://httpbin.org/post`, with a button to submit the files after they've been uploaded.
+~~~js
+import 'react-dropzone-uploader/dist/styles.css'
+import Dropzone from 'react-dropzone-uploader'
+~~~
 
-The `onChangeStatus` prop is included to show how a file's status changes as it's dropped (or picked) and then uploaded. [Check out a live demo here](https://codepen.io/kylebebak/pen/wYRNzY/?editors=0010).
+
+## Usage
+RDU's defaults make it powerful out of the box. The following code gives your users a dropzone / file input that uploads files to `https://httpbin.org/post`, with a button to submit files after they've been uploaded. [Check out a live demo](https://codepen.io/kylebebak/pen/wYRNzY/?editors=0010).
 
 ~~~js
+import 'react-dropzone-uploader/dist/styles.css'
 import Dropzone from 'react-dropzone-uploader'
 
 const MyUploader = () => {
-  const getUploadParams = ({ meta }) => {
-    const url = 'https://httpbin.org/post' // upload `url` and other upload params can be a function of file meta
-    const fileUrl = `${url}/${encodeURIComponent(meta.name)}` // new values can be merged into file meta
-    return { url, meta: { fileUrl } }
-  }
+  // specify upload params and url for your files
+  const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }
 
   // called every time a file's `status` changes
   const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }
 
-  // receives array of all files that are done uploading
+  // receives array of files that are done uploading when submit button is clicked
   const handleSubmit = (files) => { console.log(files.map(f => f.meta)) }
 
   return (
@@ -52,7 +55,9 @@ const MyUploader = () => {
 }
 ~~~
 
-Want to disable the file input? Just pass `null` for `InputComponent`. Don't need a submit button after files are uploaded? Pass `null` for `SubmitButtonComponent`, or simply omit the `onSubmit` prop.
+The only prop needed to perform uploads is `getUploadParams`. `onChangeStatus` is included to show how a file's status changes as it's dropped (or picked) and then uploaded.
+
+__RDU is modular__. Want to disable the file input? Pass `null` for `InputComponent`. Don't need a submit button after files are uploaded? Pass `null` for `SubmitButtonComponent`, or simply omit the `onSubmit` prop.
 
 Don't want to upload files? Omit `getUploadParams`, and you'll have a dropzone that just calls `onChangeStatus` every time you add a file. This callback receives a `fileWithMeta` object and the file's `status`. If status is `'done'`, the file has been prepared and validated. Add it to an array of accepted files, or do whatever you want with it. And don't worry, `onChangeStatus` won't be called multiple times for the same status.
 

codepen/index.js

@@ -3,11 +3,12 @@ https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js
 https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js
 https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js
 https://unpkg.com/react-dropzone-uploader@<version>/dist/react-dropzone-uploader.umd.js
+https://unpkg.com/react-dropzone-uploader@<version>/dist/styles.css
  */
 
 const styles = {
   dropzoneActive: {
-    borderColor: ''#3DC59F'',
+    borderColor: '#3DC59F',
   },
 }
 
@@ -32,6 +33,7 @@ const App = () => {
       onChangeStatus={handleChangeStatus}
       onSubmit={handleSubmit}
       styles={styles}
+      height={200}
     />
   )
 }

example/src/App.js

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import '../../src/styles.css'
 import Dropzone from '../../src/Dropzone'
 
 import './styles.css'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dropzone-uploader",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": "Kyle Bebak <kylebebak@gmail.com>",
   "description": "React file dropzone and uploader: fully customizable, progress indicators, upload cancellation and restart, zero deps",
   "main": "./dist/react-dropzone-uploader.js",
@@ -53,7 +53,7 @@
     "webpack-dev-server": "^3.1.9"
   },
   "scripts": {
-    "build": "NODE_ENV=production webpack --config webpack.build.config.js",
+    "build": "NODE_ENV=production webpack --config webpack.build.config.js && cp src/styles.css dist/styles.css",
     "dev": "webpack-dev-server --config webpack.config.js --mode development --open",
     "lint": "eslint src example/src"
   },

src/Dropzone.js

@@ -6,7 +6,6 @@ import InputDefault from './Input'
 import PreviewDefault from './Preview'
 import SubmitButtonDefault from './SubmitButton'
 import { formatBytes, formatDuration, accepts, mergeStyles } from './utils'
-import './styles.css'
 
 let id = 0
 

src/Input.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import './styles.css'
-
 const Input = (props) => {
   const { className, style, accept, content = 'Drop Or Pick Files', withFilesContent, onFiles, files } = props
   return (

src/Preview.js

@@ -5,7 +5,6 @@ import { formatBytes, formatDuration } from './utils'
 import cancelImg from './assets/cancel.svg'
 import removeImg from './assets/remove.svg'
 import restartImg from './assets/restart.svg'
-import './styles.css'
 
 const iconByFn = {
   cancel: { backgroundImage: `url(${cancelImg})` },

src/SubmitButton.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import './styles.css'
-
 const SubmitButton = (props) => {
   const { className, buttonClassName, style, buttonStyle, content = 'Submit', disabled, onSubmit, files } = props