Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/falconshark/hologram-image-upload
React image uploader with dropzone and cropper function
https://github.com/falconshark/hologram-image-upload
crop dropzone html5 image-upload react
Last synced: 3 months ago
JSON representation
React image uploader with dropzone and cropper function
- Host: GitHub
- URL: https://github.com/falconshark/hologram-image-upload
- Owner: falconshark
- License: mit
- Created: 2017-03-03T10:03:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-24T08:37:28.000Z (about 5 years ago)
- Last Synced: 2024-05-19T03:21:02.605Z (6 months ago)
- Topics: crop, dropzone, html5, image-upload, react
- Language: JavaScript
- Size: 1.09 MB
- Stars: 5
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-hk-open-source - hologram-image-upload - 基於React的圖片上傳工具，附帶圖片裁剪功能。[](https://github.com/dollars0427/hologram-image-upload/stargazers) (Javascript)
README
# Hologram Image Upload
React image uploader with dropzone and cropper function, which used [React Dropzone](https://github.com/okonet/react-dropzone) and [React Image Crop](https://github.com/DominicTobias/react-image-crop).
You can please feel free to open issues or pull request.
[](https://www.npmjs.com/package/hologram-image-upload)
## Demo
https://hologram.sardo.work/
## Features
- Using dropzone to upload multiple image files
- Crop and preview image
## Browser Support
- Latest Firefox
- Latest Chrome
- IE 11 and Edge
## Installation
```bash
npm install hologram-image-upload --save
```
## Usage
```js
import Hologram from 'hologram-image-upload';
```
After version 2.5, you will not need require any css file now.
## Props
#### defaultFiles (optional)
Mockup images of dropzone. You could pass the name, url, and type of file, then it will be add to dropzone when Hologram mounted.
```jsx
```
#### uploader (optional)
The post url of your upload handler. You need to pass this prop or a custom upload function for everything to work.
```jsx
```
#### maxFiles (optional)
If files more than this number, it will not be uploaded. However, if number is -1, user will be allow to upload unlimited number of image. Default Number is -1.
```js
var maxFiles = 10;
```
#### Custom Upload Function (optional)
If you want, you can pass in your custom upload function as a prop. The function takes two arguments: The file information and the actual file data. This function MUST return a promise
```jsx
myUploadFunc(file, data) {
return new Promise((resolve, reject) => {
// FANCY TASKS HERE
// do this and this and this
// END OF FANCY TASKS
request.post(FANCY_URL).send(MY_FANCY_DATA).end((err, res) =>{
if (err) return reject(err)
resolve(res)
});
});
}
```
#### dropzoneConfig (optional)
Config of React Dropzone.
https://github.com/okonet/react-dropzone
```jsx
var dropzoneConfig = {
style : {
textAlign: 'center',
padding: '2.5em 0',
background: 'rgba(0,0,0,0.5)',
color: '#fff'
}
}
```
#### cropperConfig (optional)
Config of React Image Crop.
https://github.com/DominicTobias/react-image-crop
```jsx
var crop = {
x: 20,
y: 10,
}
```
#### onComplete(result) (optional)
Callback function which trigger when image uploaded.
It will pass a object which contain http response, you can use it to handler the result of upload.
## Contributing
You can clone this repository then start develop at sandbox, or feel free to open issue on github.
Build package:
```bash
npm run build
```
Watch package change and build it:
```bash
npm run watch
```