@bit.rhplus/ui2.upload-files-modal 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export default UploadFilesModal;
+declare const UploadFilesModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/dist/index.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable */
+import React from 'react';
+import DraggableModal from '@bit.rhplus/draggable-modal';
+import { Card, Progress, List, Tag, Button, Typography, Empty } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined, SyncOutlined, FileTextOutlined, InboxOutlined, } from '@ant-design/icons';
+import prettyBytes from 'pretty-bytes';
+import useUploadFiles from './useUploadFiles';
+const { Text } = Typography;
+const UploadFilesModal = React.forwardRef((props, ref) => {
+    const { api, accessToken, getContainer = () => document.body, } = props;
+    const { uploadFiles } = useUploadFiles(api, accessToken);
+    const [opened, setOpened] = React.useState(false);
+    const [progressFiles, setProgressFiles] = React.useState({});
+    const { files: uploadedFiles = [], current = 0, total = 0 } = progressFiles || {};
+    const onProgress = (progress) => setProgressFiles(progress);
+    const handleFilesSelected = (selectedFiles) => {
+        setOpened(true);
+        uploadFiles(selectedFiles, onProgress);
+    };
+    React.useImperativeHandle(ref, () => ({
+        handleFilesSelected,
+    }));
+    // Výpočet celkového progressu
+    const overallProgress = React.useMemo(() => {
+        if (uploadedFiles.length === 0)
+            return 0;
+        const completed = uploadedFiles.filter((f) => f.state === 'success' || f.state === 'error').length;
+        return Math.round((completed / uploadedFiles.length) * 100);
+    }, [uploadedFiles]);
+    // Statistiky
+    const stats = React.useMemo(() => {
+        const success = uploadedFiles.filter((f) => f.state === 'success').length;
+        const error = uploadedFiles.filter((f) => f.state === 'error').length;
+        const loading = uploadedFiles.filter((f) => f.state === 'loading').length;
+        const waiting = uploadedFiles.filter((f) => f.state === 'waiting').length;
+        return { success, error, loading, waiting, total: uploadedFiles.length };
+    }, [uploadedFiles]);
+    // Ikona podle stavu
+    const getStatusIcon = (state) => {
+        switch (state) {
+            case 'success':
+                return _jsx(CheckCircleOutlined, { style: { color: '#52c41a', fontSize: 20 } });
+            case 'error':
+                return _jsx(CloseCircleOutlined, { style: { color: '#ff4d4f', fontSize: 20 } });
+            case 'loading':
+                return _jsx(SyncOutlined, { spin: true, style: { color: '#1890ff', fontSize: 20 } });
+            case 'waiting':
+                return _jsx(FileTextOutlined, { style: { color: '#d9d9d9', fontSize: 20 } });
+            default:
+                return null;
+        }
+    };
+    // Tag podle stavu
+    const getStatusTag = (state) => {
+        switch (state) {
+            case 'success':
+                return (_jsx(Tag, { color: "success", icon: _jsx(CheckCircleOutlined, {}), children: "Nahr\u00E1no" }));
+            case 'error':
+                return (_jsx(Tag, { color: "error", icon: _jsx(CloseCircleOutlined, {}), children: "Chyba" }));
+            case 'loading':
+                return (_jsx(Tag, { color: "processing", icon: _jsx(SyncOutlined, { spin: true }), children: "Nahr\u00E1v\u00E1n\u00ED..." }));
+            case 'waiting':
+                return (_jsx(Tag, { color: "default", icon: _jsx(FileTextOutlined, {}), children: "\u010Cek\u00E1" }));
+            default:
+                return null;
+        }
+    };
+    return (_jsx(DraggableModal, { open: opened, onCancel: () => setOpened(false), getContainer: getContainer, width: "700px", title: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(InboxOutlined, { style: { fontSize: 20, color: '#1890ff' } }), _jsx("span", { children: "Nahr\u00E1v\u00E1n\u00ED soubor\u016F" }), stats.total > 0 && (_jsxs("span", { style: { fontSize: 12, fontWeight: 'normal', color: '#999' }, children: ["(", stats.success + stats.error, "/", stats.total, ")"] }))] }), footer: () => (_jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }, children: _jsx(Button, { type: "primary", onClick: () => setOpened(false), children: "Zav\u0159\u00EDt" }) })), maskClosable: false, children: _jsxs("div", { style: { padding: '16px 0' }, children: [uploadedFiles.length > 0 && (_jsxs(Card, { size: "small", style: { marginBottom: 16 }, children: [_jsx("div", { style: { marginBottom: 8 }, children: _jsx(Text, { strong: true, children: "Celkov\u00FD pr\u016Fb\u011Bh" }) }), _jsx(Progress, { percent: overallProgress, strokeColor: {
+                                '0%': '#108ee9',
+                                '100%': '#87d068',
+                            }, status: stats.error > 0 && stats.success === 0 ? 'exception' : undefined }), _jsxs("div", { style: {
+                                marginTop: 12,
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(4, 1fr)',
+                                gap: 8,
+                                fontSize: 12,
+                            }, children: [_jsxs("div", { children: [_jsx("div", { style: { color: '#999' }, children: "Celkem" }), _jsx("div", { style: { fontWeight: 'bold', fontSize: 16 }, children: stats.total })] }), _jsxs("div", { children: [_jsx("div", { style: { color: '#52c41a' }, children: "\u00DAsp\u011B\u0161n\u00E9" }), _jsx("div", { style: { fontWeight: 'bold', fontSize: 16, color: '#52c41a' }, children: stats.success })] }), _jsxs("div", { children: [_jsx("div", { style: { color: '#ff4d4f' }, children: "Chyby" }), _jsx("div", { style: { fontWeight: 'bold', fontSize: 16, color: '#ff4d4f' }, children: stats.error })] }), _jsxs("div", { children: [_jsx("div", { style: { color: '#1890ff' }, children: "Prob\u00EDh\u00E1" }), _jsx("div", { style: { fontWeight: 'bold', fontSize: 16, color: '#1890ff' }, children: stats.loading })] })] })] })), uploadedFiles.length > 0 ? (_jsx(List, { dataSource: uploadedFiles, renderItem: (file) => (_jsx(List.Item, { style: {
+                            padding: '12px 16px',
+                            background: file.state === 'error' ? '#fff2f0' : '#fafafa',
+                            borderRadius: 4,
+                            marginBottom: 8,
+                            border: '1px solid',
+                            borderColor: file.state === 'error' ? '#ffccc7' : '#d9d9d9',
+                        }, children: _jsx(List.Item.Meta, { avatar: getStatusIcon(file.state), title: _jsxs("div", { style: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                }, children: [_jsx("span", { style: {
+                                            fontWeight: 500,
+                                            color: file.state === 'error' ? '#ff4d4f' : '#262626',
+                                        }, children: file.name }), getStatusTag(file.state)] }), description: _jsxs("div", { style: { display: 'flex', gap: 16, fontSize: 12, flexWrap: 'wrap' }, children: [_jsxs("span", { children: ["Velikost: ", prettyBytes(file.size)] }), _jsxs("span", { children: ["Typ: ", file.type || 'neznámý'] }), file.error && (_jsxs("span", { style: { color: '#ff4d4f', fontWeight: 500 }, children: ["Chyba: ", file.error] }))] }) }) })) })) : (_jsx(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE, description: "\u017D\u00E1dn\u00E9 soubory k nahr\u00E1n\u00ED" }))] }) }));
+});
+UploadFilesModal.displayName = 'UploadFilesModal';
+export default UploadFilesModal;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}

