rc-upload

What is rc-upload?

The rc-upload npm package is a React component for uploading files. It allows users to upload files via drag and drop, or by using a file input. It supports multiple file uploads, progress feedback, and custom upload triggers.

What are rc-upload's main functionalities?

File Upload

This feature allows users to upload files to a specified server endpoint. The 'action' property defines the URL to which the files will be uploaded. The 'onChange' callback provides file status updates.

import Upload from 'rc-upload';

const props = {
  action: '//jsonplaceholder.typicode.com/posts/',
  onChange({ file, fileList }) {
    if (file.status !== 'uploading') {
      console.log(file, fileList);
    }
  },
  defaultFileList: [],
};

<Upload {...props}>
  <button>Click to Upload</button>
</Upload>

Drag and Drop

This feature enables drag-and-drop file uploads. The 'type' property is set to 'drag' to enable this functionality. The 'accept' property can be used to restrict the file types that can be uploaded.

import Upload from 'rc-upload';

const props = {
  action: '//jsonplaceholder.typicode.com/posts/',
  type: 'drag',
  accept: '.png',
  beforeUpload(file) {
    // Perform file validation or other operations before upload
    return true;
  },
  onDrop(e) {
    console.log('Dropped files', e.dataTransfer.files);
  }
};

<Upload {...props}>
  <p>Drag files here to upload</p>
</Upload>

Progress Feedback

This feature provides feedback on the progress of the file upload. The 'onProgress' callback is called during the upload process and provides information about the current progress.

import Upload from 'rc-upload';

const props = {
  action: '//jsonplaceholder.typicode.com/posts/',
  onProgress(step, file) {
    console.log('Upload progress:', step.percent, 'File:', file.name);
  }
};

<Upload {...props}>
  <button>Click to Upload</button>
</Upload>

Other packages similar to rc-upload

react-dropzone

react-dropzone is a popular React library for drag-and-drop file uploads with image previews. It is similar to rc-upload but also provides a dropzone UI component and more extensive customization options.

react-filepond

react-filepond is a React wrapper for FilePond, a flexible and fun JavaScript file upload library. It offers a modern interface with image editing capabilities, which rc-upload does not provide out of the box.

uppy

uppy is a sleek, modular file uploader that integrates seamlessly with React. It supports drag-and-drop, remote file fetching, and webcam capture. Uppy provides a rich set of features and plugins, making it more feature-rich compared to rc-upload.

README

rc-upload

---

upload ui component for react

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/upload/examples/simple.html

Feature

• support ie8,ie8+,chrome,firefox,safari

install

Usage

var Upload = require('rc-upload');
var React = require('react');
React.render(<Upload />, container);

API

props

name	type	默认值	说明
name	string	file	file param post to server
action	string		from action url
data	object		other data object to post
accept	string		input accept attribute
forceAjax	bool		force to use ajax render. used for server render
multiple	boolean	false	only support ie10+
onStart	function		start upload file
onError	function		error callback
onSuccess	function		success callback
onProgress	function		progress callback, only for modern browsers
beforeStart	function	null	before upload check, return a Promise, only for modern browsers

onError arguments

1. err: request error message
2. responce: request responce, not support on iframeUpload
3. file: upload file object

onSuccess arguments

1. result: request body
2. file: upload file

IE8/9 Note

In iframe uploader way, the content-type of response should be text/plain or text/html.referense

If the Page set document.domain, then server should output document.domain according to _documentDomain parameter.

var ret = '';
if (postData._documentDomain) {
  ret += '<script>document.domain="'+postData._documentDomain+'";</script>';
}
this.body = ret + '{"url":"xx.jpq"}';

License

rc-upload is released under the MIT license.