Adds umd build to webpack; adds codepen code; prepares for 1.2.0

codepen/index.html

@@ -0,0 +1 @@
+<div id="example"></div>

codepen/index.js

@@ -0,0 +1,34 @@
+/**
+https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js
+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
+ */
+
+const App = () => {
+  const getUploadParams = ({ meta }) => {
+    const url = 'https://httpbin.org/post'
+    const fileUrl = `${url}/${encodeURIComponent(meta.name)}`
+    return { url, meta: { fileUrl } }
+  }
+
+  const handleSubmit = (files) => {
+    console.log(files.map(f => f.meta))
+  }
+
+  const onChangeStatus = ({ meta }, status) => {
+    console.log(status, meta)
+  }
+
+  return (
+    <ReactDropzoneUploader.FileUploader
+      getUploadParams={getUploadParams}
+      onChangeStatus={onChangeStatus}
+      onSubmit={handleSubmit}
+      maxSizeBytes={1024 * 1024 * 1000}
+    />
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('example'))

example/src/App.js

@@ -4,9 +4,9 @@ import FileUploader from '../../src/FileUploader'
 
 const App = () => {
   const getUploadParams = ({ file, meta }) => {
-    const url = 'http://httpbin.org/post'
+    const url = 'https://httpbin.org/post'
     const fileUrl = `${url}/${encodeURIComponent(meta.name)}`
-    return { url: 'http://httpbin.org/post', meta: { fileUrl } }
+    return { url, meta: { fileUrl } }
   }
 
   const handleSubmit = (files) => {

package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-dropzone-uploader",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Kyle Bebak <kylebebak@gmail.com>",
   "description": "React file dropzone and uploader: fully customizable, progress indicators, cancellable uploads, zero deps",
-  "main": "./dist/FileUploader.js",
+  "main": "./dist/react-dropzone-uploader.js",
+  "module": "./dist/react-dropzone-uploader.umd.js",
   "keywords": [
     "react",
     "react-component",

src/FileUploader.js

@@ -342,4 +342,4 @@ FileUploader.defaultProps = {
 }
 
 export default FileUploader
-export { formatBytes, formatDuration }
+export { FileUploader, formatBytes, formatDuration }

src/SubmitButton.js

@@ -6,7 +6,8 @@ import './FileUploader.css'
 const SubmitButton = ({ onSubmit, files, className }) => {
   if (!onSubmit) return null
 
-  const disabled = files.some(f => f.meta.status === 'uploading' || f.meta.status === 'preparing') ||
+  const disabled =
+    files.some(f => f.meta.status === 'uploading' || f.meta.status === 'preparing') ||
     !files.some(f => ['headers_received', 'done'].includes(f.meta.status))
 
   const handleSubmit = () => {

webpack.build.config.js

@@ -5,34 +5,46 @@ if (process.env.NODE_ENV !== 'production') {
   throw new Error('Production builds must have NODE_ENV=production.')
 }
 
-module.exports = {
-  mode: 'production',
-  entry: './src/FileUploader.js',
-  output: {
+function createConfig(output) {
+  return {
+    mode: 'production',
+    entry: './src/FileUploader.js',
+    output,
+    optimization: {
+      minimizer: [new UglifyJSPlugin()],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js?$/,
+          exclude: /node_modules/,
+          use: 'babel-loader',
+        },
+        {
+          test: /\.css$/,
+          exclude: /node_modules/,
+          loaders: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
+          exclude: /node_modules/,
+          loader: 'url-loader?limit=10000',
+        },
+      ],
+    },
+  }
+}
+
+module.exports = [
+  createConfig({
     path: path.resolve('dist'),
-    filename: 'FileUploader.js',
     libraryTarget: 'commonjs2',
-  },
-  optimization: {
-    minimizer: [new UglifyJSPlugin()],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js?$/,
-        exclude: /node_modules/,
-        use: 'babel-loader',
-      },
-      {
-        test: /\.css$/,
-        exclude: /node_modules/,
-        loaders: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
-        exclude: /node_modules/,
-        loader: 'url-loader?limit=10000',
-      },
-    ],
-  },
-}
+    filename: 'react-dropzone-uploader.js',
+  }),
+  createConfig({
+    path: path.resolve('dist'),
+    libraryTarget: 'umd',
+    filename: 'react-dropzone-uploader.umd.js',
+    library: 'ReactDropzoneUploader',
+  }),
+]