package/dist/preview-1763315539949.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/useUploadFiles.d.ts

@@ -0,0 +1,4 @@
+export default useUploadFiles;
+declare function useUploadFiles(api: any, accessToken: any): {
+    uploadFiles: (event: any, onProgress: any) => Promise<void>;
+};

package/dist/useUploadFiles.js

@@ -0,0 +1,95 @@
+/* eslint-disable */
+import useData from '@bit.rhplus/data';
+const StateEnum = {
+    Waiting: 'waiting',
+    Loading: 'loading',
+    Success: 'success',
+    Error: 'error',
+};
+const useUploadFiles = (api, accessToken) => {
+    const { fetchData } = useData();
+    const uploadFiles = async (event, onProgress) => {
+        // Podporuje jak File objekty (z drag&drop) tak FileList (z input)
+        let files;
+        if (event.target?.files) {
+            files = Array.from(event.target.files);
+        }
+        else if (Array.isArray(event)) {
+            files = event;
+        }
+        else if (event instanceof FileList) {
+            files = Array.from(event);
+        }
+        else {
+            console.error('Invalid files input', event);
+            return;
+        }
+        if (files.length === 0)
+            return;
+        const total = files.length;
+        let progress = {
+            current: 0,
+            total,
+            files: files.map(({ name, size, type }) => ({
+                name,
+                size,
+                type,
+                state: StateEnum.Waiting,
+                error: null,
+            })),
+        };
+        onProgress(progress);
+        const uploadFile = async (file, index) => {
+            // Set loading state
+            progress = {
+                ...progress,
+                files: progress.files.map((f, i) => {
+                    if (i === index)
+                        return { ...f, state: StateEnum.Loading };
+                    return f;
+                }),
+            };
+            onProgress(progress);
+            try {
+                const formData = new FormData();
+                formData.append('Files', file);
+                const result = await fetchData(api, formData, accessToken);
+                // Set success state
+                progress = {
+                    ...progress,
+                    current: progress.current + 1,
+                    files: progress.files.map((f, i) => {
+                        if (i === index)
+                            return { ...f, state: StateEnum.Success };
+                        return f;
+                    }),
+                };
+            }
+            catch (error) {
+                // Set error state with message
+                const errorMessage = error?.response?.data?.message ||
+                    error?.message ||
+                    'Neznámá chyba při nahrávání souboru';
+                progress = {
+                    ...progress,
+                    current: progress.current + 1,
+                    files: progress.files.map((f, i) => {
+                        if (i === index)
+                            return {
+                                ...f,
+                                state: StateEnum.Error,
+                                error: errorMessage,
+                            };
+                        return f;
+                    }),
+                };
+            }
+            onProgress(progress);
+        };
+        // Upload files in parallel
+        await Promise.all(files.map((file, index) => uploadFile(file, index)));
+    };
+    return { uploadFiles };
+};
+export default useUploadFiles;
+//# sourceMappingURL=useUploadFiles.js.map

