Skip to content

Commit

Permalink
DIG-25624 Added the component, tests and setup
Browse files Browse the repository at this point in the history
  • Loading branch information
eriksalhus committed Jul 21, 2017
1 parent 0bef16e commit d45319a
Show file tree
Hide file tree
Showing 21 changed files with 2,471 additions and 446 deletions.
2 changes: 1 addition & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
"react"
],
"plugins": [
'transform-object-rest-spread'
"transform-object-rest-spread"
]
}
23 changes: 7 additions & 16 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,23 +1,14 @@
{
"env": {
"es6": true,
"browser": true,
"node": true
},
"extends": "eslint-config-ffe",
"parserOptions": {
sourceType: "module",
"ecmaFeatures": {
"jsx": true
}
},
"extends": "ffe",
"parser": "babel-eslint",
"plugins": [
"react",
"jsx-a11y"
],

"globals": {
"describe": true,
"it": true
"it": true,
"document": true,
"window": true,
"beforeEach": true
}
}
}
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.idea
/lib
# Created by https://www.gitignore.io/api/node

Expand Down Expand Up @@ -36,4 +37,4 @@ node_modules
# Optional REPL history
.node_repl_history

example.html
example.html
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# CHANGELOG

## v1.0.0
* Initial version
88 changes: 78 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# ffe-file-upload-react
Upload file button with validation and list of uploaded files.

*NB! `FileReader` is not supported in IE9 or below so this component will not work for older browsers(http://caniuse.com/#search=filereader)*

## Install

Expand All @@ -9,24 +12,89 @@ $ npm install --save ffe-file-upload-react
## Usage

```javascript
import ffeFileUploadReact from 'ffe-file-upload-react';
import FileUpload from 'ffe-file-upload-react';

ffeFileUploadReact('ffe-component');
//=> 'hello ffe-component'
const Example = () => {
return (
<FileUpload
label={ string }
selectedFiles={ array }
onFilesSelected={ function }
onFileDeleted={ function }
selectedFilesHeaderLabel={ string }
errorMessage={ undefined || 'Wrong file format' }
/>
);
}
```
The passed `onFilesSelected` function will be called with `FileList`-object containing the `File`-objects the user selected.
* FileList - https://developer.mozilla.org/en-US/docs/Web/API/FileList
* File - https://developer.mozilla.org/en-US/docs/Web/API/File
## Test
## Examples
### Example with redux-saga
```javascript
//action.js
export const fraudFilesUploaded = (files) => ({ type: 'DOCUMENT_UPLOADED', files: files });
export const fraudFileRemoved = (file) => ({ type: 'DOCUMENT_REMOVED', file: file });
```
```javascript
//feature.js
...
<FileUpload
...
onFilesSelected={ files => dispatch(fraudFilesUploaded(files)) }
onFileDeleted={ file => dispatch(fraudFileRemoved(file)) }
...
/>
...
```
```javascript
//saga.js
import { getFileContent } from 'ffe-file-upload-react';

# Local
function* documentUploaded(action) {
for (let i = 0; i < action.files.length; i++) {
if (action.files[i].type !== 'application/pdf') {
yield put({ type: 'DOCUMENT_VALIDATION_ERROR' });
return;
}
}

For å teste endringer lokalt kan man kjøre i dette prosjektes mappe:
for (let i = 0; i < action.files.length; i++) {
const content = yield call(getFileContent, action.files[i]);
yield put({ type: 'DOCUMENT_ADDED', file: action.files[i], content });
}
}

export function* documentUploadedSaga() {
yield* takeEvery('DOCUMENT_UPLOADED', documentUploaded);
}
```
sudo npm link
### Example with async await
```javascript
async function getContent(file) {
return getFileContent(file);
}
```
```javascript
const onFilesSelected = async function(files) {
for (let i = 0; i < files.length; i++) {
const file = files[i];

Og i prosjektet som skal bruke endringene gjort lokalt kan man kjøre:

const fileContent = await getContent(file);
// do something with fileContent
}
console.log(this.state);
}
```
npm link ffe-file-upload-react
```javascript
//feature.js
...
<FileUpload
...
onFilesSelected={ onFilesSelected }
...
/>
...
```
1 change: 0 additions & 1 deletion docs/create.js

This file was deleted.

80 changes: 80 additions & 0 deletions docs/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import ReactDom from 'react-dom';
import FileUpload from '../src/file-upload.jsx';
import { getFileContent } from '../src/file-content';
import './index.less';

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedFiles: []
};
this.onFilesSelected = this.onFilesSelected.bind(this);
this.onFileDeleted = this.onFileDeleted.bind(this);
}


static async getContent(file) {
return getFileContent(file);
}

async onFilesSelected(files) {
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type !== 'application/pdf') {
this.setState({
...this.state,
errorMessage: `"${file.name}" har feil filtype. PDF er påkrevd!`
});
return;
}

const content = await Example.getContent(file);
this.setState({
...this.state,
errorMessage: undefined,
selectedFiles: [
...this.state.selectedFiles,
{
name: file.name,
type: file.type,
size: file.size,
content: content
}
]
});
}
}

