├── .editorconfig ├── .eslintrc ├── .gitignore ├── README.md ├── index.html ├── package.json └── src ├── App.js └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | trim_trailing_whitespace = true 7 | end_of_line = lf 8 | insert_final_newline = true 9 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "rules": { 4 | "comma-dangle": [ 5 | 2, 6 | "always" 7 | ], 8 | "curly": 2, 9 | "dot-location": [ 10 | 2, 11 | "property" 12 | ], 13 | "dot-notation": 2, 14 | "eqeqeq": [ 15 | 2, 16 | "smart" 17 | ], 18 | "key-spacing": [ 19 | 1, { 20 | "beforeColon": false, 21 | "afterColon": true 22 | } 23 | ], 24 | "guard-for-in": 2, 25 | "no-caller": 2, 26 | "no-constant-condition": 2, 27 | "no-dupe-args": 2, 28 | "no-dupe-keys": 2, 29 | "no-duplicate-case": 2, 30 | "no-else-return": 2, 31 | "no-empty": 2, 32 | "no-empty-character-class": 2, 33 | "no-empty-label": 2, 34 | "no-eval": 2, 35 | "no-ex-assign": 2, 36 | "no-extra-semi": 2, 37 | "no-floating-decimal": 2, 38 | "no-func-assign": 2, 39 | "no-implied-eval": 2, 40 | "no-invalid-regexp": 2, 41 | "no-native-reassign": 2, 42 | "no-obj-calls": 2, 43 | "no-redeclare": 2, 44 | "no-regex-spaces": 2, 45 | "no-return-assign": 2, 46 | "no-unreachable": 2, 47 | "no-with": 2, 48 | "semi": 2, 49 | "use-isnan": 2, 50 | "wrap-iife": 2 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | 12 | # misc 13 | .DS_Store 14 | npm-debug.log 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dropzone-redux-form-example 2 | 3 | An example for integrating [ react dropzone](https://github.com/okonet/react-dropzone) and [redux-form](https://github.com/erikras/redux-form) within a simple react app. 4 | 5 | ## Installation 6 | 7 | * `git clone ` this repository 8 | * change into the new directory 9 | * `npm install` 10 | 11 | ## Running / Development 12 | 13 | * `npm start` will run the app 14 | * Visit the app at [http://localhost:3000](http://localhost:3000) 15 | 16 | ### Building 17 | 18 | * `npm run build` (production) 19 | * `npm run build --set-env-NODE_ENV=development` (development) 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Redux Form Dropzone Example 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dropzone-redux-form-example", 3 | "version": "1.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.4.1" 7 | }, 8 | "dependencies": { 9 | "react": "^15.3.1", 10 | "react-dom": "^15.3.1", 11 | "react-dropzone": "^3.5.3", 12 | "react-redux": "^4.4.5", 13 | "redux": "^3.5.2", 14 | "redux-form": "^6.0.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "./node_modules/react-scripts/config/eslint.js" 23 | }, 24 | "author": "Ollie Relph (https://github.com/BBB)", 25 | "license": "MIT", 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/BBB/dropzone-redux-form-example.git" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes, } from 'react'; 2 | import { reduxForm, Field } from 'redux-form'; 3 | 4 | import Dropzone from 'react-dropzone'; 5 | 6 | const FILE_FIELD_NAME = 'files'; 7 | 8 | const renderDropzoneInput = (field) => { 9 | const files = field.input.value; 10 | return ( 11 |
12 | field.input.onChange(filesToUpload)} 15 | > 16 |
Try dropping some files here, or click to select files to upload.
17 | 18 | {field.meta.touched && 19 | field.meta.error && 20 | {field.meta.error}} 21 | {files && Array.isArray(files) && ( 22 |
    23 | { files.map((file, i) =>
  • {file.name}
    • ) } 24 |
25 | )} 26 |
27 | ); 28 | } 29 | 30 | class App extends Component { 31 | 32 | static propTypes = { 33 | handleSubmit: PropTypes.func.isRequired, 34 | reset: PropTypes.func.isRequired, 35 | }; 36 | 37 | onSubmit(data) { 38 | var body = new FormData(); 39 | Object.keys(data).forEach(( key ) => { 40 | body.append(key, data[ key ]); 41 | }); 42 | 43 | console.info('POST', body, data); 44 | console.info('This is expected to fail:'); 45 | fetch(`http://example.com/send/`, { 46 | method: 'POST', 47 | body: body, 48 | }) 49 | .then(res => res.json()) 50 | .then(res => console.log(res)) 51 | .catch(err => console.error(err)); 52 | } 53 | 54 | render() { 55 | const { 56 | handleSubmit, 57 | reset, 58 | } = this.props; 59 | return ( 60 |
61 |
62 | 63 | 67 |
68 |
69 | 72 | 75 |
76 |
77 | ); 78 | } 79 | } 80 | 81 | export default reduxForm({ 82 | form: 'simple', 83 | })(App); 84 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, } from 'react-dom'; 3 | import { createStore, combineReducers, } from 'redux'; 4 | import { Provider, } from 'react-redux'; 5 | import { reducer as formReducer, } from 'redux-form'; 6 | 7 | import App from './App'; 8 | 9 | const reducer = combineReducers({ 10 | form: formReducer, 11 | }); 12 | 13 | function configureStore(initialState) { 14 | return createStore(reducer, initialState); 15 | } 16 | 17 | const store = configureStore({}); 18 | 19 | render( 20 | 21 | 22 | , 23 | document.getElementById('root') 24 | ); 25 | --------------------------------------------------------------------------------