@jswork/react-upload-media
v1.1.5
Published
Customized uploader for react.
Downloads
56
Readme
react-upload-media
Customized uploader for react.
installation
npm install -S @jswork/react-upload-media
properties
| Name | Type | Required | Default | Description | | --------- | ------ | -------- | -------------- | ------------------------------------- | | className | string | false | - | The extended className for component. | | fileProps | object | false | - | Input.file props. | | value | array | false | [] | The changed value. | | count | number | false | - | The line count. | | onChange | func | false | noop | The change handler. | | onUpload | func | false | Promise.resove | The handler when file upload. |
usage
- import css
@import "~@jswork/wsui-frame-wrapper/dist/index.scss";
@import "~@jswork/react-fade-image/dist/style.scss";
@import "~@jswork/react-upload-self/dist/style.scss";
@import "~@jswork/react-upload-media/dist/style.scss";
@import '~@jswork/wsui-em-justify-list/dist/index.scss';
// customize your styles:
$react-upload-media-options: ()
- import js
import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactUploadMedia from '@jswork/react-upload-media';
import './assets/style.scss';
import '@jswork/next-times';
class App extends React.Component {
state = {
value2:[],
value: [
'https://tva1.sinaimg.cn/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg',
'https://tva1.sinaimg.cn/large/008i3skNgy1gqh868msafj302s02st8l.jpg',
'https://randomuser.me/api/portraits/lego/1.jpg',
'https://randomuser.me/api/portraits/lego/2.jpg',
'https://randomuser.me/api/portraits/lego/3.jpg',
'https://randomuser.me/api/portraits/lego/4.jpg',
'https://randomuser.me/api/portraits/lego/5.jpg',
'https://randomuser.me/api/portraits/lego/6.jpg',
]
};
handleChange = (e) => {
console.log('handle change:',e.target.value);
this.setState({ value: e.target.value });
};
handleUpload = (e) => {
console.log('loading...');
const values = e.target.value;
console.log('values:', values);
return new Promise((resolve) => {
setTimeout(() => {
const urls = nx.times(
values.length,
(idx) => `https://randomuser.me/api/portraits/lego/${idx + 1}.jpg`
);
console.log('done', urls);
resolve(urls);
}, 2000);
});
// console.log('upload info:', e.target.value);
};
render() {
return (
<ReactDemokit
className="p-3 app-container"
url="https://github.com/afeiship/react-upload-media">
<ReactUploadMedia
count={4}
value={this.state.value}
onChange={this.handleChange}
onUpload={this.handleUpload}
/>
</ReactDemokit>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
documentation
- https://afeiship.github.io/react-upload-media/
license
Code released under the MIT license.