@react-md/core 6.5.0 → 6.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_utils.scss +2 -1
- package/dist/autocomplete/AutocompleteChip.js +2 -2
- package/dist/autocomplete/AutocompleteChip.js.map +1 -1
- package/dist/autocomplete/AutocompleteListboxChildren.js +1 -1
- package/dist/autocomplete/AutocompleteListboxChildren.js.map +1 -1
- package/dist/autocomplete/useAutocomplete.js +4 -4
- package/dist/autocomplete/useAutocomplete.js.map +1 -1
- package/dist/autocomplete/utils.js +3 -3
- package/dist/autocomplete/utils.js.map +1 -1
- package/dist/box/styles.js +2 -2
- package/dist/box/styles.js.map +1 -1
- package/dist/button/AsyncButton.js +1 -1
- package/dist/button/AsyncButton.js.map +1 -1
- package/dist/chip/Chip.js +1 -1
- package/dist/chip/Chip.js.map +1 -1
- package/dist/cssUtils.d.ts +11 -6
- package/dist/cssUtils.js.map +1 -1
- package/dist/datetime/useTimeField.js +1 -1
- package/dist/datetime/useTimeField.js.map +1 -1
- package/dist/delegateEvent.js +9 -9
- package/dist/delegateEvent.js.map +1 -1
- package/dist/draggable/useDraggable.js +4 -4
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/draggable/utils.js +1 -1
- package/dist/draggable/utils.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanel.js +1 -1
- package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
- package/dist/expansion-panel/useExpansionPanels.js +1 -1
- package/dist/expansion-panel/useExpansionPanels.js.map +1 -1
- package/dist/files/FileInput.js +1 -1
- package/dist/files/FileInput.js.map +1 -1
- package/dist/files/createAcceptFromExtensions.d.ts +5 -0
- package/dist/files/createAcceptFromExtensions.js +15 -0
- package/dist/files/createAcceptFromExtensions.js.map +1 -0
- package/dist/files/useFileUpload.js +45 -41
- package/dist/files/useFileUpload.js.map +1 -1
- package/dist/files/utils.js +14 -10
- package/dist/files/utils.js.map +1 -1
- package/dist/files/validation.js +7 -8
- package/dist/files/validation.js.map +1 -1
- package/dist/focus/useFocusContainer.js +1 -1
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/focus/utils.js +12 -7
- package/dist/focus/utils.js.map +1 -1
- package/dist/form/InputToggleIcon.js +5 -1
- package/dist/form/InputToggleIcon.js.map +1 -1
- package/dist/form/NativeSelect.js +1 -1
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/Select.js +5 -5
- package/dist/form/Select.js.map +1 -1
- package/dist/form/formConfig.js +1 -1
- package/dist/form/formConfig.js.map +1 -1
- package/dist/form/inputToggleStyles.js +7 -1
- package/dist/form/inputToggleStyles.js.map +1 -1
- package/dist/form/selectUtils.js +2 -2
- package/dist/form/selectUtils.js.map +1 -1
- package/dist/form/useCombobox.js +1 -0
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useFormReset.js +2 -2
- package/dist/form/useFormReset.js.map +1 -1
- package/dist/form/useNumberField.js +1 -1
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useResizingTextArea.js +4 -4
- package/dist/form/useResizingTextArea.js.map +1 -1
- package/dist/form/useSelectCombobox.js +1 -1
- package/dist/form/useSelectCombobox.js.map +1 -1
- package/dist/form/validation.js +1 -1
- package/dist/form/validation.js.map +1 -1
- package/dist/hoverMode/useHoverMode.js +8 -8
- package/dist/hoverMode/useHoverMode.js.map +1 -1
- package/dist/hoverMode/useHoverModeProvider.js +3 -3
- package/dist/hoverMode/useHoverModeProvider.js.map +1 -1
- package/dist/icon/config.js +3 -3
- package/dist/icon/config.js.map +1 -1
- package/dist/icon/materialConfig.js +1 -1
- package/dist/icon/materialConfig.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.js +11 -10
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/utils.js +7 -3
- package/dist/interaction/utils.js.map +1 -1
- package/dist/layout/useExpandableLayout.js +3 -4
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useMainTabIndex.js +1 -1
- package/dist/layout/useMainTabIndex.js.map +1 -1
- package/dist/list/ListItem.js +1 -1
- package/dist/list/ListItem.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.js +1 -1
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/config.js +2 -2
- package/dist/media-queries/config.js.map +1 -1
- package/dist/media-queries/useMediaQuery.js +3 -3
- package/dist/media-queries/useMediaQuery.js.map +1 -1
- package/dist/menu/Menu.js +4 -4
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuItemButton.js +1 -1
- package/dist/menu/MenuItemButton.js.map +1 -1
- package/dist/menu/MenuItemFileInput.js +1 -1
- package/dist/menu/MenuItemFileInput.js.map +1 -1
- package/dist/menu/MenuWidget.js +2 -2
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/movement/findMatchIndex.js +2 -2
- package/dist/movement/findMatchIndex.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.js +2 -2
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/movement/utils.js +12 -10
- package/dist/movement/utils.js.map +1 -1
- package/dist/navigation/getTableOfContentsHeadings.js +4 -3
- package/dist/navigation/getTableOfContentsHeadings.js.map +1 -1
- package/dist/navigation/useActiveHeadingId.js +9 -9
- package/dist/navigation/useActiveHeadingId.js.map +1 -1
- package/dist/navigation/useTableOfContentsHeadings.js +1 -1
- package/dist/navigation/useTableOfContentsHeadings.js.map +1 -1
- package/dist/navigation/utils.js +6 -5
- package/dist/navigation/utils.js.map +1 -1
- package/dist/portal/PortalContainerProvider.js +5 -3
- package/dist/portal/PortalContainerProvider.js.map +1 -1
- package/dist/positioning/getFixedPosition.js +2 -4
- package/dist/positioning/getFixedPosition.js.map +1 -1
- package/dist/positioning/useFixedPositioning.js +2 -2
- package/dist/positioning/useFixedPositioning.js.map +1 -1
- package/dist/positioning/utils.js +3 -3
- package/dist/positioning/utils.js.map +1 -1
- package/dist/scroll/getScrollbarWidth.js +4 -4
- package/dist/scroll/getScrollbarWidth.js.map +1 -1
- package/dist/searching/fuzzy.js +3 -2
- package/dist/searching/fuzzy.js.map +1 -1
- package/dist/searching/toSearchQuery.js +1 -1
- package/dist/searching/toSearchQuery.js.map +1 -1
- package/dist/searching/utils.js +1 -1
- package/dist/searching/utils.js.map +1 -1
- package/dist/snackbar/Toast.js +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/ToastContent.js +2 -2
- package/dist/snackbar/ToastContent.js.map +1 -1
- package/dist/snackbar/ToastManager.d.ts +1 -1
- package/dist/snackbar/ToastManager.js +11 -11
- package/dist/snackbar/ToastManager.js.map +1 -1
- package/dist/spinbutton/useSpinButton.js +1 -1
- package/dist/spinbutton/useSpinButton.js.map +1 -1
- package/dist/spinbutton/utils/deselectNode.js +1 -1
- package/dist/spinbutton/utils/deselectNode.js.map +1 -1
- package/dist/spinbutton/utils/resolveInputEvent.js +1 -1
- package/dist/spinbutton/utils/resolveInputEvent.js.map +1 -1
- package/dist/spinbutton/utils/selectNode.js +1 -1
- package/dist/spinbutton/utils/selectNode.js.map +1 -1
- package/dist/storage/useStorage.js +8 -3
- package/dist/storage/useStorage.js.map +1 -1
- package/dist/table/useStickyTableSection.js +1 -1
- package/dist/table/useStickyTableSection.js.map +1 -1
- package/dist/tabs/TabList.js +2 -2
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/useMaxTabPanelHeight.js +4 -3
- package/dist/tabs/useMaxTabPanelHeight.js.map +1 -1
- package/dist/tabs/useTabList.js +1 -1
- package/dist/tabs/useTabList.js.map +1 -1
- package/dist/test-utils/jest-globals/match-media.d.ts +1 -1
- package/dist/test-utils/jest-globals/match-media.js +1 -1
- package/dist/test-utils/jest-globals/match-media.js.map +1 -1
- package/dist/test-utils/jest-globals/timers.js +1 -1
- package/dist/test-utils/jest-globals/timers.js.map +1 -1
- package/dist/test-utils/jest-globals/uploadMenuItemFileInput.js +1 -1
- package/dist/test-utils/jest-globals/uploadMenuItemFileInput.js.map +1 -1
- package/dist/test-utils/mocks/ResizeObserver.js +2 -2
- package/dist/test-utils/mocks/ResizeObserver.js.map +1 -1
- package/dist/test-utils/polyfills/IntersectionObserver.js +2 -2
- package/dist/test-utils/polyfills/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/polyfills/ResizeObserver.js +2 -2
- package/dist/test-utils/polyfills/ResizeObserver.js.map +1 -1
- package/dist/test-utils/polyfills/TextDecoder.js +2 -2
- package/dist/test-utils/polyfills/TextDecoder.js.map +1 -1
- package/dist/test-utils/polyfills/TextEncoder.js +2 -2
- package/dist/test-utils/polyfills/TextEncoder.js.map +1 -1
- package/dist/test-utils/polyfills/matchMedia.js +2 -2
- package/dist/test-utils/polyfills/matchMedia.js.map +1 -1
- package/dist/test-utils/polyfills/offsetParent.js +2 -2
- package/dist/test-utils/polyfills/offsetParent.js.map +1 -1
- package/dist/test-utils/polyfills/scrollIntoView.js +1 -1
- package/dist/test-utils/polyfills/scrollIntoView.js.map +1 -1
- package/dist/test-utils/queries/select.js +2 -2
- package/dist/test-utils/queries/select.js.map +1 -1
- package/dist/test-utils/queries/slider.js +1 -1
- package/dist/test-utils/queries/slider.js.map +1 -1
- package/dist/test-utils/utils/createFileList.js +2 -0
- package/dist/test-utils/utils/createFileList.js.map +1 -1
- package/dist/test-utils/utils/createMatchMediaSpy.d.ts +1 -1
- package/dist/test-utils/utils/createMatchMediaSpy.js +3 -3
- package/dist/test-utils/utils/createMatchMediaSpy.js.map +1 -1
- package/dist/test-utils/vitest/match-media.d.ts +1 -1
- package/dist/test-utils/vitest/match-media.js +1 -1
- package/dist/test-utils/vitest/match-media.js.map +1 -1
- package/dist/test-utils/vitest/timers.js +1 -1
- package/dist/test-utils/vitest/timers.js.map +1 -1
- package/dist/test-utils/vitest/uploadMenuItemFileInput.js +1 -1
- package/dist/test-utils/vitest/uploadMenuItemFileInput.js.map +1 -1
- package/dist/theme/ThemeProvider.js +2 -2
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/getDerivedTheme.js +1 -1
- package/dist/theme/getDerivedTheme.js.map +1 -1
- package/dist/theme/useCSSVariables.js +5 -5
- package/dist/theme/useCSSVariables.js.map +1 -1
- package/dist/theme/useColorSchemeMetaTag.js +2 -2
- package/dist/theme/useColorSchemeMetaTag.js.map +1 -1
- package/dist/theme/useInlineCSSVariables.js +4 -3
- package/dist/theme/useInlineCSSVariables.js.map +1 -1
- package/dist/theme/utils.js +8 -8
- package/dist/theme/utils.js.map +1 -1
- package/dist/tooltip/useTooltip.js +7 -7
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/tooltip/useTooltipPosition.js +1 -1
- package/dist/tooltip/useTooltipPosition.js.map +1 -1
- package/dist/transition/useCarousel.js +2 -2
- package/dist/transition/useCarousel.js.map +1 -1
- package/dist/transition/useCollapseTransition.js +1 -1
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.js +4 -4
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/transition/useTransition.js +2 -2
- package/dist/transition/useTransition.js.map +1 -1
- package/dist/transition/utils.js +5 -5
- package/dist/transition/utils.js.map +1 -1
- package/dist/tree/TreeItem.js +1 -1
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/useTreeItems.js +7 -5
- package/dist/tree/useTreeItems.js.map +1 -1
- package/dist/tree/useTreeMovement.js +1 -1
- package/dist/tree/useTreeMovement.js.map +1 -1
- package/dist/tree/utils.js +6 -9
- package/dist/tree/utils.js.map +1 -1
- package/dist/typography/HighlightText.js +2 -1
- package/dist/typography/HighlightText.js.map +1 -1
- package/dist/typography/SrOnly.js +7 -1
- package/dist/typography/SrOnly.js.map +1 -1
- package/dist/useDebouncedFunction.js +4 -4
- package/dist/useDebouncedFunction.js.map +1 -1
- package/dist/useDropzone.js +9 -9
- package/dist/useDropzone.js.map +1 -1
- package/dist/useEnsuredState.js +5 -5
- package/dist/useEnsuredState.js.map +1 -1
- package/dist/useIntersectionObserver.js +3 -3
- package/dist/useIntersectionObserver.js.map +1 -1
- package/dist/useIsomorphicLayoutEffect.js +1 -1
- package/dist/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist/useOrientation.js +1 -1
- package/dist/useOrientation.js.map +1 -1
- package/dist/useReadonlySet.js +1 -1
- package/dist/useReadonlySet.js.map +1 -1
- package/dist/useResizeListener.js +2 -2
- package/dist/useResizeListener.js.map +1 -1
- package/dist/useResizeObserver.js +3 -4
- package/dist/useResizeObserver.js.map +1 -1
- package/dist/useThrottledFunction.js +3 -3
- package/dist/useThrottledFunction.js.map +1 -1
- package/dist/useWindowSize.js +1 -1
- package/dist/useWindowSize.js.map +1 -1
- package/dist/utils/alphaNumericSort.js +3 -1
- package/dist/utils/alphaNumericSort.js.map +1 -1
- package/dist/utils/bem.js +9 -12
- package/dist/utils/bem.js.map +1 -1
- package/dist/utils/getNumberOfDigits.js +1 -0
- package/dist/utils/getNumberOfDigits.js.map +1 -1
- package/dist/utils/getRangeDefaultValue.js +1 -1
- package/dist/utils/getRangeDefaultValue.js.map +1 -1
- package/dist/utils/nearest.js +2 -2
- package/dist/utils/nearest.js.map +1 -1
- package/dist/utils/parseCssLengthUnit.js +3 -3
- package/dist/utils/parseCssLengthUnit.js.map +1 -1
- package/dist/utils/trigonometry.js +1 -1
- package/dist/utils/trigonometry.js.map +1 -1
- package/package.json +3 -1
- package/src/autocomplete/AutocompleteChip.tsx +2 -2
- package/src/autocomplete/AutocompleteListboxChildren.tsx +1 -1
- package/src/autocomplete/useAutocomplete.ts +4 -4
- package/src/autocomplete/utils.ts +3 -3
- package/src/box/styles.ts +2 -2
- package/src/button/AsyncButton.tsx +1 -3
- package/src/chip/Chip.tsx +1 -2
- package/src/cssUtils.ts +12 -6
- package/src/datetime/useTimeField.ts +1 -1
- package/src/delegateEvent.ts +9 -9
- package/src/draggable/useDraggable.ts +4 -4
- package/src/draggable/utils.ts +1 -1
- package/src/expansion-panel/ExpansionPanel.tsx +1 -1
- package/src/expansion-panel/useExpansionPanels.ts +1 -1
- package/src/files/FileInput.tsx +1 -1
- package/src/files/createAcceptFromExtensions.ts +18 -0
- package/src/files/useFileUpload.ts +36 -37
- package/src/files/utils.ts +15 -11
- package/src/files/validation.ts +7 -9
- package/src/focus/useFocusContainer.ts +1 -1
- package/src/focus/utils.ts +11 -6
- package/src/form/InputToggleIcon.tsx +5 -5
- package/src/form/NativeSelect.tsx +1 -1
- package/src/form/Select.tsx +5 -5
- package/src/form/formConfig.ts +1 -1
- package/src/form/inputToggleStyles.ts +9 -4
- package/src/form/selectUtils.ts +2 -2
- package/src/form/useCombobox.ts +1 -0
- package/src/form/useFormReset.ts +2 -2
- package/src/form/useNumberField.ts +1 -1
- package/src/form/useResizingTextArea.ts +5 -5
- package/src/form/useSelectCombobox.ts +1 -4
- package/src/form/validation.ts +1 -1
- package/src/hoverMode/useHoverMode.ts +9 -9
- package/src/hoverMode/useHoverModeProvider.ts +4 -4
- package/src/icon/config.tsx +3 -3
- package/src/icon/materialConfig.ts +1 -1
- package/src/interaction/UserInteractionModeProvider.tsx +11 -10
- package/src/interaction/utils.ts +3 -3
- package/src/layout/useExpandableLayout.ts +3 -4
- package/src/layout/useMainTabIndex.ts +1 -1
- package/src/list/ListItem.tsx +1 -1
- package/src/media-queries/AppSizeProvider.tsx +1 -1
- package/src/media-queries/config.ts +2 -2
- package/src/media-queries/useMediaQuery.ts +3 -3
- package/src/menu/Menu.tsx +4 -4
- package/src/menu/MenuItemButton.tsx +1 -1
- package/src/menu/MenuItemFileInput.tsx +1 -1
- package/src/menu/MenuWidget.tsx +6 -4
- package/src/movement/findMatchIndex.ts +2 -2
- package/src/movement/useKeyboardMovementProvider.ts +2 -2
- package/src/movement/utils.ts +15 -14
- package/src/navigation/getTableOfContentsHeadings.ts +4 -3
- package/src/navigation/useActiveHeadingId.ts +8 -8
- package/src/navigation/useTableOfContentsHeadings.ts +1 -1
- package/src/navigation/utils.ts +6 -5
- package/src/portal/PortalContainerProvider.tsx +5 -3
- package/src/positioning/getFixedPosition.ts +9 -6
- package/src/positioning/useFixedPositioning.ts +2 -2
- package/src/positioning/utils.ts +3 -3
- package/src/scroll/getScrollbarWidth.ts +4 -4
- package/src/searching/fuzzy.ts +7 -3
- package/src/searching/toSearchQuery.ts +1 -1
- package/src/searching/utils.ts +1 -1
- package/src/snackbar/Toast.tsx +1 -1
- package/src/snackbar/ToastContent.tsx +2 -2
- package/src/snackbar/ToastManager.ts +11 -12
- package/src/spinbutton/useSpinButton.ts +1 -1
- package/src/spinbutton/utils/deselectNode.ts +1 -1
- package/src/spinbutton/utils/resolveInputEvent.ts +1 -1
- package/src/spinbutton/utils/selectNode.ts +1 -1
- package/src/storage/useStorage.ts +7 -2
- package/src/table/useStickyTableSection.tsx +1 -1
- package/src/tabs/TabList.tsx +2 -2
- package/src/tabs/useMaxTabPanelHeight.ts +6 -3
- package/src/tabs/useTabList.ts +2 -2
- package/src/test-utils/jest-globals/match-media.ts +5 -2
- package/src/test-utils/jest-globals/timers.ts +1 -1
- package/src/test-utils/jest-globals/uploadMenuItemFileInput.ts +1 -1
- package/src/test-utils/mocks/ResizeObserver.ts +2 -2
- package/src/test-utils/polyfills/IntersectionObserver.ts +2 -2
- package/src/test-utils/polyfills/ResizeObserver.ts +2 -2
- package/src/test-utils/polyfills/TextDecoder.ts +2 -2
- package/src/test-utils/polyfills/TextEncoder.ts +2 -2
- package/src/test-utils/polyfills/matchMedia.ts +5 -2
- package/src/test-utils/polyfills/offsetParent.ts +2 -2
- package/src/test-utils/polyfills/scrollIntoView.ts +1 -1
- package/src/test-utils/queries/select.ts +2 -2
- package/src/test-utils/queries/slider.ts +1 -1
- package/src/test-utils/utils/createFileList.ts +2 -0
- package/src/test-utils/utils/createMatchMediaSpy.ts +4 -4
- package/src/test-utils/vitest/match-media.ts +2 -2
- package/src/test-utils/vitest/timers.ts +1 -1
- package/src/test-utils/vitest/uploadMenuItemFileInput.ts +1 -1
- package/src/theme/ThemeProvider.tsx +2 -2
- package/src/theme/getDerivedTheme.ts +1 -1
- package/src/theme/useCSSVariables.ts +5 -5
- package/src/theme/useColorSchemeMetaTag.ts +2 -2
- package/src/theme/useInlineCSSVariables.ts +6 -7
- package/src/theme/utils.ts +8 -8
- package/src/tooltip/useTooltip.ts +7 -7
- package/src/tooltip/useTooltipPosition.ts +1 -1
- package/src/transition/useCarousel.ts +2 -2
- package/src/transition/useCollapseTransition.ts +1 -1
- package/src/transition/useSkeletonPlaceholder.ts +4 -4
- package/src/transition/useTransition.ts +2 -2
- package/src/transition/utils.ts +5 -5
- package/src/tree/TreeItem.tsx +1 -1
- package/src/tree/useTreeItems.ts +5 -5
- package/src/tree/useTreeMovement.ts +1 -1
- package/src/tree/utils.ts +9 -9
- package/src/typography/HighlightText.tsx +4 -3
- package/src/typography/SrOnly.tsx +9 -2
- package/src/useDebouncedFunction.ts +5 -5
- package/src/useDropzone.ts +10 -10
- package/src/useEnsuredState.ts +5 -5
- package/src/useIntersectionObserver.ts +3 -3
- package/src/useIsomorphicLayoutEffect.ts +3 -3
- package/src/useOrientation.ts +1 -1
- package/src/useReadonlySet.ts +3 -1
- package/src/useResizeListener.ts +2 -2
- package/src/useResizeObserver.ts +3 -4
- package/src/useThrottledFunction.ts +4 -4
- package/src/useWindowSize.ts +1 -1
- package/src/utils/alphaNumericSort.ts +1 -1
- package/src/utils/bem.ts +15 -16
- package/src/utils/getNumberOfDigits.ts +1 -0
- package/src/utils/getRangeDefaultValue.ts +1 -1
- package/src/utils/nearest.ts +5 -2
- package/src/utils/parseCssLengthUnit.ts +5 -4
- package/src/utils/trigonometry.ts +1 -1
- package/dist/form/defaultGetSelectedOptionChildren.d.ts +0 -1
- package/dist/form/getSelectedOptionChildren.d.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/files/FileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type InputHTMLAttributes,\n type LabelHTMLAttributes,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { SrOnly } from \"../typography/SrOnly.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { fileInput } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type FileInputHTMLAttributes = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n>;\n\n/**\n * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport interface FileInputProps\n extends\n ButtonClassNameThemeOptions,\n FileInputHTMLAttributes,\n ComponentWithRippleProps {\n /**\n * This is the label text for icon-only file inputs.\n *\n * @defaultValue `\"Upload\"`\n */\n srOnlyLabel?: ReactNode;\n\n /**\n * Any additional props to provide to the container `<label>` element since\n * most props get passed to the `<input type=\"file\">`. So this would be useful\n * for inline style or click handlers.\n */\n labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;\n\n /**\n * An optional icon to display for the file input.\n *\n * @defaultValue `getIcon(\"upload\")`\n */\n icon?: ReactNode;\n\n /**\n * Boolean if the icon should appear after the children in the label.\n *\n * @defaultValue `false`\n */\n iconAfter?: boolean;\n\n /**\n * Boolean if the file input should no longer allow the same file to be\n * selected multiple times and trigger the `onChange` each time it is\n * selected.\n *\n * @defaultValue `false`\n */\n disableRepeatableFiles?: boolean;\n\n /**\n * Children should generally be provided when the {@link buttonType} is\n * set to `\"text\"`. This defaults to a screen-reader only accessible text.\n *\n * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`\n */\n children?: ReactNode;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the getIcon hook\n *\n * @example Simple Example\n * ```tsx\n * import { FileInput } from \"@react-md/core/files/FileInput\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import type { ReactElement } from \"react\";\n *\n * const extensions = [\n * \"svg\",\n * \"jpeg\",\n * \"jpg\",\n * \"png\",\n * \"apng\",\n * \"mkv\",\n * \"mp4\",\n * \"mpeg\",\n * \"mpg\",\n * \"webm\",\n * \"mov\",\n * ] as const;\n *\n * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;\n * const maxFiles = 10;\n *\n * function Example(): ReactElement {\n * const { stats, errors, onChange, clearErrors, reset, remove, accept } =\n * useFileUpload({\n * maxFiles,\n * maxFileSize: FOUR_HUNDRED_MB,\n * extensions,\n * });\n *\n * return (\n * <Form>\n * <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />\n * <Button onClick={reset} disabled={!stats.length}>\n * Remove all files\n * </Button>\n * </Form>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/file-input | FileInput Demos}\n * @since 6.0.0 Added additional support for `iconSize` and\n * `responsive`. Also removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n function FileInput(props, ref) {\n const {\n id: propId,\n className,\n children: propChildren,\n icon: propIcon,\n iconAfter = false,\n srOnlyLabel = \"Upload\",\n disableRepeatableFiles = false,\n labelProps,\n theme = \"primary\",\n themeType = \"contained\",\n buttonType = propChildren ? \"text\" : \"icon\",\n disabled = false,\n iconSize,\n responsive,\n multiple = false,\n disableRipple,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"file-input\");\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n ...labelProps,\n mode: disableRipple ? \"none\" : undefined,\n onClick(event) {\n labelProps?.onClick?.(event);\n\n // stop propagation so 2 ripples are not created\n event.stopPropagation();\n },\n disabled,\n });\n\n const icon = getIcon(\"upload\", propIcon);\n let children = propChildren;\n if (\n
|
|
1
|
+
{"version":3,"sources":["../../src/files/FileInput.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type InputHTMLAttributes,\n type LabelHTMLAttributes,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { SrOnly } from \"../typography/SrOnly.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { fileInput } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type FileInputHTMLAttributes = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n>;\n\n/**\n * @since 6.0.0 Removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport interface FileInputProps\n extends\n ButtonClassNameThemeOptions,\n FileInputHTMLAttributes,\n ComponentWithRippleProps {\n /**\n * This is the label text for icon-only file inputs.\n *\n * @defaultValue `\"Upload\"`\n */\n srOnlyLabel?: ReactNode;\n\n /**\n * Any additional props to provide to the container `<label>` element since\n * most props get passed to the `<input type=\"file\">`. So this would be useful\n * for inline style or click handlers.\n */\n labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;\n\n /**\n * An optional icon to display for the file input.\n *\n * @defaultValue `getIcon(\"upload\")`\n */\n icon?: ReactNode;\n\n /**\n * Boolean if the icon should appear after the children in the label.\n *\n * @defaultValue `false`\n */\n iconAfter?: boolean;\n\n /**\n * Boolean if the file input should no longer allow the same file to be\n * selected multiple times and trigger the `onChange` each time it is\n * selected.\n *\n * @defaultValue `false`\n */\n disableRepeatableFiles?: boolean;\n\n /**\n * Children should generally be provided when the {@link buttonType} is\n * set to `\"text\"`. This defaults to a screen-reader only accessible text.\n *\n * @defaultValue `<SrOnly phoneOnly={responsive}>Upload</SrOnly>`\n */\n children?: ReactNode;\n}\n\n/**\n * **Client Component**\n * This might be able to become a server component if I remove the getIcon hook\n *\n * @example Simple Example\n * ```tsx\n * import { FileInput } from \"@react-md/core/files/FileInput\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import type { ReactElement } from \"react\";\n *\n * const extensions = [\n * \"svg\",\n * \"jpeg\",\n * \"jpg\",\n * \"png\",\n * \"apng\",\n * \"mkv\",\n * \"mp4\",\n * \"mpeg\",\n * \"mpg\",\n * \"webm\",\n * \"mov\",\n * ] as const;\n *\n * const FOUR_HUNDRED_MB = 400 * 1024 * 1024;\n * const maxFiles = 10;\n *\n * function Example(): ReactElement {\n * const { stats, errors, onChange, clearErrors, reset, remove, accept } =\n * useFileUpload({\n * maxFiles,\n * maxFileSize: FOUR_HUNDRED_MB,\n * extensions,\n * });\n *\n * return (\n * <Form>\n * <FileInput accept={accept} multiple={maxFiles > 1} onChange={onChange} />\n * <Button onClick={reset} disabled={!stats.length}>\n * Remove all files\n * </Button>\n * </Form>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/file-input | FileInput Demos}\n * @since 6.0.0 Added additional support for `iconSize` and\n * `responsive`. Also removed the `disableIconSpacing` prop since it is no\n * longer required.\n */\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n function FileInput(props, ref) {\n const {\n id: propId,\n className,\n children: propChildren,\n icon: propIcon,\n iconAfter = false,\n srOnlyLabel = \"Upload\",\n disableRepeatableFiles = false,\n labelProps,\n theme = \"primary\",\n themeType = \"contained\",\n buttonType = propChildren ? \"text\" : \"icon\",\n disabled = false,\n iconSize,\n responsive,\n multiple = false,\n disableRipple,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"file-input\");\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n ...labelProps,\n mode: disableRipple ? \"none\" : undefined,\n onClick(event) {\n labelProps?.onClick?.(event);\n\n // stop propagation so 2 ripples are not created\n event.stopPropagation();\n },\n disabled,\n });\n\n const icon = getIcon(\"upload\", propIcon);\n let children = propChildren;\n if (\n propChildren === undefined &&\n !props[\"aria-label\"] &&\n !props[\"aria-labelledby\"]\n ) {\n children = <SrOnly phoneOnly={responsive}>{srOnlyLabel}</SrOnly>;\n }\n\n return (\n <label\n {...labelProps}\n {...handlers}\n className={fileInput({\n theme,\n themeType,\n buttonType,\n disabled,\n iconSize,\n pressed,\n responsive,\n pressedClassName,\n className: className || labelProps?.className,\n })}\n >\n {!iconAfter && icon}\n {children}\n {iconAfter && icon}\n <input\n {...remaining}\n id={id}\n ref={ref}\n value={\n disableRepeatableFiles || !props.onChange ? remaining.value : \"\"\n }\n type=\"file\"\n className=\"rmd-hidden-input\"\n disabled={disabled}\n multiple={multiple}\n />\n {ripples}\n </label>\n );\n }\n);\n"],"names":["forwardRef","getIcon","useElementInteraction","SrOnly","useEnsuredId","fileInput","FileInput","props","ref","id","propId","className","children","propChildren","icon","propIcon","iconAfter","srOnlyLabel","disableRepeatableFiles","labelProps","theme","themeType","buttonType","disabled","iconSize","responsive","multiple","disableRipple","remaining","pressed","pressedClassName","ripples","handlers","mode","undefined","onClick","event","stopPropagation","phoneOnly","label","input","value","onChange","type"],"mappings":"AAAA;;AAEA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAEhF,SAASC,MAAM,QAAQ,0BAA0B;AACjD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,SAAS,QAAQ,cAAc;AA+DxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAMC,QAAQ,EACdC,YAAY,KAAK,EACjBC,cAAc,QAAQ,EACtBC,yBAAyB,KAAK,EAC9BC,UAAU,EACVC,QAAQ,SAAS,EACjBC,YAAY,WAAW,EACvBC,aAAaT,eAAe,SAAS,MAAM,EAC3CU,WAAW,KAAK,EAChBC,QAAQ,EACRC,UAAU,EACVC,WAAW,KAAK,EAChBC,aAAa,EACb,GAAGC,WACJ,GAAGrB;IACJ,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAM,EAAEmB,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD9B,sBAAsB;QACpB,GAAGiB,UAAU;QACbc,MAAMN,gBAAgB,SAASO;QAC/BC,SAAQC,KAAK;YACXjB,YAAYgB,UAAUC;YAEtB,gDAAgD;YAChDA,MAAMC,eAAe;QACvB;QACAd;IACF;IAEF,MAAMT,OAAOb,QAAQ,UAAUc;IAC/B,IAAIH,WAAWC;IACf,IACEA,iBAAiBqB,aACjB,CAAC3B,KAAK,CAAC,aAAa,IACpB,CAACA,KAAK,CAAC,kBAAkB,EACzB;QACAK,yBAAW,KAACT;YAAOmC,WAAWb;sBAAaR;;IAC7C;IAEA,qBACE,MAACsB;QACE,GAAGpB,UAAU;QACb,GAAGa,QAAQ;QACZrB,WAAWN,UAAU;YACnBe;YACAC;YACAC;YACAC;YACAC;YACAK;YACAJ;YACAK;YACAnB,WAAWA,aAAaQ,YAAYR;QACtC;;YAEC,CAACK,aAAaF;YACdF;YACAI,aAAaF;0BACd,KAAC0B;gBACE,GAAGZ,SAAS;gBACbnB,IAAIA;gBACJD,KAAKA;gBACLiC,OACEvB,0BAA0B,CAACX,MAAMmC,QAAQ,GAAGd,UAAUa,KAAK,GAAG;gBAEhEE,MAAK;gBACLhC,WAAU;gBACVY,UAAUA;gBACVG,UAAUA;;YAEXK;;;AAGP,GACA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @since 6.5.1
|
|
3
|
+
* @internal
|
|
4
|
+
*/ export function createAcceptFromExtensions(extensions) {
|
|
5
|
+
let accept = "";
|
|
6
|
+
for (const extension of extensions){
|
|
7
|
+
if (accept) {
|
|
8
|
+
accept += ",";
|
|
9
|
+
}
|
|
10
|
+
accept += `.${extension}`;
|
|
11
|
+
}
|
|
12
|
+
return accept;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=createAcceptFromExtensions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/files/createAcceptFromExtensions.ts"],"sourcesContent":["/**\n * @since 6.5.1\n * @internal\n */\nexport function createAcceptFromExtensions(\n extensions: readonly string[]\n): string {\n let accept = \"\";\n for (const extension of extensions) {\n if (accept) {\n accept += \",\";\n }\n\n accept += `.${extension}`;\n }\n\n return accept;\n}\n"],"names":["createAcceptFromExtensions","extensions","accept","extension"],"mappings":"AAAA;;;CAGC,GACD,OAAO,SAASA,2BACdC,UAA6B;IAE7B,IAAIC,SAAS;IACb,KAAK,MAAMC,aAAaF,WAAY;QAClC,IAAIC,QAAQ;YACVA,UAAU;QACZ;QAEAA,UAAU,CAAC,CAAC,EAAEC,WAAW;IAC3B;IAEA,OAAOD;AACT"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { nanoid } from "nanoid";
|
|
3
3
|
import { useCallback, useEffect, useReducer } from "react";
|
|
4
|
+
import { createAcceptFromExtensions } from "./createAcceptFromExtensions.js";
|
|
4
5
|
import { getFileParser as defaultGetFileParser } from "./utils.js";
|
|
5
6
|
import { FileAccessError, isValidFileName as defaultIsValidFileName, validateFiles as defaultValidateFiles } from "./validation.js";
|
|
6
7
|
const noop = ()=>{
|
|
@@ -49,26 +50,29 @@ const noop = ()=>{
|
|
|
49
50
|
};
|
|
50
51
|
}
|
|
51
52
|
case "queue":
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
53
|
+
{
|
|
54
|
+
const nextStats = {};
|
|
55
|
+
for (const file of action.files){
|
|
56
|
+
const key = nanoid();
|
|
57
|
+
nextStats[key] = {
|
|
58
|
+
key,
|
|
59
|
+
file,
|
|
60
|
+
progress: 0,
|
|
61
|
+
status: "pending"
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
return {
|
|
65
|
+
...state,
|
|
66
|
+
stats: {
|
|
67
|
+
...state.stats,
|
|
68
|
+
...nextStats
|
|
69
|
+
},
|
|
70
|
+
errors: [
|
|
71
|
+
...state.errors,
|
|
72
|
+
...action.errors
|
|
73
|
+
]
|
|
74
|
+
};
|
|
75
|
+
}
|
|
72
76
|
case "start":
|
|
73
77
|
{
|
|
74
78
|
const { key, reader } = action;
|
|
@@ -173,14 +177,16 @@ const noop = ()=>{
|
|
|
173
177
|
try {
|
|
174
178
|
const files = event.dataTransfer.files;
|
|
175
179
|
if (files) {
|
|
176
|
-
queueFiles(
|
|
180
|
+
queueFiles([
|
|
181
|
+
...files
|
|
182
|
+
]);
|
|
177
183
|
}
|
|
178
|
-
} catch (
|
|
184
|
+
} catch (error) {
|
|
179
185
|
dispatch({
|
|
180
186
|
type: "queue",
|
|
181
187
|
files: [],
|
|
182
188
|
errors: [
|
|
183
|
-
new FileAccessError(
|
|
189
|
+
new FileAccessError(error instanceof Error ? error.message : undefined)
|
|
184
190
|
]
|
|
185
191
|
});
|
|
186
192
|
}
|
|
@@ -193,16 +199,18 @@ const noop = ()=>{
|
|
|
193
199
|
try {
|
|
194
200
|
const files = event.currentTarget.files;
|
|
195
201
|
if (files) {
|
|
196
|
-
queueFiles(
|
|
202
|
+
queueFiles([
|
|
203
|
+
...files
|
|
204
|
+
]);
|
|
197
205
|
} else {
|
|
198
|
-
throw new Error();
|
|
206
|
+
throw new Error("There are no files");
|
|
199
207
|
}
|
|
200
|
-
} catch (
|
|
208
|
+
} catch (error) {
|
|
201
209
|
dispatch({
|
|
202
210
|
type: "queue",
|
|
203
211
|
files: [],
|
|
204
212
|
errors: [
|
|
205
|
-
new FileAccessError(
|
|
213
|
+
new FileAccessError(error instanceof Error ? error.message : undefined)
|
|
206
214
|
]
|
|
207
215
|
});
|
|
208
216
|
}
|
|
@@ -214,9 +222,9 @@ const noop = ()=>{
|
|
|
214
222
|
const files = typeof keyOrKeys === "string" ? [
|
|
215
223
|
keyOrKeys
|
|
216
224
|
] : keyOrKeys;
|
|
217
|
-
|
|
225
|
+
for (const fileKey of files){
|
|
218
226
|
readers[fileKey]?.abort();
|
|
219
|
-
}
|
|
227
|
+
}
|
|
220
228
|
dispatch({
|
|
221
229
|
type: "remove",
|
|
222
230
|
files
|
|
@@ -225,9 +233,9 @@ const noop = ()=>{
|
|
|
225
233
|
readers
|
|
226
234
|
]);
|
|
227
235
|
const reset = useCallback(()=>{
|
|
228
|
-
Object.values(readers)
|
|
236
|
+
for (const reader of Object.values(readers)){
|
|
229
237
|
reader.abort();
|
|
230
|
-
}
|
|
238
|
+
}
|
|
231
239
|
dispatch({
|
|
232
240
|
type: "reset"
|
|
233
241
|
});
|
|
@@ -266,19 +274,19 @@ const noop = ()=>{
|
|
|
266
274
|
useEffect(()=>{
|
|
267
275
|
const pending = [];
|
|
268
276
|
const uploading = [];
|
|
269
|
-
Object.values(stats)
|
|
277
|
+
for (const file of Object.values(stats)){
|
|
270
278
|
if (file.status === "pending") {
|
|
271
279
|
pending.push(file);
|
|
272
280
|
} else if (file.status === "uploading") {
|
|
273
281
|
uploading.push(file);
|
|
274
282
|
}
|
|
275
|
-
}
|
|
283
|
+
}
|
|
276
284
|
const lastIndex = concurrency === -1 ? pending.length : Math.max(0, concurrency - uploading.length);
|
|
277
285
|
const queue = pending.slice(0, lastIndex);
|
|
278
|
-
if (
|
|
286
|
+
if (queue.length === 0) {
|
|
279
287
|
return;
|
|
280
288
|
}
|
|
281
|
-
|
|
289
|
+
for (const stats of queue){
|
|
282
290
|
const { key, file } = stats;
|
|
283
291
|
const reader = new FileReader();
|
|
284
292
|
// using `addEventListener` instead of directly setting to
|
|
@@ -297,7 +305,7 @@ const noop = ()=>{
|
|
|
297
305
|
throw new Error("Invalid file reader parser");
|
|
298
306
|
}
|
|
299
307
|
reader[parser](file);
|
|
300
|
-
}
|
|
308
|
+
}
|
|
301
309
|
}, [
|
|
302
310
|
concurrency,
|
|
303
311
|
stats,
|
|
@@ -306,14 +314,10 @@ const noop = ()=>{
|
|
|
306
314
|
start,
|
|
307
315
|
complete
|
|
308
316
|
]);
|
|
309
|
-
let accept = "";
|
|
310
|
-
if (extensions.length) {
|
|
311
|
-
accept = extensions.reduce((s, ext)=>`${s ? `${s},` : ""}.${ext}`, "");
|
|
312
|
-
}
|
|
313
317
|
return {
|
|
314
318
|
stats: statsList,
|
|
315
319
|
errors,
|
|
316
|
-
accept,
|
|
320
|
+
accept: createAcceptFromExtensions(extensions),
|
|
317
321
|
totalBytes,
|
|
318
322
|
totalFiles,
|
|
319
323
|
onDrop,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/files/useFileUpload.ts"],"sourcesContent":["\"use client\";\n\nimport { nanoid } from \"nanoid\";\nimport {\n type ChangeEvent,\n type DragEvent,\n useCallback,\n useEffect,\n useReducer,\n} from \"react\";\n\nimport {\n type CompletedFileUploadStats,\n type FileReaderResult,\n type FileUploadHandlers,\n type FileUploadStats,\n type GetFileParser,\n type ProcessingFileUploadStats,\n getFileParser as defaultGetFileParser,\n} from \"./utils.js\";\nimport {\n FileAccessError,\n type FileValidationError,\n type FileValidationOptions,\n type FilesValidator,\n isValidFileName as defaultIsValidFileName,\n validateFiles as defaultValidateFiles,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadState<CustomError = never> {\n /**\n * All the files that have been validated and are either:\n * - pending upload\n * - uploading\n * - complete\n *\n * Each key in this object is the {@link BaseFileUploadStats.key} generated\n * once the upload starts pending.\n */\n stats: Readonly<Record<string, Readonly<FileUploadStats>>>;\n\n /**\n * A list of validation errors that have occurred before starting the upload\n * process.\n *\n * @see {@link FileAccessError}\n * @see {@link TooManyFilesError}\n * @see {@link FileValidationError}\n */\n errors: readonly FileValidationError<CustomError>[];\n}\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n * @internal\n */\nexport interface FileUploadHookState<\n CustomError = never,\n> extends FileUploadState<CustomError> {\n /**\n * All the current readers used for uploading files to the browser.\n *\n * Note: Once an upload has completed, the reader will be removed.\n */\n readers: Readonly<Record<string, FileReader>>;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadOptions<E extends HTMLElement, CustomError = never>\n extends FileUploadHandlers<E>, FileValidationOptions {\n /**\n * Setting this value to a number greater than `0` will update the browser\n * upload process to queue the uploads in chunks instead of all at once. This\n * can help prevent the browser from freezing if dealing with large files that\n * are being converted to data urls.\n *\n * @defaultValue `-1`\n */\n concurrency?: number;\n\n /** {@inheritDoc FilesValidator} */\n validateFiles?: FilesValidator<CustomError>;\n /** {@inheritDoc GetFileParser} */\n getFileParser?: GetFileParser;\n}\n\n/** @internal */\ntype Action<E = never> =\n | {\n type: \"queue\";\n errors: readonly FileValidationError<E>[];\n files: readonly File[];\n }\n | { type: \"reset\" }\n | { type: \"remove\"; files: readonly string[] }\n | { type: \"start\"; key: string; reader: FileReader }\n | { type: \"progress\"; key: string; progress: number }\n | { type: \"complete\"; key: string; result: FileReaderResult }\n | { type: \"clearErrors\" };\n\n/** @since 2.9.0 */\nexport interface FileUploadActions {\n /**\n * Reset everything related to uploads ensuring that all file readers have\n * been aborted.\n */\n reset: () => void;\n\n /**\n * Removes all the errors that exist in state without canceling any of the\n * uploads already in progress.\n */\n clearErrors: () => void;\n\n /**\n * This function is used to cancel pending and uploading files or removing\n * completed files.\n *\n * @param keyOrKeys - A single or list of {@link BaseFileUploadStats.key} to\n * remove from state.\n */\n remove: (keyOrKeys: string | readonly string[]) => void;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadHookReturnValue<\n E extends HTMLElement = HTMLElement,\n CustomError = never,\n>\n extends FileUploadActions, Required<FileUploadHandlers<E>> {\n /** {@inheritDoc FileUploadState.errors} */\n errors: readonly FileValidationError<CustomError>[];\n\n /**\n * A list of all the {@link FileUploadStats}.\n *\n * @see {@link getSplitFileUploads} for separating by status\n */\n stats: readonly Readonly<FileUploadStats>[];\n\n /**\n * The total number of bytes for all the files that exist in the\n * {@link stats} list.\n */\n totalBytes: number;\n\n /**\n * The total number of files in the {@link stats} list.\n */\n totalFiles: number;\n\n /**\n * An `accept` string that can be passed to the {@link FileInput} component\n * when the {@link FileValidationOptions.extensions} list has been provided to\n * limit which files the OS will _attempt_ to allow access to.\n *\n * @example Simple example\n * ```ts\n * const extensions = ['pdf', 'docx', 'ppt'];\n * const { accept } = useFileUpload({ extensions, ...others });\n *\n * expect(accept).toBe(\"*.pdf,*.docx,*.ppt\")\n * ```\n *\n * @defaultValue `\"*\"`\n */\n accept: string;\n}\n\n/** @internal */\nconst EMPTY_LIST = [] as const;\n/** @internal */\nconst EMPTY_OBJECT = {} as const;\n\n/**\n * This hook is generally used to upload files **to the browser** in different\n * formats to be previewed `<img>`, `<video>`, `<embed>`, etc tags. However, it\n * can also be used to upload the files as an `ArrayBuffer` and then uploaded to\n * a server.\n *\n * @see {@link https://react-md.dev/components/file-input | FileInput Demos}\n * @see {@link https://react-md.dev/hooks/use-file-input | useFileInput Demos}\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @param options - All the {@link FileUploadOptions}\n * @returns the {@link FileUploadHookReturnValue}\n * @since 2.9.0\n */\nexport function useFileUpload<E extends HTMLElement, CustomError = never>(\n options: FileUploadOptions<E, CustomError> = {}\n): Readonly<FileUploadHookReturnValue<E, CustomError>> {\n const {\n maxFiles = -1,\n extensions = EMPTY_LIST,\n minFileSize = -1,\n maxFileSize = -1,\n totalFileSize = -1,\n concurrency = -1,\n onDrop: propOnDrop = noop,\n onChange: propOnChange = noop,\n validateFiles = defaultValidateFiles,\n getFileParser = defaultGetFileParser,\n isValidFileName = defaultIsValidFileName,\n } = options;\n\n const [state, dispatch] = useReducer(\n function reducer(\n state: FileUploadHookState<CustomError>,\n action: Action<CustomError>\n ): FileUploadHookState<CustomError> {\n switch (action.type) {\n case \"reset\":\n // need to reuse constants so that calling reset doesn't cause an\n // infinite loop in an effect\n return {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n };\n case \"remove\": {\n const stats: Record<string, FileUploadStats> = {};\n for (const key in state.stats) {\n if (!action.files.includes(key)) {\n stats[key] = state.stats[key];\n }\n }\n\n return {\n ...state,\n stats,\n };\n }\n case \"queue\":\n return {\n ...state,\n stats: {\n ...state.stats,\n ...action.files.reduce<Record<string, ProcessingFileUploadStats>>(\n (files, file) => {\n const key = nanoid();\n files[key] = {\n key,\n file,\n progress: 0,\n status: \"pending\",\n };\n\n return files;\n },\n {}\n ),\n },\n errors: [...state.errors, ...action.errors],\n };\n case \"start\": {\n const { key, reader } = action;\n const fileStats: ProcessingFileUploadStats = {\n key,\n file: state.stats[key].file,\n progress: 0,\n status: \"uploading\",\n };\n\n return {\n ...state,\n readers: {\n ...state.readers,\n [key]: reader,\n },\n stats: {\n ...state.stats,\n [key]: fileStats,\n },\n };\n }\n case \"progress\": {\n const { key, progress } = action;\n return {\n ...state,\n stats: {\n ...state.stats,\n [key]: {\n ...state.stats[key],\n progress,\n },\n },\n };\n }\n case \"complete\": {\n const { key, result } = action;\n const file: CompletedFileUploadStats = {\n key,\n file: state.stats[key].file,\n status: \"complete\",\n result,\n progress: 100,\n };\n const { [key]: _reader, ...readers } = state.readers;\n\n return {\n ...state,\n readers,\n stats: {\n ...state.stats,\n [key]: file,\n },\n };\n }\n case \"clearErrors\":\n return { ...state, errors: [] };\n }\n },\n {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n }\n );\n const { stats, errors, readers } = state;\n\n const statsList = Object.values(stats);\n const totalFiles = statsList.length;\n const totalBytes = statsList.reduce(\n (result, { file: { size } }) => result + size,\n 0\n );\n const queueFiles = useCallback(\n (files: readonly File[]) => {\n const { pending, errors } = validateFiles(files, {\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n });\n\n dispatch({ type: \"queue\", errors, files: pending });\n },\n [\n validateFiles,\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n ]\n );\n const onDrop = useCallback(\n (event: DragEvent<E>) => {\n propOnDrop(event);\n event.preventDefault();\n event.stopPropagation();\n\n try {\n const files = event.dataTransfer.files;\n if (files) {\n queueFiles(Array.from(files));\n }\n } catch (e) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(e instanceof Error ? e.message : undefined),\n ],\n });\n }\n },\n [queueFiles, propOnDrop]\n );\n const onChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n propOnChange(event);\n try {\n const files = event.currentTarget.files;\n if (files) {\n queueFiles(Array.from(files));\n } else {\n throw new Error();\n }\n } catch (e) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(e instanceof Error ? e.message : undefined),\n ],\n });\n }\n },\n [queueFiles, propOnChange]\n );\n\n const remove = useCallback(\n (keyOrKeys: string | readonly string[]) => {\n const files = typeof keyOrKeys === \"string\" ? [keyOrKeys] : keyOrKeys;\n files.forEach((fileKey) => {\n readers[fileKey]?.abort();\n });\n\n dispatch({ type: \"remove\", files });\n },\n [readers]\n );\n const reset = useCallback(() => {\n Object.values(readers).forEach((reader) => {\n reader.abort();\n });\n\n dispatch({ type: \"reset\" });\n }, [readers]);\n const clearErrors = useCallback(() => {\n dispatch({ type: \"clearErrors\" });\n }, []);\n const start = useCallback((key: string, reader: FileReader) => {\n dispatch({ type: \"start\", key, reader });\n }, []);\n const complete = useCallback(\n (key: string, result: FileReaderResult = null) => {\n dispatch({ type: \"complete\", key, result });\n },\n []\n );\n const createProgressEventHandler = useCallback(\n (key: string) => (event: ProgressEvent) => {\n if (event.lengthComputable) {\n const percentage = Math.round((event.loaded * 100) / event.total);\n dispatch({ type: \"progress\", key, progress: percentage });\n }\n },\n []\n );\n\n useEffect(() => {\n const pending: ProcessingFileUploadStats[] = [];\n const uploading: ProcessingFileUploadStats[] = [];\n Object.values(stats).forEach((file) => {\n if (file.status === \"pending\") {\n pending.push(file);\n } else if (file.status === \"uploading\") {\n uploading.push(file);\n }\n });\n\n const lastIndex =\n concurrency === -1\n ? pending.length\n : Math.max(0, concurrency - uploading.length);\n const queue = pending.slice(0, lastIndex);\n if (!queue.length) {\n return;\n }\n\n queue.forEach((stats) => {\n const { key, file } = stats;\n const reader = new FileReader();\n\n // using `addEventListener` instead of directly setting to\n // `reader.progress`/`reader.load` so it's easier to test\n reader.addEventListener(\"progress\", createProgressEventHandler(key));\n reader.addEventListener(\"load\", () => {\n complete(key, reader.result);\n });\n\n start(key, reader);\n const parser = getFileParser(file);\n /* istanbul ignore next */\n if (\n process.env.NODE_ENV !== \"production\" &&\n ![\"readAsText\", \"readAsDataURL\", \"readAsArrayBuffer\"].includes(parser)\n ) {\n throw new Error(\"Invalid file reader parser\");\n }\n\n reader[parser](file);\n });\n }, [\n concurrency,\n stats,\n getFileParser,\n createProgressEventHandler,\n start,\n complete,\n ]);\n\n let accept = \"\";\n if (extensions.length) {\n accept = extensions.reduce((s, ext) => `${s ? `${s},` : \"\"}.${ext}`, \"\");\n }\n\n return {\n stats: statsList,\n errors,\n accept,\n totalBytes,\n totalFiles,\n onDrop,\n onChange,\n reset,\n remove,\n clearErrors,\n };\n}\n"],"names":["nanoid","useCallback","useEffect","useReducer","getFileParser","defaultGetFileParser","FileAccessError","isValidFileName","defaultIsValidFileName","validateFiles","defaultValidateFiles","noop","EMPTY_LIST","EMPTY_OBJECT","useFileUpload","options","maxFiles","extensions","minFileSize","maxFileSize","totalFileSize","concurrency","onDrop","propOnDrop","onChange","propOnChange","state","dispatch","reducer","action","type","stats","errors","readers","key","files","includes","reduce","file","progress","status","reader","fileStats","result","_reader","statsList","Object","values","totalFiles","length","totalBytes","size","queueFiles","pending","event","preventDefault","stopPropagation","dataTransfer","Array","from","e","Error","message","undefined","currentTarget","remove","keyOrKeys","forEach","fileKey","abort","reset","clearErrors","start","complete","createProgressEventHandler","lengthComputable","percentage","Math","round","loaded","total","uploading","push","lastIndex","max","queue","slice","FileReader","addEventListener","parser","process","env","NODE_ENV","accept","s","ext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/files/useFileUpload.ts"],"sourcesContent":["\"use client\";\n\nimport { nanoid } from \"nanoid\";\nimport {\n type ChangeEvent,\n type DragEvent,\n useCallback,\n useEffect,\n useReducer,\n} from \"react\";\n\nimport { createAcceptFromExtensions } from \"./createAcceptFromExtensions.js\";\nimport {\n type CompletedFileUploadStats,\n type FileReaderResult,\n type FileUploadHandlers,\n type FileUploadStats,\n type GetFileParser,\n type ProcessingFileUploadStats,\n getFileParser as defaultGetFileParser,\n} from \"./utils.js\";\nimport {\n FileAccessError,\n type FileValidationError,\n type FileValidationOptions,\n type FilesValidator,\n isValidFileName as defaultIsValidFileName,\n validateFiles as defaultValidateFiles,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadState<CustomError = never> {\n /**\n * All the files that have been validated and are either:\n * - pending upload\n * - uploading\n * - complete\n *\n * Each key in this object is the {@link BaseFileUploadStats.key} generated\n * once the upload starts pending.\n */\n stats: Readonly<Record<string, Readonly<FileUploadStats>>>;\n\n /**\n * A list of validation errors that have occurred before starting the upload\n * process.\n *\n * @see {@link FileAccessError}\n * @see {@link TooManyFilesError}\n * @see {@link FileValidationError}\n */\n errors: readonly FileValidationError<CustomError>[];\n}\n\n/**\n *\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n * @internal\n */\nexport interface FileUploadHookState<\n CustomError = never,\n> extends FileUploadState<CustomError> {\n /**\n * All the current readers used for uploading files to the browser.\n *\n * Note: Once an upload has completed, the reader will be removed.\n */\n readers: Readonly<Record<string, FileReader>>;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadOptions<E extends HTMLElement, CustomError = never>\n extends FileUploadHandlers<E>, FileValidationOptions {\n /**\n * Setting this value to a number greater than `0` will update the browser\n * upload process to queue the uploads in chunks instead of all at once. This\n * can help prevent the browser from freezing if dealing with large files that\n * are being converted to data urls.\n *\n * @defaultValue `-1`\n */\n concurrency?: number;\n\n /** {@inheritDoc FilesValidator} */\n validateFiles?: FilesValidator<CustomError>;\n /** {@inheritDoc GetFileParser} */\n getFileParser?: GetFileParser;\n}\n\n/** @internal */\ntype Action<E = never> =\n | {\n type: \"queue\";\n errors: readonly FileValidationError<E>[];\n files: readonly File[];\n }\n | { type: \"reset\" }\n | { type: \"remove\"; files: readonly string[] }\n | { type: \"start\"; key: string; reader: FileReader }\n | { type: \"progress\"; key: string; progress: number }\n | { type: \"complete\"; key: string; result: FileReaderResult }\n | { type: \"clearErrors\" };\n\n/** @since 2.9.0 */\nexport interface FileUploadActions {\n /**\n * Reset everything related to uploads ensuring that all file readers have\n * been aborted.\n */\n reset: () => void;\n\n /**\n * Removes all the errors that exist in state without canceling any of the\n * uploads already in progress.\n */\n clearErrors: () => void;\n\n /**\n * This function is used to cancel pending and uploading files or removing\n * completed files.\n *\n * @param keyOrKeys - A single or list of {@link BaseFileUploadStats.key} to\n * remove from state.\n */\n remove: (keyOrKeys: string | readonly string[]) => void;\n}\n\n/**\n *\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @since 2.9.0\n */\nexport interface FileUploadHookReturnValue<\n E extends HTMLElement = HTMLElement,\n CustomError = never,\n>\n extends FileUploadActions, Required<FileUploadHandlers<E>> {\n /** {@inheritDoc FileUploadState.errors} */\n errors: readonly FileValidationError<CustomError>[];\n\n /**\n * A list of all the {@link FileUploadStats}.\n *\n * @see {@link getSplitFileUploads} for separating by status\n */\n stats: readonly Readonly<FileUploadStats>[];\n\n /**\n * The total number of bytes for all the files that exist in the\n * {@link stats} list.\n */\n totalBytes: number;\n\n /**\n * The total number of files in the {@link stats} list.\n */\n totalFiles: number;\n\n /**\n * An `accept` string that can be passed to the {@link FileInput} component\n * when the {@link FileValidationOptions.extensions} list has been provided to\n * limit which files the OS will _attempt_ to allow access to.\n *\n * @example Simple example\n * ```ts\n * const extensions = ['pdf', 'docx', 'ppt'];\n * const { accept } = useFileUpload({ extensions, ...others });\n *\n * expect(accept).toBe(\"*.pdf,*.docx,*.ppt\")\n * ```\n *\n * @defaultValue `\"*\"`\n */\n accept: string;\n}\n\n/** @internal */\nconst EMPTY_LIST = [] as const;\n/** @internal */\nconst EMPTY_OBJECT = {} as const;\n\n/**\n * This hook is generally used to upload files **to the browser** in different\n * formats to be previewed `<img>`, `<video>`, `<embed>`, etc tags. However, it\n * can also be used to upload the files as an `ArrayBuffer` and then uploaded to\n * a server.\n *\n * @see {@link https://react-md.dev/components/file-input | FileInput Demos}\n * @see {@link https://react-md.dev/hooks/use-file-input | useFileInput Demos}\n * @typeParam E - An optional HTMLElement type that is used for the\n * {@link FileUploadHandlers}.\n * @typeParam CustomError - An optional error type that gets returned from the\n * {@link FilesValidator}.\n * @param options - All the {@link FileUploadOptions}\n * @returns the {@link FileUploadHookReturnValue}\n * @since 2.9.0\n */\nexport function useFileUpload<E extends HTMLElement, CustomError = never>(\n options: FileUploadOptions<E, CustomError> = {}\n): Readonly<FileUploadHookReturnValue<E, CustomError>> {\n const {\n maxFiles = -1,\n extensions = EMPTY_LIST,\n minFileSize = -1,\n maxFileSize = -1,\n totalFileSize = -1,\n concurrency = -1,\n onDrop: propOnDrop = noop,\n onChange: propOnChange = noop,\n validateFiles = defaultValidateFiles,\n getFileParser = defaultGetFileParser,\n isValidFileName = defaultIsValidFileName,\n } = options;\n\n const [state, dispatch] = useReducer(\n function reducer(\n state: FileUploadHookState<CustomError>,\n action: Action<CustomError>\n ): FileUploadHookState<CustomError> {\n switch (action.type) {\n case \"reset\":\n // need to reuse constants so that calling reset doesn't cause an\n // infinite loop in an effect\n return {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n };\n case \"remove\": {\n const stats: Record<string, FileUploadStats> = {};\n for (const key in state.stats) {\n if (!action.files.includes(key)) {\n stats[key] = state.stats[key];\n }\n }\n\n return {\n ...state,\n stats,\n };\n }\n case \"queue\": {\n const nextStats: Record<string, ProcessingFileUploadStats> = {};\n for (const file of action.files) {\n const key = nanoid();\n nextStats[key] = {\n key,\n file,\n progress: 0,\n status: \"pending\",\n };\n }\n\n return {\n ...state,\n stats: {\n ...state.stats,\n ...nextStats,\n },\n errors: [...state.errors, ...action.errors],\n };\n }\n case \"start\": {\n const { key, reader } = action;\n const fileStats: ProcessingFileUploadStats = {\n key,\n file: state.stats[key].file,\n progress: 0,\n status: \"uploading\",\n };\n\n return {\n ...state,\n readers: {\n ...state.readers,\n [key]: reader,\n },\n stats: {\n ...state.stats,\n [key]: fileStats,\n },\n };\n }\n case \"progress\": {\n const { key, progress } = action;\n return {\n ...state,\n stats: {\n ...state.stats,\n [key]: {\n ...state.stats[key],\n progress,\n },\n },\n };\n }\n case \"complete\": {\n const { key, result } = action;\n const file: CompletedFileUploadStats = {\n key,\n file: state.stats[key].file,\n status: \"complete\",\n result,\n progress: 100,\n };\n const { [key]: _reader, ...readers } = state.readers;\n\n return {\n ...state,\n readers,\n stats: {\n ...state.stats,\n [key]: file,\n },\n };\n }\n case \"clearErrors\":\n return { ...state, errors: [] };\n }\n },\n {\n stats: EMPTY_OBJECT,\n errors: EMPTY_LIST,\n readers: EMPTY_OBJECT,\n }\n );\n const { stats, errors, readers } = state;\n\n const statsList = Object.values(stats);\n const totalFiles = statsList.length;\n const totalBytes = statsList.reduce(\n (result, { file: { size } }) => result + size,\n 0\n );\n const queueFiles = useCallback(\n (files: readonly File[]) => {\n const { pending, errors } = validateFiles(files, {\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n });\n\n dispatch({ type: \"queue\", errors, files: pending });\n },\n [\n validateFiles,\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n ]\n );\n const onDrop = useCallback(\n (event: DragEvent<E>) => {\n propOnDrop(event);\n event.preventDefault();\n event.stopPropagation();\n\n try {\n const files = event.dataTransfer.files;\n if (files) {\n queueFiles([...files]);\n }\n } catch (error) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(\n error instanceof Error ? error.message : undefined\n ),\n ],\n });\n }\n },\n [queueFiles, propOnDrop]\n );\n const onChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n propOnChange(event);\n try {\n const files = event.currentTarget.files;\n if (files) {\n queueFiles([...files]);\n } else {\n throw new Error(\"There are no files\");\n }\n } catch (error) {\n dispatch({\n type: \"queue\",\n files: [],\n errors: [\n new FileAccessError(\n error instanceof Error ? error.message : undefined\n ),\n ],\n });\n }\n },\n [queueFiles, propOnChange]\n );\n\n const remove = useCallback(\n (keyOrKeys: string | readonly string[]) => {\n const files = typeof keyOrKeys === \"string\" ? [keyOrKeys] : keyOrKeys;\n for (const fileKey of files) {\n readers[fileKey]?.abort();\n }\n\n dispatch({ type: \"remove\", files });\n },\n [readers]\n );\n const reset = useCallback(() => {\n for (const reader of Object.values(readers)) {\n reader.abort();\n }\n\n dispatch({ type: \"reset\" });\n }, [readers]);\n const clearErrors = useCallback(() => {\n dispatch({ type: \"clearErrors\" });\n }, []);\n const start = useCallback((key: string, reader: FileReader) => {\n dispatch({ type: \"start\", key, reader });\n }, []);\n const complete = useCallback(\n (key: string, result: FileReaderResult = null) => {\n dispatch({ type: \"complete\", key, result });\n },\n []\n );\n const createProgressEventHandler = useCallback(\n (key: string) => (event: ProgressEvent) => {\n if (event.lengthComputable) {\n const percentage = Math.round((event.loaded * 100) / event.total);\n dispatch({ type: \"progress\", key, progress: percentage });\n }\n },\n []\n );\n\n useEffect(() => {\n const pending: ProcessingFileUploadStats[] = [];\n const uploading: ProcessingFileUploadStats[] = [];\n for (const file of Object.values(stats)) {\n if (file.status === \"pending\") {\n pending.push(file);\n } else if (file.status === \"uploading\") {\n uploading.push(file);\n }\n }\n\n const lastIndex =\n concurrency === -1\n ? pending.length\n : Math.max(0, concurrency - uploading.length);\n const queue = pending.slice(0, lastIndex);\n if (queue.length === 0) {\n return;\n }\n\n for (const stats of queue) {\n const { key, file } = stats;\n const reader = new FileReader();\n\n // using `addEventListener` instead of directly setting to\n // `reader.progress`/`reader.load` so it's easier to test\n reader.addEventListener(\"progress\", createProgressEventHandler(key));\n reader.addEventListener(\"load\", () => {\n complete(key, reader.result);\n });\n\n start(key, reader);\n const parser = getFileParser(file);\n /* istanbul ignore next */\n if (\n process.env.NODE_ENV !== \"production\" &&\n ![\"readAsText\", \"readAsDataURL\", \"readAsArrayBuffer\"].includes(parser)\n ) {\n throw new Error(\"Invalid file reader parser\");\n }\n\n reader[parser](file);\n }\n }, [\n concurrency,\n stats,\n getFileParser,\n createProgressEventHandler,\n start,\n complete,\n ]);\n\n return {\n stats: statsList,\n errors,\n accept: createAcceptFromExtensions(extensions),\n totalBytes,\n totalFiles,\n onDrop,\n onChange,\n reset,\n remove,\n clearErrors,\n };\n}\n"],"names":["nanoid","useCallback","useEffect","useReducer","createAcceptFromExtensions","getFileParser","defaultGetFileParser","FileAccessError","isValidFileName","defaultIsValidFileName","validateFiles","defaultValidateFiles","noop","EMPTY_LIST","EMPTY_OBJECT","useFileUpload","options","maxFiles","extensions","minFileSize","maxFileSize","totalFileSize","concurrency","onDrop","propOnDrop","onChange","propOnChange","state","dispatch","reducer","action","type","stats","errors","readers","key","files","includes","nextStats","file","progress","status","reader","fileStats","result","_reader","statsList","Object","values","totalFiles","length","totalBytes","reduce","size","queueFiles","pending","event","preventDefault","stopPropagation","dataTransfer","error","Error","message","undefined","currentTarget","remove","keyOrKeys","fileKey","abort","reset","clearErrors","start","complete","createProgressEventHandler","lengthComputable","percentage","Math","round","loaded","total","uploading","push","lastIndex","max","queue","slice","FileReader","addEventListener","parser","process","env","NODE_ENV","accept"],"mappings":"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"}
|
package/dist/files/utils.js
CHANGED
|
@@ -123,17 +123,21 @@
|
|
|
123
123
|
const pending = [];
|
|
124
124
|
const uploading = [];
|
|
125
125
|
const complete = [];
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
pending
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
126
|
+
for (const stat of stats){
|
|
127
|
+
switch(stat.status){
|
|
128
|
+
case "pending":
|
|
129
|
+
pending.push(stat);
|
|
130
|
+
break;
|
|
131
|
+
case "uploading":
|
|
132
|
+
uploading.push(stat);
|
|
133
|
+
break;
|
|
134
|
+
case "complete":
|
|
135
|
+
complete.push(stat);
|
|
136
|
+
break;
|
|
137
|
+
default:
|
|
138
|
+
/* istanbul ignore next */ throw new Error("Invalid upload stat");
|
|
135
139
|
}
|
|
136
|
-
}
|
|
140
|
+
}
|
|
137
141
|
return {
|
|
138
142
|
pending,
|
|
139
143
|
uploading,
|
package/dist/files/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/files/utils.ts"],"sourcesContent":["import { type ChangeEventHandler, type DragEventHandler } from \"react\";\n\n/** @since 2.9.0 */\nexport interface BaseFileUploadStats {\n /**\n * A unique key associated with each upload generated by `nanoid`.\n */\n key: string;\n\n /**\n * The file instance that is being uploaded.\n */\n file: File;\n\n /**\n * The current upload progress as a percentage from 0 - 100 percent.\n */\n progress: number;\n}\n\n/** @since 2.9.0 */\nexport interface ProcessingFileUploadStats extends BaseFileUploadStats {\n status: \"pending\" | \"uploading\";\n}\n\n/** @since 2.9.0 */\nexport type FileReaderResult = FileReader[\"result\"];\n\n/** @since 2.9.0 */\nexport interface CompletedFileUploadStats extends BaseFileUploadStats {\n status: \"complete\";\n\n /**\n * The result after a `FileReader` has read a file completely.\n *\n * Note: This _should_ be an `ArrayBuffer` if the next step is to upload to a\n * server.\n *\n * @see {@link FileReaderParser}\n * @see {@link getFileParser}\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader | FileReader}\n */\n result: FileReaderResult;\n}\n\n/** @since 2.9.0 */\nexport type FileUploadStats =\n | ProcessingFileUploadStats\n | CompletedFileUploadStats;\n\n/** @since 2.9.0 */\nexport type FileUploadStatus = FileUploadStats[\"status\"];\n\n/** @since 2.9.0 */\nexport interface FileUploadHandlers<E extends HTMLElement> {\n onDrop?: DragEventHandler<E>;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\n/**\n * This will first check if the mime-type of the file starts with `text/` and\n * fallback to checking a few file names or extensions that should be considered\n * text.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a text-content file.\n * @since 2.9.0\n */\nexport function isTextFile(file: File): boolean {\n return /\\.((j|t)sx?|json|lock|hbs|ya?ml|log|txt|md)$/i.test(file.name);\n}\n\n/**\n * This will first check if the mime-type of the file starts with `text\\/` and\n * fallback to checking a few file names or extensions that should be considered\n * text.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a text content file.\n * @since 2.9.0\n */\nexport function isImageFile(file: File): boolean {\n return /\\.(a?png|avif|svg|tiff|gifv?|jpe?g)/i.test(file.name);\n}\n\n/**\n * This will first check if the mime-type of the file starts with `audio/` and\n * fallback to checking a few file names or extensions that should be considered\n * audio.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a audio content file.\n * @since 2.9.0\n */\nexport function isAudioFile(file: File): boolean {\n return /\\.(mp3|wav|ogg|m4p|flac)$/i.test(file.name);\n}\n\n/**\n * This will first check if the mime-type of the file starts with `video/` and\n * fallback to checking a few file names or extensions that should be considered\n * video.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a video content file.\n * @since 2.9.0\n */\nexport function isVideoFile(file: File): boolean {\n return /\\.(mkv|mpe?g|mov|avi|flv|webm|mp4)$/i.test(file.name);\n}\n\n/**\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file matches an image, audio, or video file.\n * @since 2.9.0\n */\nexport function isMediaFile(file: File): boolean {\n return isImageFile(file) || isAudioFile(file) || isVideoFile(file);\n}\n\n/**\n * One of the function names from a `FileReader` to upload a file to the\n * client.\n *\n * Note: If this file does not need to be previewed in the browser and will\n * immediately be uploaded to a server, use `readAsArrayBuffer`.\n *\n * @since 2.9.0\n * @since 6.0.0 Removed `\"readAsBinaryString` since it is deprecated\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString}\n */\nexport type FileReaderParser =\n | \"readAsText\"\n | \"readAsDataURL\"\n | \"readAsArrayBuffer\";\n\n/**\n * A function that should return one of the {@link FileReaderParser} functions\n * to start uploading a file to the browser.\n *\n * @example The Default File Upload Parser\n * ```ts\n * export const getFileParser: GetFileParser = (file) => {\n * if (isMediaFile(file)) {\n * return \"readAsDataURL\";\n * }\n *\n * if (isTextFile(file)) {\n * return \"readAsText\";\n * }\n *\n * return \"readAsArrayBuffer\";\n * };\n * ```\n *\n * @param file - The file to get a parser for\n * @returns the {@link FileReaderParser} string.\n * @since 2.9.0\n */\nexport type GetFileParser = (file: File) => FileReaderParser;\n\n/**\n * This function will attempt to read:\n * - media (image, audio, and video) files as a data url so they can be\n * previewed in `<img>`, `<audio>`, and `<video>` tags\n * - text files as plain text\n * - everything else as an `ArrayBuffer` which can be manually converted into a\n * data url if needed with `URL.createObjectURL`\n *\n * @since 2.9.0\n */\nexport const getFileParser: GetFileParser = (file) => {\n if (isMediaFile(file)) {\n return \"readAsDataURL\";\n }\n\n if (isTextFile(file)) {\n return \"readAsText\";\n }\n\n return \"readAsArrayBuffer\";\n};\n\n/** @since 2.9.0 */\nexport interface SplitFileUploads {\n readonly pending: readonly ProcessingFileUploadStats[];\n readonly uploading: readonly ProcessingFileUploadStats[];\n readonly complete: readonly CompletedFileUploadStats[];\n}\n\n/**\n * This util will split all the current upload stats by status.\n *\n * @example Main Usage\n * ```tsx\n * import { FileUpload } from \"@react-md/core/files/FileUpload\";\n * import { useFileUpload } from \"@react-md/core/files/useFileUpload\";\n * import { getSplitFileUploads } from \"@react-md/core/files/utils\";\n *\n * function Example() {\n * const { stats, errors, accept, onChange } = useFileUpload();\n * const { pending, uploading, completed } = getSplitFileUploads(stats);\n *\n * return (\n * <>\n * <FileUpload accept={accept} onChange={onChange} />\n * {pending.map(({ key, file, progress, status }) => {\n * // pretend some UI for each pending item with the provided data\n * return null;\n * })}\n * {uploading.map(({ file, key, progress, status }) => {\n * // pretend some UI for each uploading item with the provided data\n * return null;\n * })}\n * {complete.map(({ file, key, progress, result, status }) => {\n * // pretend some UI for each complete item with the provided data\n * return null;\n * })}\n * </>\n * );\n * }\n * ```\n *\n * @param stats - The {@link FileUploadStats} list generally returned by the\n * {@link useFileUpload} hook.\n * @returns the {@link SplitFileUploads}.\n * @since 2.9.0\n */\nexport function getSplitFileUploads(\n stats: readonly FileUploadStats[]\n): SplitFileUploads {\n const pending: ProcessingFileUploadStats[] = [];\n const uploading: ProcessingFileUploadStats[] = [];\n const complete: CompletedFileUploadStats[] = [];\n
|
|
1
|
+
{"version":3,"sources":["../../src/files/utils.ts"],"sourcesContent":["import { type ChangeEventHandler, type DragEventHandler } from \"react\";\n\n/** @since 2.9.0 */\nexport interface BaseFileUploadStats {\n /**\n * A unique key associated with each upload generated by `nanoid`.\n */\n key: string;\n\n /**\n * The file instance that is being uploaded.\n */\n file: File;\n\n /**\n * The current upload progress as a percentage from 0 - 100 percent.\n */\n progress: number;\n}\n\n/** @since 2.9.0 */\nexport interface ProcessingFileUploadStats extends BaseFileUploadStats {\n status: \"pending\" | \"uploading\";\n}\n\n/** @since 2.9.0 */\nexport type FileReaderResult = FileReader[\"result\"];\n\n/** @since 2.9.0 */\nexport interface CompletedFileUploadStats extends BaseFileUploadStats {\n status: \"complete\";\n\n /**\n * The result after a `FileReader` has read a file completely.\n *\n * Note: This _should_ be an `ArrayBuffer` if the next step is to upload to a\n * server.\n *\n * @see {@link FileReaderParser}\n * @see {@link getFileParser}\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader | FileReader}\n */\n result: FileReaderResult;\n}\n\n/** @since 2.9.0 */\nexport type FileUploadStats =\n | ProcessingFileUploadStats\n | CompletedFileUploadStats;\n\n/** @since 2.9.0 */\nexport type FileUploadStatus = FileUploadStats[\"status\"];\n\n/** @since 2.9.0 */\nexport interface FileUploadHandlers<E extends HTMLElement> {\n onDrop?: DragEventHandler<E>;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\n/**\n * This will first check if the mime-type of the file starts with `text/` and\n * fallback to checking a few file names or extensions that should be considered\n * text.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a text-content file.\n * @since 2.9.0\n */\nexport function isTextFile(file: File): boolean {\n return /\\.((j|t)sx?|json|lock|hbs|ya?ml|log|txt|md)$/i.test(file.name);\n}\n\n/**\n * This will first check if the mime-type of the file starts with `text\\/` and\n * fallback to checking a few file names or extensions that should be considered\n * text.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a text content file.\n * @since 2.9.0\n */\nexport function isImageFile(file: File): boolean {\n return /\\.(a?png|avif|svg|tiff|gifv?|jpe?g)/i.test(file.name);\n}\n\n/**\n * This will first check if the mime-type of the file starts with `audio/` and\n * fallback to checking a few file names or extensions that should be considered\n * audio.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a audio content file.\n * @since 2.9.0\n */\nexport function isAudioFile(file: File): boolean {\n return /\\.(mp3|wav|ogg|m4p|flac)$/i.test(file.name);\n}\n\n/**\n * This will first check if the mime-type of the file starts with `video/` and\n * fallback to checking a few file names or extensions that should be considered\n * video.\n *\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file should be considered as a video content file.\n * @since 2.9.0\n */\nexport function isVideoFile(file: File): boolean {\n return /\\.(mkv|mpe?g|mov|avi|flv|webm|mp4)$/i.test(file.name);\n}\n\n/**\n * This function is not guaranteed to be 100% correct and is only useful if\n * trying to generate a preview of files uploaded to the browser.\n *\n * @param file - The file to check\n * @returns `true` if the file matches an image, audio, or video file.\n * @since 2.9.0\n */\nexport function isMediaFile(file: File): boolean {\n return isImageFile(file) || isAudioFile(file) || isVideoFile(file);\n}\n\n/**\n * One of the function names from a `FileReader` to upload a file to the\n * client.\n *\n * Note: If this file does not need to be previewed in the browser and will\n * immediately be uploaded to a server, use `readAsArrayBuffer`.\n *\n * @since 2.9.0\n * @since 6.0.0 Removed `\"readAsBinaryString` since it is deprecated\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString}\n */\nexport type FileReaderParser =\n | \"readAsText\"\n | \"readAsDataURL\"\n | \"readAsArrayBuffer\";\n\n/**\n * A function that should return one of the {@link FileReaderParser} functions\n * to start uploading a file to the browser.\n *\n * @example The Default File Upload Parser\n * ```ts\n * export const getFileParser: GetFileParser = (file) => {\n * if (isMediaFile(file)) {\n * return \"readAsDataURL\";\n * }\n *\n * if (isTextFile(file)) {\n * return \"readAsText\";\n * }\n *\n * return \"readAsArrayBuffer\";\n * };\n * ```\n *\n * @param file - The file to get a parser for\n * @returns the {@link FileReaderParser} string.\n * @since 2.9.0\n */\nexport type GetFileParser = (file: File) => FileReaderParser;\n\n/**\n * This function will attempt to read:\n * - media (image, audio, and video) files as a data url so they can be\n * previewed in `<img>`, `<audio>`, and `<video>` tags\n * - text files as plain text\n * - everything else as an `ArrayBuffer` which can be manually converted into a\n * data url if needed with `URL.createObjectURL`\n *\n * @since 2.9.0\n */\nexport const getFileParser: GetFileParser = (file) => {\n if (isMediaFile(file)) {\n return \"readAsDataURL\";\n }\n\n if (isTextFile(file)) {\n return \"readAsText\";\n }\n\n return \"readAsArrayBuffer\";\n};\n\n/** @since 2.9.0 */\nexport interface SplitFileUploads {\n readonly pending: readonly ProcessingFileUploadStats[];\n readonly uploading: readonly ProcessingFileUploadStats[];\n readonly complete: readonly CompletedFileUploadStats[];\n}\n\n/**\n * This util will split all the current upload stats by status.\n *\n * @example Main Usage\n * ```tsx\n * import { FileUpload } from \"@react-md/core/files/FileUpload\";\n * import { useFileUpload } from \"@react-md/core/files/useFileUpload\";\n * import { getSplitFileUploads } from \"@react-md/core/files/utils\";\n *\n * function Example() {\n * const { stats, errors, accept, onChange } = useFileUpload();\n * const { pending, uploading, completed } = getSplitFileUploads(stats);\n *\n * return (\n * <>\n * <FileUpload accept={accept} onChange={onChange} />\n * {pending.map(({ key, file, progress, status }) => {\n * // pretend some UI for each pending item with the provided data\n * return null;\n * })}\n * {uploading.map(({ file, key, progress, status }) => {\n * // pretend some UI for each uploading item with the provided data\n * return null;\n * })}\n * {complete.map(({ file, key, progress, result, status }) => {\n * // pretend some UI for each complete item with the provided data\n * return null;\n * })}\n * </>\n * );\n * }\n * ```\n *\n * @param stats - The {@link FileUploadStats} list generally returned by the\n * {@link useFileUpload} hook.\n * @returns the {@link SplitFileUploads}.\n * @since 2.9.0\n */\nexport function getSplitFileUploads(\n stats: readonly FileUploadStats[]\n): SplitFileUploads {\n const pending: ProcessingFileUploadStats[] = [];\n const uploading: ProcessingFileUploadStats[] = [];\n const complete: CompletedFileUploadStats[] = [];\n for (const stat of stats) {\n switch (stat.status) {\n case \"pending\":\n pending.push(stat);\n break;\n case \"uploading\":\n uploading.push(stat);\n break;\n case \"complete\":\n complete.push(stat);\n break;\n default:\n /* istanbul ignore next */\n throw new Error(\"Invalid upload stat\");\n }\n }\n\n return { pending, uploading, complete };\n}\n"],"names":["isTextFile","file","test","name","isImageFile","isAudioFile","isVideoFile","isMediaFile","getFileParser","getSplitFileUploads","stats","pending","uploading","complete","stat","status","push","Error"],"mappings":"AA2DA;;;;;;;;;;;CAWC,GACD,OAAO,SAASA,WAAWC,IAAU;IACnC,OAAO,gDAAgDC,IAAI,CAACD,KAAKE,IAAI;AACvE;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,YAAYH,IAAU;IACpC,OAAO,uCAAuCC,IAAI,CAACD,KAAKE,IAAI;AAC9D;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASE,YAAYJ,IAAU;IACpC,OAAO,6BAA6BC,IAAI,CAACD,KAAKE,IAAI;AACpD;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASG,YAAYL,IAAU;IACpC,OAAO,uCAAuCC,IAAI,CAACD,KAAKE,IAAI;AAC9D;AAEA;;;;;;;CAOC,GACD,OAAO,SAASI,YAAYN,IAAU;IACpC,OAAOG,YAAYH,SAASI,YAAYJ,SAASK,YAAYL;AAC/D;AA2CA;;;;;;;;;CASC,GACD,OAAO,MAAMO,gBAA+B,CAACP;IAC3C,IAAIM,YAAYN,OAAO;QACrB,OAAO;IACT;IAEA,IAAID,WAAWC,OAAO;QACpB,OAAO;IACT;IAEA,OAAO;AACT,EAAE;AASF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCC,GACD,OAAO,SAASQ,oBACdC,KAAiC;IAEjC,MAAMC,UAAuC,EAAE;IAC/C,MAAMC,YAAyC,EAAE;IACjD,MAAMC,WAAuC,EAAE;IAC/C,KAAK,MAAMC,QAAQJ,MAAO;QACxB,OAAQI,KAAKC,MAAM;YACjB,KAAK;gBACHJ,QAAQK,IAAI,CAACF;gBACb;YACF,KAAK;gBACHF,UAAUI,IAAI,CAACF;gBACf;YACF,KAAK;gBACHD,SAASG,IAAI,CAACF;gBACd;YACF;gBACE,wBAAwB,GACxB,MAAM,IAAIG,MAAM;QACpB;IACF;IAEA,OAAO;QAAEN;QAASC;QAAWC;IAAS;AACxC"}
|
package/dist/files/validation.js
CHANGED
|
@@ -167,15 +167,14 @@ import { nanoid } from "nanoid";
|
|
|
167
167
|
const errors = [];
|
|
168
168
|
const pending = [];
|
|
169
169
|
const extraFiles = [];
|
|
170
|
-
const extensionRegExp = extensions.length > 0 ? new RegExp(
|
|
170
|
+
const extensionRegExp = extensions.length > 0 ? new RegExp(String.raw`\.(${extensions.join("|")})$`, "i") : undefined;
|
|
171
171
|
let maxFilesReached = maxFiles > 0 && totalFiles >= maxFiles;
|
|
172
172
|
let remainingBytes = totalFileSize - totalBytes;
|
|
173
173
|
const extensionErrors = [];
|
|
174
174
|
const minErrors = [];
|
|
175
175
|
const maxErrors = [];
|
|
176
176
|
const totalSizeErrors = [];
|
|
177
|
-
for(
|
|
178
|
-
const file = files[i];
|
|
177
|
+
for (const file of files){
|
|
179
178
|
let valid = true;
|
|
180
179
|
const { size } = file;
|
|
181
180
|
if (!isValidFileName(file, extensionRegExp, extensions)) {
|
|
@@ -202,19 +201,19 @@ import { nanoid } from "nanoid";
|
|
|
202
201
|
maxFilesReached = maxFilesReached || maxFiles > 0 && totalFiles + pending.length >= maxFiles;
|
|
203
202
|
}
|
|
204
203
|
}
|
|
205
|
-
if (extensionErrors.length) {
|
|
204
|
+
if (extensionErrors.length > 0) {
|
|
206
205
|
errors.push(new FileExtensionError(extensionErrors, extensions));
|
|
207
206
|
}
|
|
208
|
-
if (minErrors.length) {
|
|
207
|
+
if (minErrors.length > 0) {
|
|
209
208
|
errors.push(new FileSizeError(minErrors, "min", minFileSize));
|
|
210
209
|
}
|
|
211
|
-
if (maxErrors.length) {
|
|
210
|
+
if (maxErrors.length > 0) {
|
|
212
211
|
errors.push(new FileSizeError(maxErrors, "max", maxFileSize));
|
|
213
212
|
}
|
|
214
|
-
if (totalSizeErrors.length) {
|
|
213
|
+
if (totalSizeErrors.length > 0) {
|
|
215
214
|
errors.push(new FileSizeError(totalSizeErrors, "total", totalFileSize));
|
|
216
215
|
}
|
|
217
|
-
if (extraFiles.length) {
|
|
216
|
+
if (extraFiles.length > 0) {
|
|
218
217
|
errors.push(new TooManyFilesError(extraFiles, maxFiles));
|
|
219
218
|
}
|
|
220
219
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/files/validation.ts"],"sourcesContent":["import { nanoid } from \"nanoid\";\n\n/**\n * An error that will be created if a user tries dragging and dropping files\n * from a shared directory that they do not have access to. This error will not\n * occur much.\n *\n * @since 2.9.0\n */\nexport class FileAccessError extends Error {\n /**\n * A unique key generated by `nanoid` that can be used as a `React` key\n */\n public key: string;\n\n /**\n *\n * @param message - An optional message for the error.\n */\n constructor(message?: string) {\n super(message);\n this.key = nanoid();\n this.name = \"FileAccessError\";\n }\n}\n\n/**\n * An error that just requires a `File` to be passed as the first argument.\n *\n * @since 2.9.0\n */\nexport class GenericFileError extends Error {\n /**\n * A unique key generated by `nanoid` that can be used as a `React` key\n */\n public key: string;\n\n /**\n *\n * @param files - A list of files that caused the error.\n * @param reason - An optional reason for the error\n */\n constructor(\n public files: readonly File[],\n public reason?: string\n ) {\n super(\"Invalid files\");\n this.key = nanoid();\n this.name = \"GenericFileError\";\n }\n}\n\n/**\n * An error that is created during the upload process if the number of files\n * exceeds the {@link FileUploadOptions.maxFiles} amount.\n *\n * @since 2.9.0\n */\nexport class TooManyFilesError extends GenericFileError {\n /**\n *\n * @param files - The list of files that could not be uploaded due to the file\n * limit defined.\n * @param limit - The max limit of files allowed.\n */\n constructor(\n files: readonly File[],\n public limit: number\n ) {\n super(files, \"file limit\");\n this.name = \"TooManyFilesError\";\n }\n}\n\n/**\n * An error that will be created if a user tries to upload a file that\n * is either:\n * - less than the {@link FileValidationOptions.minFileSize}\n * - greater than the {@link FileValidationOptions.maxFileSize}\n * - including the file would be greater than the {@link FileValidationOptions.totalFileSize}\n *\n * @since 2.9.0\n */\nexport class FileSizeError extends GenericFileError {\n /**\n *\n * @param files - The list of files that have the file size error\n * @param type - The file size error type\n * @param limit - The number of bytes allowed based on the type\n */\n constructor(\n files: readonly File[],\n public type: \"min\" | \"max\" | \"total\",\n public limit: number\n ) {\n super(files, \"file size\");\n this.name = \"FileSizeError\";\n }\n}\n\n/**\n * An error that will be created if a user tries to upload a file that does not\n * end with one of the {@link FileValidationOptions.extensions}.\n *\n * @since 2.9.0\n */\nexport class FileExtensionError extends GenericFileError {\n /**\n *\n * @param files - The file that caused the error\n * @param extensions - The allowed list of file extensions\n */\n constructor(\n files: readonly File[],\n public extensions: readonly string[]\n ) {\n super(files, \"extension\");\n this.name = \"FileExtensionError\";\n }\n}\n\n/**\n * Mostly an internal type that is used to allow custom validation errors\n *\n * @since 2.9.0\n */\nexport type FileValidationError<E = GenericFileError> =\n | FileAccessError\n | TooManyFilesError\n | FileSizeError\n | FileExtensionError\n | E;\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link GenericFileError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileAccessError}\n */\nexport function isGenericFileError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is GenericFileError {\n return \"name\" in error && error.name === \"GenericFileError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link FileAccessError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileAccessError}\n */\nexport function isFileAccessError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is FileAccessError {\n return \"name\" in error && error.name === \"FileAccessError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link TooManyFilesError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link TooManyFilesError}\n */\nexport function isTooManyFilesError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is TooManyFilesError {\n return \"name\" in error && error.name === \"TooManyFilesError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link FileSizeError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileSizeError}\n */\nexport function isFileSizeError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is FileSizeError {\n return \"name\" in error && error.name === \"FileSizeError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link FileExtensionError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileExtensionError}\n */\nexport function isFileExtensionError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is FileExtensionError {\n return \"name\" in error && error.name === \"FileExtensionError\";\n}\n\n/**\n * This function is used to determine if a file should be added to the\n * {@link FileExtensionError}. The default implementation should work for most\n * use cases except when files that do not have extensions can be uploaded. i.e.\n * LICENSE files.\n *\n * @param file - The file being checked\n * @param extensionRegExp - A regex that will only be defined if the\n * `extensions` list had at least one value.\n * @param extensions - The list of extensions allowed\n * @returns true if the file has a valid name.\n * @since 3.1.0\n */\nexport type IsValidFileName = (\n file: File,\n extensionRegExp: RegExp | undefined,\n extensions: readonly string[]\n) => boolean;\n\n/**\n *\n * @defaultValue `matcher?.test(file.name) ?? true`\n * @since 3.1.0\n */\nexport const isValidFileName: IsValidFileName = (file, matcher) =>\n matcher?.test(file.name) ?? true;\n\n/** @since 2.9.0 */\nexport interface FileValidationOptions {\n /**\n * If the number of files should be limited, set this value to a number\n * greater than `0`.\n *\n * Note: This still allows \"infinite\" files when set to `0` since the\n * `<input>` element should normally be set to `disabled` if files should not\n * be able to be uploaded.\n *\n * @defaultValue `-1`\n */\n maxFiles?: number;\n\n /**\n * An optional minimum file size to enforce for each file. This will only be\n * used when it is greater than `0`.\n *\n * @defaultValue `-1`\n */\n minFileSize?: number;\n\n /**\n * An optional maximum file size to enforce for each file. This will only be\n * used when it is greater than `0`.\n *\n * @defaultValue `-1`\n */\n maxFileSize?: number;\n\n /**\n * An optional list of extensions to enforce when uploading files.\n *\n * Note: The extensions and file names will be compared ignoring case.\n *\n * @example Only Allow Images\n * ```ts\n * const extensions = [\"png\", \"jpeg\", \"jpg\", \"gif\"];\n * ```\n */\n extensions?: readonly string[];\n\n /** {@inheritDoc IsValidFileName} */\n isValidFileName?: IsValidFileName;\n\n /**\n * An optional total file size to enforce when the {@link maxFiles} option is\n * not set to `1`.\n *\n * @defaultValue `-1`\n */\n totalFileSize?: number;\n}\n\n/** @since 2.9.0 */\nexport interface FilesValidationOptions extends Required<FileValidationOptions> {\n /**\n * The total number of bytes in the {@link FileUploadHookReturnValue.stats}\n * list. This is really just:\n *\n * ```ts\n * const totalBytes = stats.reduce((total, stat) => total + stat.file.size, 0);\n * ```\n */\n totalBytes: number;\n\n /**\n * The total number of files in the {@link FileUploadHookReturnValue.stats}.\n */\n totalFiles: number;\n}\n\n/**\n * @since 2.9.0\n */\nexport interface ValidatedFilesResult<CustomError> {\n /**\n * A filtered list of files that have been validated and can be queued for the\n * upload process.\n */\n pending: readonly File[];\n\n /**\n * A list of {@link FileValidationError} that occurred during the validation\n * step.\n *\n * Note: If an error has occurred, the file **should not** be added to the\n * {@link pending} list of files.\n */\n errors: readonly FileValidationError<CustomError>[];\n}\n\n/**\n * This function will be called whenever a file has been uploaded by the user\n * either through an `<input type=\"file\">` or drag and drop behavior.\n *\n * @example Simple Example\n * ```ts\n * const validateFiles: FilesValidator = (files, options) => {\n * const invalid: File[] = [];\n * const pending: File[] = [];\n * for (const file of files) {\n * if (!/\\.(jpe?g|svg|png)$/i.test(name)) {\n * invalid.push(file);\n * } else {\n * pending.push(file);\n * }\n * }\n *\n * const errors: FileValidationError[] = [];\n * if (invalid.length) {\n * errors.push(new GenericFileError(invalid))\n * }\n *\n * return { pending, errors };\n * };\n * ```\n *\n * @typeParam E - An optional custom file validation error.\n * @param files - The list of files to check\n * @param options - The {@link FilesValidationOptions}\n * @returns the {@link ValidatedFilesResult}\n * @see {@link validateFiles} for the default implementation\n * @since 2.9.0\n */\nexport type FilesValidator<CustomError = never> = (\n files: readonly File[],\n options: FilesValidationOptions\n) => ValidatedFilesResult<CustomError>;\n\n/**\n * A pretty decent default implementation for validating files with the\n * {@link useFileUpload} that ensures the {@link FilesValidationOptions} are\n * enforced before allowing a file to be uploaded.\n *\n * @typeParam E - An optional custom file validation error.\n * @param files - The list of files to check\n * @param options - The {@link FilesValidationOptions}\n * @returns the {@link ValidatedFilesResult}\n * @since 2.9.0\n */\nexport function validateFiles<CustomError>(\n files: readonly File[],\n options: FilesValidationOptions\n): ValidatedFilesResult<CustomError> {\n const {\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n } = options;\n\n const errors: FileValidationError<CustomError>[] = [];\n const pending: File[] = [];\n const extraFiles: File[] = [];\n const extensionRegExp =\n extensions.length > 0\n ? new RegExp(`\\\\.(${extensions.join(\"|\")})$`, \"i\")\n : undefined;\n\n let maxFilesReached = maxFiles > 0 && totalFiles >= maxFiles;\n let remainingBytes = totalFileSize - totalBytes;\n const extensionErrors: File[] = [];\n const minErrors: File[] = [];\n const maxErrors: File[] = [];\n const totalSizeErrors: File[] = [];\n for (let i = 0; i < files.length; i += 1) {\n const file = files[i];\n\n let valid = true;\n const { size } = file;\n if (!isValidFileName(file, extensionRegExp, extensions)) {\n valid = false;\n extensionErrors.push(file);\n }\n\n if (minFileSize > 0 && size < minFileSize) {\n valid = false;\n minErrors.push(file);\n }\n\n if (maxFileSize > 0 && size > maxFileSize) {\n valid = false;\n maxErrors.push(file);\n } else if (totalFileSize > 0 && remainingBytes - file.size < 0) {\n // don't want both errors displaying\n valid = false;\n totalSizeErrors.push(file);\n }\n\n if (maxFilesReached && valid) {\n extraFiles.push(file);\n } else if (!maxFilesReached && valid) {\n pending.push(file);\n remainingBytes -= file.size;\n maxFilesReached =\n maxFilesReached ||\n (maxFiles > 0 && totalFiles + pending.length >= maxFiles);\n }\n }\n\n if (extensionErrors.length) {\n errors.push(new FileExtensionError(extensionErrors, extensions));\n }\n\n if (minErrors.length) {\n errors.push(new FileSizeError(minErrors, \"min\", minFileSize));\n }\n\n if (maxErrors.length) {\n errors.push(new FileSizeError(maxErrors, \"max\", maxFileSize));\n }\n\n if (totalSizeErrors.length) {\n errors.push(new FileSizeError(totalSizeErrors, \"total\", totalFileSize));\n }\n\n if (extraFiles.length) {\n errors.push(new TooManyFilesError(extraFiles, maxFiles));\n }\n\n return { pending, errors };\n}\n"],"names":["nanoid","FileAccessError","Error","message","key","name","GenericFileError","files","reason","TooManyFilesError","limit","FileSizeError","type","FileExtensionError","extensions","isGenericFileError","error","isFileAccessError","isTooManyFilesError","isFileSizeError","isFileExtensionError","isValidFileName","file","matcher","test","validateFiles","options","maxFiles","minFileSize","maxFileSize","totalBytes","totalFiles","totalFileSize","errors","pending","extraFiles","extensionRegExp","length","RegExp","join","undefined","maxFilesReached","remainingBytes","extensionErrors","minErrors","maxErrors","totalSizeErrors","i","valid","size","push"],"mappings":";;;;;;;;;;;;;AAAA,SAASA,MAAM,QAAQ,SAAS;AAEhC;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwBC;IAMnC;;;GAGC,GACD,YAAYC,OAAgB,CAAE;QAC5B,KAAK,CAACA,UAVR;;GAEC,GACD,uBAAOC,OAAP,KAAA;QAQE,IAAI,CAACA,GAAG,GAAGJ;QACX,IAAI,CAACK,IAAI,GAAG;IACd;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAMC,yBAAyBJ;IAMpC;;;;GAIC,GACD,YACE,AAAOK,KAAsB,EAC7B,AAAOC,MAAe,CACtB;QACA,KAAK,CAAC,qGAdR;;GAEC,GACD,uBAAOJ,OAAP,KAAA,SAQSG,QAAAA,YACAC,SAAAA;QAGP,IAAI,CAACJ,GAAG,GAAGJ;QACX,IAAI,CAACK,IAAI,GAAG;IACd;AACF;AAEA;;;;;CAKC,GACD,OAAO,MAAMI,0BAA0BH;IACrC;;;;;GAKC,GACD,YACEC,KAAsB,EACtB,AAAOG,KAAa,CACpB;QACA,KAAK,CAACH,OAAO,6DAFNG,QAAAA;QAGP,IAAI,CAACL,IAAI,GAAG;IACd;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMM,sBAAsBL;IACjC;;;;;GAKC,GACD,YACEC,KAAsB,EACtB,AAAOK,IAA6B,EACpC,AAAOF,KAAa,CACpB;QACA,KAAK,CAACH,OAAO,oGAHNK,OAAAA,WACAF,QAAAA;QAGP,IAAI,CAACL,IAAI,GAAG;IACd;AACF;AAEA;;;;;CAKC,GACD,OAAO,MAAMQ,2BAA2BP;IACtC;;;;GAIC,GACD,YACEC,KAAsB,EACtB,AAAOO,UAA6B,CACpC;QACA,KAAK,CAACP,OAAO,iEAFNO,aAAAA;QAGP,IAAI,CAACT,IAAI,GAAG;IACd;AACF;AAcA;;;;;;;CAOC,GACD,OAAO,SAASU,mBACdC,KAAuC;IAEvC,OAAO,UAAUA,SAASA,MAAMX,IAAI,KAAK;AAC3C;AAEA;;;;;;;CAOC,GACD,OAAO,SAASY,kBACdD,KAAuC;IAEvC,OAAO,UAAUA,SAASA,MAAMX,IAAI,KAAK;AAC3C;AAEA;;;;;;;CAOC,GACD,OAAO,SAASa,oBACdF,KAAuC;IAEvC,OAAO,UAAUA,SAASA,MAAMX,IAAI,KAAK;AAC3C;AAEA;;;;;;;CAOC,GACD,OAAO,SAASc,gBACdH,KAAuC;IAEvC,OAAO,UAAUA,SAASA,MAAMX,IAAI,KAAK;AAC3C;AAEA;;;;;;;CAOC,GACD,OAAO,SAASe,qBACdJ,KAAuC;IAEvC,OAAO,UAAUA,SAASA,MAAMX,IAAI,KAAK;AAC3C;AAqBA;;;;CAIC,GACD,OAAO,MAAMgB,kBAAmC,CAACC,MAAMC,UACrDA,SAASC,KAAKF,KAAKjB,IAAI,KAAK,KAAK;AAoInC;;;;;;;;;;CAUC,GACD,OAAO,SAASoB,cACdlB,KAAsB,EACtBmB,OAA+B;IAE/B,MAAM,EACJC,QAAQ,EACRb,UAAU,EACVc,WAAW,EACXC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,aAAa,EACbX,eAAe,EAChB,GAAGK;IAEJ,MAAMO,SAA6C,EAAE;IACrD,MAAMC,UAAkB,EAAE;IAC1B,MAAMC,aAAqB,EAAE;IAC7B,MAAMC,kBACJtB,WAAWuB,MAAM,GAAG,IAChB,IAAIC,OAAO,CAAC,IAAI,EAAExB,WAAWyB,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAC5CC;IAEN,IAAIC,kBAAkBd,WAAW,KAAKI,cAAcJ;IACpD,IAAIe,iBAAiBV,gBAAgBF;IACrC,MAAMa,kBAA0B,EAAE;IAClC,MAAMC,YAAoB,EAAE;IAC5B,MAAMC,YAAoB,EAAE;IAC5B,MAAMC,kBAA0B,EAAE;IAClC,IAAK,IAAIC,IAAI,GAAGA,IAAIxC,MAAM8B,MAAM,EAAEU,KAAK,EAAG;QACxC,MAAMzB,OAAOf,KAAK,CAACwC,EAAE;QAErB,IAAIC,QAAQ;QACZ,MAAM,EAAEC,IAAI,EAAE,GAAG3B;QACjB,IAAI,CAACD,gBAAgBC,MAAMc,iBAAiBtB,aAAa;YACvDkC,QAAQ;YACRL,gBAAgBO,IAAI,CAAC5B;QACvB;QAEA,IAAIM,cAAc,KAAKqB,OAAOrB,aAAa;YACzCoB,QAAQ;YACRJ,UAAUM,IAAI,CAAC5B;QACjB;QAEA,IAAIO,cAAc,KAAKoB,OAAOpB,aAAa;YACzCmB,QAAQ;YACRH,UAAUK,IAAI,CAAC5B;QACjB,OAAO,IAAIU,gBAAgB,KAAKU,iBAAiBpB,KAAK2B,IAAI,GAAG,GAAG;YAC9D,oCAAoC;YACpCD,QAAQ;YACRF,gBAAgBI,IAAI,CAAC5B;QACvB;QAEA,IAAImB,mBAAmBO,OAAO;YAC5Bb,WAAWe,IAAI,CAAC5B;QAClB,OAAO,IAAI,CAACmB,mBAAmBO,OAAO;YACpCd,QAAQgB,IAAI,CAAC5B;YACboB,kBAAkBpB,KAAK2B,IAAI;YAC3BR,kBACEA,mBACCd,WAAW,KAAKI,aAAaG,QAAQG,MAAM,IAAIV;QACpD;IACF;IAEA,IAAIgB,gBAAgBN,MAAM,EAAE;QAC1BJ,OAAOiB,IAAI,CAAC,IAAIrC,mBAAmB8B,iBAAiB7B;IACtD;IAEA,IAAI8B,UAAUP,MAAM,EAAE;QACpBJ,OAAOiB,IAAI,CAAC,IAAIvC,cAAciC,WAAW,OAAOhB;IAClD;IAEA,IAAIiB,UAAUR,MAAM,EAAE;QACpBJ,OAAOiB,IAAI,CAAC,IAAIvC,cAAckC,WAAW,OAAOhB;IAClD;IAEA,IAAIiB,gBAAgBT,MAAM,EAAE;QAC1BJ,OAAOiB,IAAI,CAAC,IAAIvC,cAAcmC,iBAAiB,SAASd;IAC1D;IAEA,IAAIG,WAAWE,MAAM,EAAE;QACrBJ,OAAOiB,IAAI,CAAC,IAAIzC,kBAAkB0B,YAAYR;IAChD;IAEA,OAAO;QAAEO;QAASD;IAAO;AAC3B"}
|
|
1
|
+
{"version":3,"sources":["../../src/files/validation.ts"],"sourcesContent":["import { nanoid } from \"nanoid\";\n\n/**\n * An error that will be created if a user tries dragging and dropping files\n * from a shared directory that they do not have access to. This error will not\n * occur much.\n *\n * @since 2.9.0\n */\nexport class FileAccessError extends Error {\n /**\n * A unique key generated by `nanoid` that can be used as a `React` key\n */\n public key: string;\n\n /**\n *\n * @param message - An optional message for the error.\n */\n constructor(message?: string) {\n super(message);\n this.key = nanoid();\n this.name = \"FileAccessError\";\n }\n}\n\n/**\n * An error that just requires a `File` to be passed as the first argument.\n *\n * @since 2.9.0\n */\nexport class GenericFileError extends Error {\n /**\n * A unique key generated by `nanoid` that can be used as a `React` key\n */\n public key: string;\n\n /**\n *\n * @param files - A list of files that caused the error.\n * @param reason - An optional reason for the error\n */\n constructor(\n public files: readonly File[],\n public reason?: string\n ) {\n super(\"Invalid files\");\n this.key = nanoid();\n this.name = \"GenericFileError\";\n }\n}\n\n/**\n * An error that is created during the upload process if the number of files\n * exceeds the {@link FileUploadOptions.maxFiles} amount.\n *\n * @since 2.9.0\n */\nexport class TooManyFilesError extends GenericFileError {\n /**\n *\n * @param files - The list of files that could not be uploaded due to the file\n * limit defined.\n * @param limit - The max limit of files allowed.\n */\n constructor(\n files: readonly File[],\n public limit: number\n ) {\n super(files, \"file limit\");\n this.name = \"TooManyFilesError\";\n }\n}\n\n/**\n * An error that will be created if a user tries to upload a file that\n * is either:\n * - less than the {@link FileValidationOptions.minFileSize}\n * - greater than the {@link FileValidationOptions.maxFileSize}\n * - including the file would be greater than the {@link FileValidationOptions.totalFileSize}\n *\n * @since 2.9.0\n */\nexport class FileSizeError extends GenericFileError {\n /**\n *\n * @param files - The list of files that have the file size error\n * @param type - The file size error type\n * @param limit - The number of bytes allowed based on the type\n */\n constructor(\n files: readonly File[],\n public type: \"min\" | \"max\" | \"total\",\n public limit: number\n ) {\n super(files, \"file size\");\n this.name = \"FileSizeError\";\n }\n}\n\n/**\n * An error that will be created if a user tries to upload a file that does not\n * end with one of the {@link FileValidationOptions.extensions}.\n *\n * @since 2.9.0\n */\nexport class FileExtensionError extends GenericFileError {\n /**\n *\n * @param files - The file that caused the error\n * @param extensions - The allowed list of file extensions\n */\n constructor(\n files: readonly File[],\n public extensions: readonly string[]\n ) {\n super(files, \"extension\");\n this.name = \"FileExtensionError\";\n }\n}\n\n/**\n * Mostly an internal type that is used to allow custom validation errors\n *\n * @since 2.9.0\n */\nexport type FileValidationError<E = GenericFileError> =\n | FileAccessError\n | TooManyFilesError\n | FileSizeError\n | FileExtensionError\n | E;\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link GenericFileError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileAccessError}\n */\nexport function isGenericFileError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is GenericFileError {\n return \"name\" in error && error.name === \"GenericFileError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link FileAccessError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileAccessError}\n */\nexport function isFileAccessError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is FileAccessError {\n return \"name\" in error && error.name === \"FileAccessError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link TooManyFilesError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link TooManyFilesError}\n */\nexport function isTooManyFilesError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is TooManyFilesError {\n return \"name\" in error && error.name === \"TooManyFilesError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link FileSizeError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileSizeError}\n */\nexport function isFileSizeError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is FileSizeError {\n return \"name\" in error && error.name === \"FileSizeError\";\n}\n\n/**\n * A simple type-guard that can be used to check if the\n * {@link FileValidationError} is the {@link FileExtensionError} which can be\n * useful when displaying the errors to the user.\n *\n * @param error - The error to check\n * @returns true if the error is a {@link FileExtensionError}\n */\nexport function isFileExtensionError<CustomError extends object>(\n error: FileValidationError<CustomError>\n): error is FileExtensionError {\n return \"name\" in error && error.name === \"FileExtensionError\";\n}\n\n/**\n * This function is used to determine if a file should be added to the\n * {@link FileExtensionError}. The default implementation should work for most\n * use cases except when files that do not have extensions can be uploaded. i.e.\n * LICENSE files.\n *\n * @param file - The file being checked\n * @param extensionRegExp - A regex that will only be defined if the\n * `extensions` list had at least one value.\n * @param extensions - The list of extensions allowed\n * @returns true if the file has a valid name.\n * @since 3.1.0\n */\nexport type IsValidFileName = (\n file: File,\n extensionRegExp: RegExp | undefined,\n extensions: readonly string[]\n) => boolean;\n\n/**\n *\n * @defaultValue `matcher?.test(file.name) ?? true`\n * @since 3.1.0\n */\nexport const isValidFileName: IsValidFileName = (file, matcher) =>\n matcher?.test(file.name) ?? true;\n\n/** @since 2.9.0 */\nexport interface FileValidationOptions {\n /**\n * If the number of files should be limited, set this value to a number\n * greater than `0`.\n *\n * Note: This still allows \"infinite\" files when set to `0` since the\n * `<input>` element should normally be set to `disabled` if files should not\n * be able to be uploaded.\n *\n * @defaultValue `-1`\n */\n maxFiles?: number;\n\n /**\n * An optional minimum file size to enforce for each file. This will only be\n * used when it is greater than `0`.\n *\n * @defaultValue `-1`\n */\n minFileSize?: number;\n\n /**\n * An optional maximum file size to enforce for each file. This will only be\n * used when it is greater than `0`.\n *\n * @defaultValue `-1`\n */\n maxFileSize?: number;\n\n /**\n * An optional list of extensions to enforce when uploading files.\n *\n * Note: The extensions and file names will be compared ignoring case.\n *\n * @example Only Allow Images\n * ```ts\n * const extensions = [\"png\", \"jpeg\", \"jpg\", \"gif\"];\n * ```\n */\n extensions?: readonly string[];\n\n /** {@inheritDoc IsValidFileName} */\n isValidFileName?: IsValidFileName;\n\n /**\n * An optional total file size to enforce when the {@link maxFiles} option is\n * not set to `1`.\n *\n * @defaultValue `-1`\n */\n totalFileSize?: number;\n}\n\n/** @since 2.9.0 */\nexport interface FilesValidationOptions extends Required<FileValidationOptions> {\n /**\n * The total number of bytes in the {@link FileUploadHookReturnValue.stats}\n * list. This is really just:\n *\n * ```ts\n * const totalBytes = stats.reduce((total, stat) => total + stat.file.size, 0);\n * ```\n */\n totalBytes: number;\n\n /**\n * The total number of files in the {@link FileUploadHookReturnValue.stats}.\n */\n totalFiles: number;\n}\n\n/**\n * @since 2.9.0\n */\nexport interface ValidatedFilesResult<CustomError> {\n /**\n * A filtered list of files that have been validated and can be queued for the\n * upload process.\n */\n pending: readonly File[];\n\n /**\n * A list of {@link FileValidationError} that occurred during the validation\n * step.\n *\n * Note: If an error has occurred, the file **should not** be added to the\n * {@link pending} list of files.\n */\n errors: readonly FileValidationError<CustomError>[];\n}\n\n/**\n * This function will be called whenever a file has been uploaded by the user\n * either through an `<input type=\"file\">` or drag and drop behavior.\n *\n * @example Simple Example\n * ```ts\n * const validateFiles: FilesValidator = (files, options) => {\n * const invalid: File[] = [];\n * const pending: File[] = [];\n * for (const file of files) {\n * if (!/\\.(jpe?g|svg|png)$/i.test(name)) {\n * invalid.push(file);\n * } else {\n * pending.push(file);\n * }\n * }\n *\n * const errors: FileValidationError[] = [];\n * if (invalid.length) {\n * errors.push(new GenericFileError(invalid))\n * }\n *\n * return { pending, errors };\n * };\n * ```\n *\n * @typeParam E - An optional custom file validation error.\n * @param files - The list of files to check\n * @param options - The {@link FilesValidationOptions}\n * @returns the {@link ValidatedFilesResult}\n * @see {@link validateFiles} for the default implementation\n * @since 2.9.0\n */\nexport type FilesValidator<CustomError = never> = (\n files: readonly File[],\n options: FilesValidationOptions\n) => ValidatedFilesResult<CustomError>;\n\n/**\n * A pretty decent default implementation for validating files with the\n * {@link useFileUpload} that ensures the {@link FilesValidationOptions} are\n * enforced before allowing a file to be uploaded.\n *\n * @typeParam E - An optional custom file validation error.\n * @param files - The list of files to check\n * @param options - The {@link FilesValidationOptions}\n * @returns the {@link ValidatedFilesResult}\n * @since 2.9.0\n */\nexport function validateFiles<CustomError>(\n files: readonly File[],\n options: FilesValidationOptions\n): ValidatedFilesResult<CustomError> {\n const {\n maxFiles,\n extensions,\n minFileSize,\n maxFileSize,\n totalBytes,\n totalFiles,\n totalFileSize,\n isValidFileName,\n } = options;\n\n const errors: FileValidationError<CustomError>[] = [];\n const pending: File[] = [];\n const extraFiles: File[] = [];\n const extensionRegExp =\n extensions.length > 0\n ? new RegExp(String.raw`\\.(${extensions.join(\"|\")})$`, \"i\")\n : undefined;\n\n let maxFilesReached = maxFiles > 0 && totalFiles >= maxFiles;\n let remainingBytes = totalFileSize - totalBytes;\n const extensionErrors: File[] = [];\n const minErrors: File[] = [];\n const maxErrors: File[] = [];\n const totalSizeErrors: File[] = [];\n for (const file of files) {\n let valid = true;\n const { size } = file;\n if (!isValidFileName(file, extensionRegExp, extensions)) {\n valid = false;\n extensionErrors.push(file);\n }\n\n if (minFileSize > 0 && size < minFileSize) {\n valid = false;\n minErrors.push(file);\n }\n\n if (maxFileSize > 0 && size > maxFileSize) {\n valid = false;\n maxErrors.push(file);\n } else if (totalFileSize > 0 && remainingBytes - file.size < 0) {\n // don't want both errors displaying\n valid = false;\n totalSizeErrors.push(file);\n }\n\n if (maxFilesReached && valid) {\n extraFiles.push(file);\n } else if (!maxFilesReached && valid) {\n pending.push(file);\n remainingBytes -= file.size;\n maxFilesReached =\n maxFilesReached ||\n (maxFiles > 0 && totalFiles + pending.length >= maxFiles);\n }\n }\n\n if (extensionErrors.length > 0) {\n errors.push(new FileExtensionError(extensionErrors, extensions));\n }\n\n if (minErrors.length > 0) {\n errors.push(new FileSizeError(minErrors, \"min\", minFileSize));\n }\n\n if (maxErrors.length > 0) {\n errors.push(new FileSizeError(maxErrors, \"max\", maxFileSize));\n }\n\n if (totalSizeErrors.length > 0) {\n errors.push(new FileSizeError(totalSizeErrors, \"total\", totalFileSize));\n }\n\n if (extraFiles.length > 0) {\n errors.push(new TooManyFilesError(extraFiles, maxFiles));\n }\n\n return { pending, errors };\n}\n"],"names":["nanoid","FileAccessError","Error","message","key","name","GenericFileError","files","reason","TooManyFilesError","limit","FileSizeError","type","FileExtensionError","extensions","isGenericFileError","error","isFileAccessError","isTooManyFilesError","isFileSizeError","isFileExtensionError","isValidFileName","file","matcher","test","validateFiles","options","maxFiles","minFileSize","maxFileSize","totalBytes","totalFiles","totalFileSize","errors","pending","extraFiles","extensionRegExp","length","RegExp","String","raw","join","undefined","maxFilesReached","remainingBytes","extensionErrors","minErrors","maxErrors","totalSizeErrors","valid","size","push"],"mappings":"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"}
|
|
@@ -81,7 +81,7 @@ const noop = ()=>{
|
|
|
81
81
|
}
|
|
82
82
|
// For some reason, the `"Enter"` keydown event fires at a different timing
|
|
83
83
|
// than the Space keydown event.
|
|
84
|
-
|
|
84
|
+
globalThis.requestAnimationFrame(()=>{
|
|
85
85
|
prevFocus.current?.focus();
|
|
86
86
|
});
|
|
87
87
|
},
|