Skip to content
This repository has been archived by the owner on Jun 5, 2022. It is now read-only.

Commit

Permalink
v1.2.8, upgrade deps, enable gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
JakeHartnell committed Feb 22, 2020
1 parent 0ab9c9c commit 18f8de5
Show file tree
Hide file tree
Showing 6 changed files with 17,760 additions and 242 deletions.
98 changes: 50 additions & 48 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Images uploader UI component

Simple component for upload and validate (client side) images with preview built with React.js.
This package use ['react-flip-move'](https://github.com/joshwcomeau/react-flip-move) for animate the file preview images.

Expand All @@ -11,65 +12,66 @@ npm install --save react-images-upload
## Usage

```javascript
import React from 'react';
import ImageUploader from 'react-images-upload';
import React from "react";
import ImageUploader from "react-images-upload";

class App extends React.Component {
constructor(props) {
super(props);
this.state = { pictures: [] };
this.onDrop = this.onDrop.bind(this);
}

constructor(props) {
super(props);
this.state = { pictures: [] };
this.onDrop = this.onDrop.bind(this);
}

onDrop(pictureFiles, pictureDataURLs) {
this.setState({
pictures: this.state.pictures.concat(pictureFiles),
});
}
onDrop(pictureFiles, pictureDataURLs) {
this.setState({
pictures: this.state.pictures.concat(pictureFiles)
});
}

render() {
return (
<ImageUploader
withIcon={true}
buttonText='Choose images'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif']}
maxFileSize={5242880}
/>
);
}
render() {
return (
<ImageUploader
withIcon={true}
buttonText="Choose images"
onChange={this.onDrop}
imgExtension={[".jpg", ".gif", ".png", ".gif"]}
maxFileSize={5242880}
/>
);
}
}
```

### Available Options

| parameter | type | default | description |
| :--------: | :--: | :-----: | :---------- |
| className | String | - | Class name for the input. |
| onChange | Function | - | On change handler for the input. |
| buttonClassName | String | - | Class name for upload button. |
| buttonStyles | Object | - | Inline styles for upload button. |
| withPreview | Boolean | false | Show preview of selected images. |
| defaultImages | Array | ['imgUrl1', 'imgUrl2'] | Pre-populate with default images. |
| accept | String | "accept=image/*" | Accept attribute for file input. |
| name | String | - | Input name. |
| withIcon | Boolean | true | If true, show upload icon on top |
| buttonText | String | 'Choose images' | The text that display in the button. |
| buttonType | String | 'submit' | The value of the button's "type" attribute. |
| withLabel | Boolean | true | Show instruction label |
| label | String | 'Max file size: 5mb, accepted: jpg|gif|png|gif' | Label text |
| labelStyles | Object | - | Inline styles for the label. |
| labelClass | string | - | Class name for the label |
| imgExtension | Array | ['.jpg', '.gif', '.png', '.gif'] | Supported image extension (will use in the image validation). |
| maxFileSize | Number | 5242880 | Max image size. |
| fileSizeError | String | " file size is too big" | Label for file size error message. |
| fileTypeError | String | " is not supported file extension" | Label for file extension error message. |
| errorClass | String | - | Class for error messages |
| errorStyle | Object | - | Inline styles for errors |
| parameter | type | default | description |
| :-------------: | :------: | :--------------------------------: | :------------------------------------------------------------ |
| className | String | - | Class name for the input. |
| onChange | Function | - | On change handler for the input. |
| buttonClassName | String | - | Class name for upload button. |
| buttonStyles | Object | - | Inline styles for upload button. |
| withPreview | Boolean | false | Show preview of selected images. |
| defaultImages | Array | ['imgUrl1', 'imgUrl2'] | Pre-populate with default images. |
| accept | String | "accept=image/\*" | Accept attribute for file input. |
| name | String | - | Input name. |
| withIcon | Boolean | true | If true, show upload icon on top |
| buttonText | String | 'Choose images' | The text that display in the button. |
| buttonType | String | 'submit' | The value of the button's "type" attribute. |
| withLabel | Boolean | true | Show instruction label |
| label | String | 'Max file size: 5mb, accepted: jpg | gif | png | gif' | Label text |
| labelStyles | Object | - | Inline styles for the label. |
| labelClass | string | - | Class name for the label |
| imgExtension | Array | ['.jpg', '.gif', '.png', '.gif'] | Supported image extension (will use in the image validation). |
| maxFileSize | Number | 5242880 | Max image size. |
| fileSizeError | String | " file size is too big" | Label for file size error message. |
| fileTypeError | String | " is not supported file extension" | Label for file extension error message. |
| errorClass | String | - | Class for error messages |
| errorStyle | Object | - | Inline styles for errors |

### Development
Make sure you have [yarn](https://yarnpkg.com/en/) installed. Clone the repo and run `yarn`.

Clone the repo and run `npm ci`. Start development server with `npm start`.

### License

MIT
Loading

0 comments on commit 18f8de5

Please sign in to comment.