1.0.3 • Published 7 years ago
preview-uploader v1.0.3
PreviewUploader is a:
- A React Component what
- 100% JavaScript
- 100% Open Source Software
- Compression at client
- Auto orientation
PreviewUploader can design custom preview image Uploader. You can custom the uploading button style, and see the preview immediately. It can give me a base64 string after assigning an image file, then we can do something.
Setup
Must to installed Node.js (6.9.1 or up), if you are not installed, you can use nvm to install Node.js
At your project root folder
yarn add preview-uploader
.
Usage
Basic
import React from 'react';
import PreviewUploaer from 'preview-uploader';
...
<PreviewUploaer>
click me to preview
</PreviewUploaer>
Advanced
import PreviewUploaer from 'preview-uploader';
// custom previewer
const Previewer = ({ base64 }) => {
return (
<div
style={{
width: `200px`,
height: `200px`,
backgroundImage: `url(${base64})`,
backgroundSize: `cover`,
backgroundPosition: `center`,
}}
/>
);
}
...
<PreviewUploaer
maxW={500}
maxH={500}
onChange={(img) => { console.log(img) }}
previewComponent={<Previewer />}
>
click me to preview
</PreviewUploaer>
Props
Prop | Type | Default | Explain |
---|---|---|---|
maxW | number | 1000 | Preview image max width |
maxH | number | 1000 | Preview image max height |
onChange | function | base64 => console.warn(base64) | The Event be triggered by assigning a file, it can give me a base64 string. |
previewComponent | Component | {} | It can put a custom Component, and get a base64 string from this.props.base64 |
Report a bug
If you found a bug, please report to github issues, and tell me which step triggered an error occurred.
Join the developer
If you are interested about the repository, welcome you give me a Pull Request or forward.