package/dist/useUploadFiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUploadFiles.js","sourceRoot":"","sources":["../useUploadFiles.js"],"names":[],"mappings":"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"}

package/index.jsx

@@ -0,0 +1,246 @@
+/* eslint-disable */
+import React from 'react';
+import DraggableModal from '@bit.rhplus/draggable-modal';
+import { Card, Progress, List, Tag, Button, Typography, Empty } from 'antd';
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  SyncOutlined,
+  FileTextOutlined,
+  InboxOutlined,
+} from '@ant-design/icons';
+import prettyBytes from 'pretty-bytes';
+import useUploadFiles from './useUploadFiles';
+
+const { Text } = Typography;
+
+const UploadFilesModal = React.forwardRef((props, ref) => {
+  const {
+    api,
+    accessToken,
+    getContainer = () => document.body,
+  } = props;
+
+  const { uploadFiles } = useUploadFiles(api, accessToken);
+  const [opened, setOpened] = React.useState(false);
+  const [progressFiles, setProgressFiles] = React.useState({});
+
+  const { files: uploadedFiles = [], current = 0, total = 0 } = progressFiles || {};
+
+  const onProgress = (progress) => setProgressFiles(progress);
+
+  const handleFilesSelected = (selectedFiles) => {
+    setOpened(true);
+    uploadFiles(selectedFiles, onProgress);
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    handleFilesSelected,
+  }));
+
+
+  // Výpočet celkového progressu
+  const overallProgress = React.useMemo(() => {
+    if (uploadedFiles.length === 0) return 0;
+    const completed = uploadedFiles.filter(
+      (f) => f.state === 'success' || f.state === 'error'
+    ).length;
+    return Math.round((completed / uploadedFiles.length) * 100);
+  }, [uploadedFiles]);
+
+  // Statistiky
+  const stats = React.useMemo(() => {
+    const success = uploadedFiles.filter((f) => f.state === 'success').length;
+    const error = uploadedFiles.filter((f) => f.state === 'error').length;
+    const loading = uploadedFiles.filter((f) => f.state === 'loading').length;
+    const waiting = uploadedFiles.filter((f) => f.state === 'waiting').length;
+
+    return { success, error, loading, waiting, total: uploadedFiles.length };
+  }, [uploadedFiles]);
+
+  // Ikona podle stavu
+  const getStatusIcon = (state) => {
+    switch (state) {
+      case 'success':
+        return <CheckCircleOutlined style={{ color: '#52c41a', fontSize: 20 }} />;
+      case 'error':
+        return <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: 20 }} />;
+      case 'loading':
+        return <SyncOutlined spin style={{ color: '#1890ff', fontSize: 20 }} />;
+      case 'waiting':
+        return <FileTextOutlined style={{ color: '#d9d9d9', fontSize: 20 }} />;
+      default:
+        return null;
+    }
+  };
+
+  // Tag podle stavu
+  const getStatusTag = (state) => {
+    switch (state) {
+      case 'success':
+        return (
+          <Tag color="success" icon={<CheckCircleOutlined />}>
+            Nahráno
+          </Tag>
+        );
+      case 'error':
+        return (
+          <Tag color="error" icon={<CloseCircleOutlined />}>
+            Chyba
+          </Tag>
+        );
+      case 'loading':
+        return (
+          <Tag color="processing" icon={<SyncOutlined spin />}>
+            Nahrávání...
+          </Tag>
+        );
+      case 'waiting':
+        return (
+          <Tag color="default" icon={<FileTextOutlined />}>
+            Čeká
+          </Tag>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <DraggableModal
+      open={opened}
+      onCancel={() => setOpened(false)}
+      getContainer={getContainer}
+      width="700px"
+      title={
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <InboxOutlined style={{ fontSize: 20, color: '#1890ff' }} />
+          <span>Nahrávání souborů</span>
+          {stats.total > 0 && (
+            <span style={{ fontSize: 12, fontWeight: 'normal', color: '#999' }}>
+              ({stats.success + stats.error}/{stats.total})
+            </span>
+          )}
+        </div>
+      }
+      footer={() => (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+          <Button type="primary" onClick={() => setOpened(false)}>
+            Zavřít
+          </Button>
+        </div>
+      )}
+      maskClosable={false}
+    >
+      <div style={{ padding: '16px 0' }}>
+        {/* Overall Progress */}
+        {uploadedFiles.length > 0 && (
+          <Card size="small" style={{ marginBottom: 16 }}>
+            <div style={{ marginBottom: 8 }}>
+              <Text strong>Celkový průběh</Text>
+            </div>
+            <Progress
+              percent={overallProgress}
+              strokeColor={{
+                '0%': '#108ee9',
+                '100%': '#87d068',
+              }}
+              status={stats.error > 0 && stats.success === 0 ? 'exception' : undefined}
+            />
+            <div
+              style={{
+                marginTop: 12,
+                display: 'grid',
+                gridTemplateColumns: 'repeat(4, 1fr)',
+                gap: 8,
+                fontSize: 12,
+              }}
+            >
+              <div>
+                <div style={{ color: '#999' }}>Celkem</div>
+                <div style={{ fontWeight: 'bold', fontSize: 16 }}>{stats.total}</div>
+              </div>
+              <div>
+                <div style={{ color: '#52c41a' }}>Úspěšné</div>
+                <div style={{ fontWeight: 'bold', fontSize: 16, color: '#52c41a' }}>
+                  {stats.success}
+                </div>
+              </div>
+              <div>
+                <div style={{ color: '#ff4d4f' }}>Chyby</div>
+                <div style={{ fontWeight: 'bold', fontSize: 16, color: '#ff4d4f' }}>
+                  {stats.error}
+                </div>
+              </div>
+              <div>
+                <div style={{ color: '#1890ff' }}>Probíhá</div>
+                <div style={{ fontWeight: 'bold', fontSize: 16, color: '#1890ff' }}>
+                  {stats.loading}
+                </div>
+              </div>
+            </div>
+          </Card>
+        )}
+
+        {/* File List */}
+        {uploadedFiles.length > 0 ? (
+          <List
+            dataSource={uploadedFiles}
+            renderItem={(file) => (
+              <List.Item
+                style={{
+                  padding: '12px 16px',
+                  background: file.state === 'error' ? '#fff2f0' : '#fafafa',
+                  borderRadius: 4,
+                  marginBottom: 8,
+                  border: '1px solid',
+                  borderColor: file.state === 'error' ? '#ffccc7' : '#d9d9d9',
+                }}
+              >
+                <List.Item.Meta
+                  avatar={getStatusIcon(file.state)}
+                  title={
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <span
+                        style={{
+                          fontWeight: 500,
+                          color: file.state === 'error' ? '#ff4d4f' : '#262626',
+                        }}
+                      >
+                        {file.name}
+                      </span>
+                      {getStatusTag(file.state)}
+                    </div>
+                  }
+                  description={
+                    <div style={{ display: 'flex', gap: 16, fontSize: 12, flexWrap: 'wrap' }}>
+                      <span>Velikost: {prettyBytes(file.size)}</span>
+                      <span>Typ: {file.type || 'neznámý'}</span>
+                      {file.error && (
+                        <span style={{ color: '#ff4d4f', fontWeight: 500 }}>
+                          Chyba: {file.error}
+                        </span>
+                      )}
+                    </div>
+                  }
+                />
+              </List.Item>
+            )}
+          />
+        ) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="Žádné soubory k nahrání" />
+        )}
+      </div>
+    </DraggableModal>
+  );
+});
+
+UploadFilesModal.displayName = 'UploadFilesModal';
+
+export default UploadFilesModal;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@bit.rhplus/ui2.upload-files-modal",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "name": "ui2/upload-files-modal",
+    "version": "0.0.1",
+    "scope": "remote-scope"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "antd": "^5.20.6",
+    "pretty-bytes": "^6.1.1",
+    "@bit.rhplus/draggable-modal": "0.0.12",
+    "@bit.rhplus/data": "0.0.57"
+  },
+  "devDependencies": {
+    "@bitdev/react.react-env": "4.0.14",
+    "@teambit/react.react-env": "1.0.132"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "publishConfig": {
+    "scope": "@bit.rhplus",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/types/asset.d.ts

@@ -0,0 +1,43 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/useUploadFiles.js

@@ -0,0 +1,103 @@
+/* eslint-disable */
+import useData from '@bit.rhplus/data';
+
+const StateEnum = {
+  Waiting: 'waiting',
+  Loading: 'loading',
+  Success: 'success',
+  Error: 'error',
+};
+
+const useUploadFiles = (api, accessToken) => {
+  const { fetchData } = useData();
+
+  const uploadFiles = async (event, onProgress) => {
+    // Podporuje jak File objekty (z drag&drop) tak FileList (z input)
+    let files;
+    if (event.target?.files) {
+      files = Array.from(event.target.files);
+    } else if (Array.isArray(event)) {
+      files = event;
+    } else if (event instanceof FileList) {
+      files = Array.from(event);
+    } else {
+      console.error('Invalid files input', event);
+      return;
+    }
+
+    if (files.length === 0) return;
+
+    const total = files.length;
+
+    let progress = {
+      current: 0,
+      total,
+      files: files.map(({ name, size, type }) => ({
+        name,
+        size,
+        type,
+        state: StateEnum.Waiting,
+        error: null,
+      })),
+    };
+
+    onProgress(progress);
+
+    const uploadFile = async (file, index) => {
+      // Set loading state
+      progress = {
+        ...progress,
+        files: progress.files.map((f, i) => {
+          if (i === index) return { ...f, state: StateEnum.Loading };
+          return f;
+        }),
+      };
+      onProgress(progress);
+
+      try {
+        const formData = new FormData();
+        formData.append('Files', file);
+        const result = await fetchData(api, formData, accessToken);
+
+        // Set success state
+        progress = {
+          ...progress,
+          current: progress.current + 1,
+          files: progress.files.map((f, i) => {
+            if (i === index) return { ...f, state: StateEnum.Success };
+            return f;
+          }),
+        };
+      } catch (error) {
+        // Set error state with message
+        const errorMessage =
+          error?.response?.data?.message ||
+          error?.message ||
+          'Neznámá chyba při nahrávání souboru';
+
+        progress = {
+          ...progress,
+          current: progress.current + 1,
+          files: progress.files.map((f, i) => {
+            if (i === index)
+              return {
+                ...f,
+                state: StateEnum.Error,
+                error: errorMessage,
+              };
+            return f;
+          }),
+        };
+      }
+
+      onProgress(progress);
+    };
+
+    // Upload files in parallel
+    await Promise.all(files.map((file, index) => uploadFile(file, index)));
+  };
+
+  return { uploadFiles };
+};
+
+export default useUploadFiles;