onFileDeleted(file) {
this.setState({
...this.state,
selectedFiles: [
...this.state.selectedFiles.filter(currentFile => currentFile.name !== file.name)
]
});
}

render() {
return (
<div>
<h1 className="ffe-h1">ffe-file-upload-react</h1>
<FileUpload
label={'Velg fil'}
selectedFiles={this.state.selectedFiles}
onFilesSelected={ this.onFilesSelected }
onFileDeleted={ this.onFileDeleted }
selectedFilesHeaderLabel={'Du har lastet opp:'}
errorMessage={this.state.errorMessage}
/>
</div>
);
}
}


ReactDom.render(
<Example/>,
document.getElementById('app')
);
15 changes: 15 additions & 0 deletions docs/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@import '~ffe-core/less/ffe.less';
@import '~ffe-form/less/form.less';
@import '~ffe-form/less/file-upload.less';
@font-url: "~ffe-core/fonts";

#app {
max-width: 500px;
width: auto;
margin: 40px auto;
margin-bottom: 80px;
font-size: 16px;
padding: 0 20px;
font-family: "MuseoSansRounded-500",arial,sans-serif;
text-align: left;
}
1 change: 1 addition & 0 deletions webpack/index.html → index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<title>ffe-file-upload-react</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="static/bundle.js"></script>
</body>
</html>
72 changes: 43 additions & 29 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,46 +1,60 @@
{
"name": "ffe-file-upload-react",
"version": "0.0.0",
"main": "lib/ffe-file-upload-react.js",
"main": "lib/index.js",
"scripts": {
"server": "npm run build && ./node_modules/.bin/webpack-dev-server",
"build": "babel -d lib/. --ignore=*.test.js src/. && npm run example",
"watch": "onchange 'src/**.js' -- npm run build",
"lint": "eslint src/.",
"start": "yarn server",
"server": "./node_modules/.bin/webpack-dev-server --progress --color",
"build": "babel -d lib/. --ignore=*.test.js src/.",
"watch": "onchange 'src/**.js' -- yarn build",
"lint": "eslint --ext .js,.jsx src/.",
"test:nsp": "nsp check",
"test:spec": "mocha --require babel-register src/**/*.test.js",
"test": "npm run test:spec && npm run test:nsp",
"tdd": "mocha --require babel-register src/**/*.test.js -w",
"test": "yarn test:spec && yarn test:nsp",
"tdd": "mocha --require babel-register src/**/*.test.js -w --watch-extensions jsx",
"example": "babel-node docs/create.js > example.html",
"prepublish": "npm run build",
"prepublish": "yarn build",
"has-published": "npm show . versions -s --json | grep -q \\\"${npm_package_version}\\\""
},
"devDependencies": {
"babel-loader": "^6.2.2",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"style-loader": "^0.13.0",
"eslint-loader": "^1.3.0",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1",
"eslint-plugin-react": "^5.0.1",
"eslint-plugin-jsx-a11y" : "1.2.2",
"react": "^15.0.0",
"react-addons-test-utils": "^15.0.0",
"enzyme": "^2.0.0",
"react-dom": "^15.0.0",
"onchange": "2.4.0",
"devDependencies": {
"babel-cli": "^6.4.5",
"babel-core": "^6.5.2",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-cli": "^6.4.5",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.5.0",
"babel-register": "^6.4.3",
"chai": "^3.5.0",
"eslint": "^2.9.0",
"eslint-config-ffe": "^2.0.0",
"mocha": "^2.4.5",
"nsp": "^2.2.0"
"chai": "^4.1.0",
"css-loader": "^0.28.4",
"enzyme": "^2.0.0",
"eslint": "^3.19.0",
"eslint-config-ffe": "^6.0.1",
"eslint-loader": "^1.3.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^3.0.2",
"eslint-plugin-react": "^6.10.3",
"ffe-core": "^10.0.0",
"ffe-form": "^7.0.0",
"file-loader": "^0.11.1",
"less": "^2.6.0",
"less-loader": "^4.0.5",
"mocha": "^3.4.2",
"nsp": "^2.2.0",
"onchange": "3.2.1",
"prop-types": "^15.5.10",
"react": "^15.0.0",
"react-addons-test-utils": "^15.0.0",
"react-dom": "^15.0.0",
"react-test-renderer": "^15.6.1",
"sinon": "^2.3.8",
"style-loader": "^0.18.2",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.5.1"
},
"peerDependencies": {
"react": "^15.x",
"react-dom": "15.x"
},
"publishConfig": {
"registry": "***REMOVED***"
Expand Down
3 changes: 0 additions & 3 deletions src/ffe-file-upload-react.js

This file was deleted.

8 changes: 0 additions & 8 deletions src/ffe-file-upload-react.test.js

This file was deleted.

9 changes: 9 additions & 0 deletions src/file-content.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@

export const getFileContent = (file) => {
return new Promise(function(resolve, reject) {
const reader = new window.FileReader();
reader.onload = event => resolve(event.target.result);
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
});
};

0 comments on commit d45319a

Please sign in to comment.