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.

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.

import React from 'react';
import PreviewUploaer from 'preview-uploader';
...
<PreviewUploaer>
  click me to preview
</PreviewUploaer>

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>

If you found a bug, please report to github issues, and tell me which step triggered an error occurred.

If you are interested about the repository, welcome you give me a Pull Request or forward.