Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
rc-upload
Advanced tools
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.
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>
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 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 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.
React Upload
npm install
npm start
online example: https://upload.react-component.vercel.app/
var Upload = require('rc-upload');
var React = require('react');
React.render(<Upload />, container);
name | type | default | description |
---|---|---|---|
name | string | file | file param post to server |
style | object | {} | root component inline style |
className | string | - | root component className |
disabled | boolean | false | whether disabled |
component | "div" | "span" | "span" |
action | string | function(file): string | Promise<string> | form action url | |
method | string | post | request method |
directory | boolean | false | support upload whole directory |
data | object/function(file) | other data object to post or a function which returns a data object(a promise object which resolve a data object) | |
headers | object | {} | http headers to post, available in modern browsers |
accept | string | input accept attribute | |
capture | string | input capture attribute | |
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 | |
beforeUpload | function | null | before upload check, return false or a rejected Promise will stop upload, only for modern browsers |
customRequest | function | null | provide an override for the default xhr behavior for additional customization |
withCredentials | boolean | false | ajax upload with cookie send |
openFileDialogOnClick | boolean | true | useful for drag only upload as it does not trigger on enter key or click event |
err
: request error messageresponse
: request response, not support on iframeUploadfile
: upload fileresult
: response bodyfile
: upload filexhr
: xhr header, only for modern browsers which support AJAX upload. since
2.4.0Allows for advanced customization by overriding default behavior in AjaxUploader. Provide your own XMLHttpRequest calls to interface with custom backend processes or interact with AWS S3 service through the aws-sdk-js package.
customRequest callback is passed an object with:
onProgress: (event: { percent: number }): void
onError: (event: Error, body?: Object): void
onSuccess: (body: Object): void
data: Object
filename: String
file: File
withCredentials: Boolean
action: String
headers: Object
abort(file?: File) => void: abort the uploading file
rc-upload is released under the MIT license.
FAQs
upload ui component for react
The npm package rc-upload receives a total of 801,786 weekly downloads. As such, rc-upload popularity was classified as popular.
We found that rc-upload demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.