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

1. Must to installed Node.js (6.9.1 or up), if you are not installed, you can use nvm to install Node.js

2. 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.