Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-images-uploading
Advanced tools
react-images-uploading - npm Package Compare versions
Comparing version 3.1.6 to 3.1.7
@@ -81,8 +81,8 @@ "use strict"; | ||
| var ReactImageUploading = function (_a) { | ||
| var _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, onError = _a.onError, children = _a.children, _c = _a.dataURLKey, dataURLKey = _c === void 0 ? constants_1.DEFAULT_DATA_URL_KEY : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxNumber, maxNumber = _e === void 0 ? constants_1.INIT_MAX_NUMBER : _e, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight, resolutionType = _a.resolutionType, _f = _a.inputProps, inputProps = _f === void 0 ? {} : _f; | ||
| var _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, onError = _a.onError, children = _a.children, _c = _a.dataURLKey, dataURLKey = _c === void 0 ? constants_1.DEFAULT_DATA_URL_KEY : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.maxNumber, maxNumber = _e === void 0 ? constants_1.INIT_MAX_NUMBER : _e, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight, resolutionType = _a.resolutionType, _f = _a.inputProps, inputProps = _f === void 0 ? {} : _f, _g = _a.allowNonImageType, allowNonImageType = _g === void 0 ? false : _g; | ||
| var inValue = value || []; | ||
| var inputRef = react_1.useRef(null); | ||
| var _g = react_1.useState(constants_1.DEFAULT_NULL_INDEX), keyUpdate = _g[0], setKeyUpdate = _g[1]; | ||
| var _h = react_1.useState(null), errors = _h[0], setErrors = _h[1]; | ||
| var _j = react_1.useState(false), isDragging = _j[0], setIsDragging = _j[1]; | ||
| var _h = react_1.useState(constants_1.DEFAULT_NULL_INDEX), keyUpdate = _h[0], setKeyUpdate = _h[1]; | ||
| var _j = react_1.useState(null), errors = _j[0], setErrors = _j[1]; | ||
| var _k = react_1.useState(false), isDragging = _k[0], setIsDragging = _k[1]; | ||
| var handleClickInput = react_1.useCallback(function () { return utils_1.openFileDialog(inputRef); }, [ | ||
@@ -128,2 +128,3 @@ inputRef, | ||
| value: inValue, | ||
| allowNonImageType: allowNonImageType, | ||
| })]; | ||
@@ -194,5 +195,3 @@ case 1: | ||
| }); }; | ||
| var acceptTypeString = react_1.useMemo(function () { return utils_1.getAcceptTypeString(acceptType); }, [ | ||
| acceptType, | ||
| ]); | ||
| var acceptTypeString = react_1.useMemo(function () { return utils_1.getAcceptTypeString(acceptType, allowNonImageType); }, [acceptType, allowNonImageType]); | ||
| var handleDrag = function (e) { | ||
@@ -199,0 +198,0 @@ e.preventDefault(); |
@@ -22,2 +22,3 @@ import React from 'react'; | ||
| inputProps?: React.HTMLProps<HTMLInputElement>; | ||
| allowNonImageType?: boolean; | ||
| } | ||
@@ -24,0 +25,0 @@ export interface ExportInterface { |
| import { ImageListType } from './typings'; | ||
| export declare const openFileDialog: (inputRef: any) => void; | ||
| export declare const getAcceptTypeString: (acceptType?: string[] | undefined) => string; | ||
| export declare const getAcceptTypeString: (acceptType?: string[] | undefined, allowNonImageType?: boolean | undefined) => string; | ||
| export declare const getBase64: (file: File) => Promise<string>; | ||
| export declare const getImage: (file: File) => Promise<HTMLImageElement>; | ||
| export declare const getListFiles: (files: FileList, dataURLKey: string) => Promise<ImageListType>; |
@@ -8,6 +8,8 @@ "use strict"; | ||
| }; | ||
| exports.getAcceptTypeString = function (acceptType) { | ||
| return acceptType && acceptType.length > 0 | ||
| ? acceptType.map(function (item) { return "." + item; }).join(', ') | ||
| : 'image/*'; | ||
| exports.getAcceptTypeString = function (acceptType, allowNonImageType) { | ||
| if (acceptType === null || acceptType === void 0 ? void 0 : acceptType.length) | ||
| return acceptType.map(function (item) { return "." + item; }).join(', '); | ||
| if (allowNonImageType) | ||
| return ''; | ||
| return 'image/*'; | ||
| }; | ||
@@ -14,0 +16,0 @@ exports.getBase64 = function (file) { |
@@ -7,3 +7,3 @@ import { ResolutionType, ErrorsType } from './typings'; | ||
| export declare const isMaxNumberValid: (totalNumber: any, maxNumber: any, keyUpdate: any) => boolean; | ||
| export declare const getErrorValidation: ({ fileList, value, maxNumber, keyUpdate, acceptType, maxFileSize, resolutionType, resolutionWidth, resolutionHeight, }: { | ||
| export declare const getErrorValidation: ({ fileList, value, maxNumber, keyUpdate, acceptType, maxFileSize, resolutionType, resolutionWidth, resolutionHeight, allowNonImageType, }: { | ||
| fileList: any; | ||
@@ -18,2 +18,3 @@ value: any; | ||
| resolutionHeight: any; | ||
| allowNonImageType: any; | ||
| }) => Promise<ErrorsType>; |
@@ -103,3 +103,3 @@ "use strict"; | ||
| exports.getErrorValidation = function (_a) { | ||
| var fileList = _a.fileList, value = _a.value, maxNumber = _a.maxNumber, keyUpdate = _a.keyUpdate, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionType = _a.resolutionType, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight; | ||
| var fileList = _a.fileList, value = _a.value, maxNumber = _a.maxNumber, keyUpdate = _a.keyUpdate, acceptType = _a.acceptType, maxFileSize = _a.maxFileSize, resolutionType = _a.resolutionType, resolutionWidth = _a.resolutionWidth, resolutionHeight = _a.resolutionHeight, allowNonImageType = _a.allowNonImageType; | ||
| return __awaiter(void 0, void 0, void 0, function () { | ||
@@ -122,3 +122,3 @@ var newErrors, i, file, image, checkRes; | ||
| return [3 /*break*/, 4]; | ||
| if (!exports.isImageValid(file.type)) { | ||
| if (!allowNonImageType && !exports.isImageValid(file.type)) { | ||
| newErrors.acceptType = true; | ||
@@ -125,0 +125,0 @@ return [3 /*break*/, 5]; |
| { | ||
| "name": "react-images-uploading", | ||
| "version": "3.1.6", | ||
| "version": "3.1.7", | ||
| "description": "The simple images uploader applied Render Props pattern. This approach allows you to fully control UI component and behaviours.", | ||
@@ -53,4 +53,4 @@ "author": { | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.0 || ^18.0.0", | ||
| "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" | ||
| "react": ">=16.8.0", | ||
| "react-dom": ">=16.8.0" | ||
| }, | ||
@@ -57,0 +57,0 @@ "devDependencies": { |
@@ -151,16 +151,17 @@ # react-images-uploading | ||
| | parameter | type | options | default | description | | ||
| | ---------------- | ----------------------------------- | ----------------------------------------- | ------- | ------------------------------------------------------------------ | | ||
| | value | array | | [] | List of images | | ||
| | onChange | function | (imageList, addUpdateIndex) => void | | Called when add, update or delete action is called | | ||
| | dataURLKey | string | | dataURL | Customized field name that base64 of selected image is assigned to | | ||
| | multiple | boolean | | false | Set `true` for multiple chooses | | ||
| | maxNumber | number | | 1000 | Number of images user can select if mode = `multiple` | | ||
| | onError | function | (errors, files) => void | | Called when it has errors | | ||
| | acceptType | array | ['jpg', 'gif', 'png'] | [] | The file extension(s) to upload | | ||
| | maxFileSize | number | | | Max image size (Byte) and it is used in validation | | ||
| | resolutionType | string | 'absolute' \| 'less' \| 'more' \| 'ratio' | | Using for image validation with provided width & height | | ||
| | resolutionWidth | number | > 0 | | | | ||
| | resolutionHeight | number | > 0 | | | | ||
| | inputProps | React.HTMLProps\<HTMLInputElement\> | | | | | ||
| | parameter | type | options | default | description | | ||
| | ----------------- | ----------------------------------- | ----------------------------------------- | ------- | --------------------------------------------------------------------- | | ||
| | value | array | | [] | List of images | | ||
| | onChange | function | (imageList, addUpdateIndex) => void | | Called when add, update or delete action is called | | ||
| | dataURLKey | string | | dataURL | Customized field name that base64 of selected image is assigned to | | ||
| | multiple | boolean | | false | Set `true` for multiple chooses | | ||
| | maxNumber | number | | 1000 | Number of images user can select if mode = `multiple` | | ||
| | onError | function | (errors, files) => void | | Called when it has errors | | ||
| | acceptType | array | ['jpg', 'gif', 'png'] | [] | The file extension(s) to upload | | ||
| | maxFileSize | number | | | Max image size (Byte) and it is used in validation | | ||
| | resolutionType | string | 'absolute' \| 'less' \| 'more' \| 'ratio' | | Using for image validation with provided width & height | | ||
| | resolutionWidth | number | > 0 | | | | ||
| | resolutionHeight | number | > 0 | | | | ||
| | inputProps | React.HTMLProps\<HTMLInputElement\> | | | | | ||
| | allowNonImageType | boolean | | false | Using for uploading non-image type purpose (E.g. txt, pdf, heic, ...) | | ||
@@ -167,0 +168,0 @@ ### Note |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.55%
42810
- Lines of code
- increased by0.95%
529
- Number of lines in readme file
- increased by0.47%
213
No dependency changes