@rc-component/upload - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

es/AjaxUploader.d.ts

@@ -16,2 +16,3 @@ import React, { Component } from 'react';
     private _isMounted;
+    private filterFile;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -18,0 +19,0 @@ onClick: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;

es/AjaxUploader.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* eslint react/no-is-mounted:0,react/sort-comp:0,react/prop-types:0 */
-import clsx from 'classnames';
 import pickAttrs from "@rc-component/util/es/pickAttrs";
+import { clsx } from 'clsx';
 import React, { Component } from 'react';
@@ -17,3 +17,3 @@ import attrAccept from "./attr-accept";
   _isMounted;
-  onChange = e => {
+  filterFile = (file, force = false) => {
     const {
@@ -23,6 +23,26 @@ accept,
     } = this.props;
+    let filterFn;
+    let acceptFormat;
+    if (typeof accept === 'string') {
+      acceptFormat = accept;
+    } else {
+      const {
+        filter,
+        format
+      } = accept || {};
+      acceptFormat = format;
+      if (filter === 'native') {
+        filterFn = () => true;
+      } else {
+        filterFn = filter;
+      }
+    }
+    const mergedFilter = filterFn || (directory || force ? currentFile => attrAccept(currentFile, acceptFormat) : () => true);
+    return mergedFilter(file);
+  };
+  onChange = e => {
     const {
       files
     } = e.target;
-    const acceptedFiles = [...files].filter(file => !directory || attrAccept(file, accept));
+    const acceptedFiles = [...files].filter(file => this.filterFile(file));
     this.uploadFiles(acceptedFiles);
@@ -58,3 +78,2 @@ this.reset();
       multiple,
-      accept,
       directory
@@ -68,6 +87,6 @@ } = this.props;
     if (directory) {
-      files = await traverseFileTree(Array.prototype.slice.call(items), _file => attrAccept(_file, this.props.accept));
+      files = await traverseFileTree(Array.prototype.slice.call(items), this.filterFile);
       this.uploadFiles(files);
     } else {
-      let acceptFiles = [...files].filter(file => attrAccept(file, accept));
+      let acceptFiles = [...files].filter(file => this.filterFile(file, true));
       if (multiple === false) {
@@ -318,3 +337,2 @@ acceptFiles = files.slice(0, 1);
       directory,
-      folder,
       openFileDialogOnClick,
@@ -326,4 +344,6 @@ onMouseEnter,
     } = this.props;
-    const cls = clsx({
-      [prefixCls]: true,
+
+    // Extract accept format for input element
+    const acceptFormat = typeof accept === 'string' ? accept : accept?.format;
+    const cls = clsx(prefixCls, {
       [`${prefixCls}-disabled`]: disabled,
@@ -333,3 +353,3 @@ [className]: className
     // because input don't have directory/webkitdirectory type declaration
-    const dirProps = directory || folder ? {
+    const dirProps = directory ? {
       directory: 'directory',
@@ -372,3 +392,3 @@ webkitdirectory: 'webkitdirectory'
       className: classNames.input,
-      accept: accept
+      accept: acceptFormat
     }, dirProps, {
@@ -375,0 +395,0 @@ multiple: multiple,

es/interface.d.ts

 import type * as React from 'react';
 export type BeforeUploadFileType = File | Blob | boolean | string;
 export type Action = string | ((file: RcFile) => string | PromiseLike<string>);
-export interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onError' | 'onProgress'> {
+export type AcceptConfig = {
+    format: string;
+    filter?: 'native' | ((file: RcFile) => boolean);
+};
+export interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onError' | 'onProgress' | 'accept'> {
     name?: string;
@@ -12,8 +16,6 @@ style?: React.CSSProperties;
     method?: UploadRequestMethod;
-    /** @deprecated Please use `folder` instead */
     directory?: boolean;
-    folder?: boolean;
     data?: Record<string, unknown> | ((file: RcFile | string | Blob) => Record<string, unknown>);
     headers?: UploadRequestHeader;
-    accept?: string;
+    accept?: string | AcceptConfig;
     multiple?: boolean;
@@ -20,0 +22,0 @@ onBatchStart?: (fileList: {

lib/AjaxUploader.d.ts

@@ -16,2 +16,3 @@ import React, { Component } from 'react';
     private _isMounted;
+    private filterFile;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -18,0 +19,0 @@ onClick: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;

lib/AjaxUploader.js

@@ -7,4 +7,4 @@ "use strict";
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
@@ -26,3 +26,3 @@ var _attrAccept = _interopRequireDefault(require("./attr-accept"));
   _isMounted;
-  onChange = e => {
+  filterFile = (file, force = false) => {
     const {
@@ -32,6 +32,26 @@ accept,
     } = this.props;
+    let filterFn;
+    let acceptFormat;
+    if (typeof accept === 'string') {
+      acceptFormat = accept;
+    } else {
+      const {
+        filter,
+        format
+      } = accept || {};
+      acceptFormat = format;
+      if (filter === 'native') {
+        filterFn = () => true;
+      } else {
+        filterFn = filter;
+      }
+    }
+    const mergedFilter = filterFn || (directory || force ? currentFile => (0, _attrAccept.default)(currentFile, acceptFormat) : () => true);
+    return mergedFilter(file);
+  };
+  onChange = e => {
     const {
       files
     } = e.target;
-    const acceptedFiles = [...files].filter(file => !directory || (0, _attrAccept.default)(file, accept));
+    const acceptedFiles = [...files].filter(file => this.filterFile(file));
     this.uploadFiles(acceptedFiles);
@@ -67,3 +87,2 @@ this.reset();
       multiple,
-      accept,
       directory
@@ -77,6 +96,6 @@ } = this.props;
     if (directory) {
-      files = await (0, _traverseFileTree.default)(Array.prototype.slice.call(items), _file => (0, _attrAccept.default)(_file, this.props.accept));
+      files = await (0, _traverseFileTree.default)(Array.prototype.slice.call(items), this.filterFile);
       this.uploadFiles(files);
     } else {
-      let acceptFiles = [...files].filter(file => (0, _attrAccept.default)(file, accept));
+      let acceptFiles = [...files].filter(file => this.filterFile(file, true));
       if (multiple === false) {
@@ -327,3 +346,2 @@ acceptFiles = files.slice(0, 1);
       directory,
-      folder,
       openFileDialogOnClick,
@@ -335,4 +353,6 @@ onMouseEnter,
     } = this.props;
-    const cls = (0, _classnames.default)({
-      [prefixCls]: true,
+
+    // Extract accept format for input element
+    const acceptFormat = typeof accept === 'string' ? accept : accept?.format;
+    const cls = (0, _clsx.clsx)(prefixCls, {
       [`${prefixCls}-disabled`]: disabled,
@@ -342,3 +362,3 @@ [className]: className
     // because input don't have directory/webkitdirectory type declaration
-    const dirProps = directory || folder ? {
+    const dirProps = directory ? {
       directory: 'directory',
@@ -381,3 +401,3 @@ webkitdirectory: 'webkitdirectory'
       className: classNames.input,
-      accept: accept
+      accept: acceptFormat
     }, dirProps, {
@@ -384,0 +404,0 @@ multiple: multiple,

lib/interface.d.ts

 import type * as React from 'react';
 export type BeforeUploadFileType = File | Blob | boolean | string;
 export type Action = string | ((file: RcFile) => string | PromiseLike<string>);
-export interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onError' | 'onProgress'> {
+export type AcceptConfig = {
+    format: string;
+    filter?: 'native' | ((file: RcFile) => boolean);
+};
+export interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onError' | 'onProgress' | 'accept'> {
     name?: string;
@@ -12,8 +16,6 @@ style?: React.CSSProperties;
     method?: UploadRequestMethod;
-    /** @deprecated Please use `folder` instead */
     directory?: boolean;
-    folder?: boolean;
     data?: Record<string, unknown> | ((file: RcFile | string | Blob) => Record<string, unknown>);
     headers?: UploadRequestHeader;
-    accept?: string;
+    accept?: string | AcceptConfig;
     multiple?: boolean;
@@ -20,0 +22,0 @@ onBatchStart?: (fileList: {

package.json

 {
   "name": "@rc-component/upload",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "upload ui component for react",
@@ -41,3 +41,3 @@ "keywords": [
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.2.5"
+    "clsx": "^2.1.1"
   },
@@ -50,4 +50,5 @@ "devDependencies": {
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@umijs/fabric": "^4.0.1",
@@ -57,3 +58,3 @@ "axios": "^1.9.0",
     "coveralls": "^3.0.3",
-    "cross-env": "^7.0.0",
+    "cross-env": "^10.1.0",
     "dumi": "^2.1.0",
@@ -64,3 +65,2 @@ "eslint": "^8.0.0",
     "gh-pages": "^6.1.1",
-    "raf": "^3.4.0",
     "rc-test": "^7.0.13",
@@ -67,0 +67,0 @@ "react": "^18.0.0",

README.md

@@ -11,10 +11,6 @@ # @rc-component/upload
 [travis-url]: https://travis-ci.com/react-component/upload
-[github-actions-image]: https://github.com/react-component/upload/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/upload/actions
+[github-actions-image]: https://github.com/react-component/upload/actions/workflows/react-component-ci.yml/badge.svg
+[github-actions-url]: https://github.com/react-component/upload/actions/workflows/react-component-ci.yml
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/upload/master.svg?style=flat-square
 [codecov-url]: https://app.codecov.io/gh/react-component/upload
-[david-url]: https://david-dm.org/react-component/upload
-[david-image]: https://david-dm.org/react-component/upload/status.svg?style=flat-square
-[david-dev-url]: https://david-dm.org/react-component/upload?type=dev
-[david-dev-image]: https://david-dm.org/react-component/upload/dev-status.svg?style=flat-square
 [download-image]: https://img.shields.io/npm/dm/@rc-component/upload.svg?style=flat-square
@@ -21,0 +17,0 @@ [download-url]: https://npmjs.org/package/@rc-component/upload

No alert changes

Improved metrics

Total package byte prevSize

58992

1.73%

Lines of code

1648

2.74%

Worsened metrics

Number of lines in readme file

115

-3.36%

Dependency changes

• + Added

  clsx@^2.1.1

• + Added

  clsx@2.1.1
  (transitive)

• - Removed

  classnames@^2.2.5

• - Removed

  classnames@2.5.1
  (transitive)