ReactJS 常青文件选择器组件

简介

ReactJS 常青文件选择器组件是一个 ReactJS 组件，专门用于文件和文件夹的选择和展示。它可以使用简单的 API 将一个或多个文件或文件夹选择器集成到您的 React 应用程序中。

该组件提供了界面友好的文件选择器，使用户可以更轻松地选择他们需要的文件或文件夹，而无需了解有关文件系统的详细信息。

特性

• 用户友好的界面，应用于桌面和移动设备
• 多文件和文件夹选择
• 支持文件类型过滤
• 支持最大文件大小限制
• 支持本地化
• 可自定义外观和行为
• 完全可定制的界面

快速上手

安装

使用 npm 安装组件：

npm install reactjs-evergreen-file-picker

或者使用 Yarn：

yarn add reactjs-evergreen-file-picker

使用

使用以下代码示例快速创建一个文件选择器：

import React from 'react';
import FilePicker from 'reactjs-evergreen-file-picker';

function App() {
  const handleSelect = (files) => {
    console.log(files);
  };

  return (
    <FilePicker
      multiple
      onChange={handleSelect}
    />
  );
}

export default App;

API

Props

• multiple: 是否允许多文件选择，默认为 false。
• disabled: 是否禁用选择器，默认为 false。
• accept: 允许选择的文件类型，例如 image/*,application/pdf。
• maxSize: 允许文件的最大大小，以字节为单位。
• translations: 自定义本地化字符串，可以使用 en-US 或任何其他语言。
• style: 选择器的自定义样式对象。
• className: 选择器的自定义类名。
• allowFolderSelection: 是否允许选择文件夹，默认为 false。
• onSelect: 选择文件时触发的回调函数，参数为一个文件对象。
• onSelectFail: 文件选择失败时触发的回调函数，参数为一个错误信息对象。
• onLoadFail: 文件加载失败时触发的回调函数，参数为一个错误信息对象。

方法

• openDialog(): 打开文件选择器对话框。

例子

import React from 'react';
import FilePicker from 'reactjs-evergreen-file-picker';

function App() {
  const handleSelect = (files) => {
    console.log(files);
  };

  const handleLoadFail = (error) => {
    console.log(error);
  };

  const customStyle = {
    backgroundColor: 'red',
    color: 'white',
    padding: '10px',
    borderRadius: '4px',
    cursor: 'pointer',
  };

  return (
    <FilePicker
      multiple
      accept="image/*,application/pdf"
      maxSize={5000000}
      translations={{
        browse: '选择文件',
        browseFiles: '选择文件',
        browseFolders: '选择文件夹',
        selected: '已选择文件:',
        selectSomeFiles: '选择文件',
        selectSomeFolders: '选择文件夹',
        dropFiles: '拖动文件到此处',
        dropFolders: '拖动文件夹到此处',
        cancel: '取消',
        error: '出错了',
        fileTooLarge: '文件太大',
        loadFailed: '加载失败',
        folderAlreadySelected: '文件夹已选择',
        fileAlreadySelected: '文件已选择',
        confirmDelete: '确认删除?',
        deleteFile: '删除文件',
        deleteFolder: '删除文件夹',
        downloadFile: '下载文件',
        downloadFolder: '下载文件夹',
        renameFile: '重命名文件',
        renameFolder: '重命名文件夹',
        success: '成功',
      }}
      style={customStyle}
      allowFolderSelection
      onSelect={handleSelect}
      onLoadFail={handleLoadFail}
    />
  );
}

export default App;

参与贡献

如有任何疑问或建议，请提交一个问题并发布一个合并请求，以通过其他开发人员的审查来解决您的问题。感谢您的支持！

授权协议

MIT @ReactJS Evergreen File Picker