{"library":"rc-upload","title":"React Upload Component","description":"rc-upload is a lightweight, unstyled React UI component for handling file uploads. It provides foundational upload capabilities such as drag-and-drop, folder uploads, and paste-from-clipboard functionality without imposing any specific visual design, allowing developers full control over the user interface. The current stable version is 4.11.0. The project maintains an active release cadence, with minor versions released periodically to introduce new features, address bugs, and update dependencies. Its key differentiators include its headless architecture, extensive customization options via props like `customRequest` and `beforeUpload`, and support for modern browser-based upload features. It is a core utility often used as a building block for more complex upload components.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-upload"],"cli":null},"imports":["import Upload from 'rc-upload';","import type { UploadProps } from 'rc-upload';","import type { RcFile } from 'rc-upload';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport Upload from 'rc-upload';\nimport type { UploadProps, RcFile } from 'rc-upload';\n\nconst App: React.FC = () => {\n  const [fileList, setFileList] = useState<RcFile[]>([]);\n\n  const handleStart: UploadProps['onStart'] = (file) => {\n    console.log('onStart', file.name);\n    setFileList((prev) => [...prev, { ...file, status: 'uploading' }]);\n  };\n\n  const handleSuccess: UploadProps['onSuccess'] = (response, file) => {\n    console.log('onSuccess', response, file.name);\n    setFileList((prev) => prev.map(f => f.uid === file.uid ? { ...f, status: 'done' } : f));\n  };\n\n  const handleError: UploadProps['onError'] = (err, response, file) => {\n    console.error('onError', err, response, file.name);\n    setFileList((prev) => prev.map(f => f.uid === file.uid ? { ...f, status: 'error' } : f));\n  };\n\n  const handleProgress: UploadProps['onProgress'] = (event, file) => {\n    console.log('onProgress', Math.round(event.percent || 0) + '%', file.name);\n  };\n\n  const beforeUpload: UploadProps['beforeUpload'] = (file, currentFileList) => {\n    const isLt2M = file.size / 1024 / 1024 < 2;\n    if (!isLt2M) {\n      alert('File must be smaller than 2MB!');\n      return false; // Stop upload\n    }\n    console.log('beforeUpload', file.name, currentFileList.length);\n    return true; // Proceed with upload\n  };\n\n  return (\n    <div>\n      <h1>File Upload Demo</h1>\n      <Upload\n        action=\"https://www.mocky.io/v2/5cc8019d300000980a055e76\" // Mock API endpoint\n        method=\"POST\"\n        name=\"myFile\"\n        multiple={true}\n        onStart={handleStart}\n        onSuccess={handleSuccess}\n        onError={handleError}\n        onProgress={handleProgress}\n        beforeUpload={beforeUpload}\n        withCredentials={false} // Adjust as needed for your backend\n        style={{\n          padding: '20px',\n          border: '2px dashed #ccc',\n          textAlign: 'center',\n          cursor: 'pointer',\n          margin: '20px 0'\n        }}\n      >\n        <button type=\"button\">Click to Upload or Drag File Here</button>\n      </Upload>\n      {fileList.length > 0 && (\n        <div>\n          <h2>Upload Status:</h2>\n          <ul>\n            {fileList.map((file) => (\n              <li key={file.uid}>\n                {file.name} - {file.status} {file.status === 'uploading' && '(in progress)'}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}