diff --git a/README.md b/README.md index bbb3a72..435abda 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ It uses [Uppy](https://uppy.io/) package to render uploader Dashboard, import fi ### Basic usage with Preact ```jsx -import FileManagementDialog from '@oarepo/file-manager' +import FileManagementDialog from '@oarepo/file-manager'; const MyComponent = () => { /* ... */ @@ -105,6 +105,7 @@ Used in React projects with Automatic JSX Runtime enabled (see [React docs](http ```jsx import ReactWrapper from "./ReactWrapper"; +import { h, render } from "preact"; const MyReactComponent = () => { /* ... */ @@ -114,6 +115,16 @@ const MyReactComponent = () => { preactComponent={FileManagementDialog} props={{ config: data, + TriggerComponent: ({ onClick, ...props }) => + h( + "button", + { + onClick: onClick, + style: { backgroundColor: "cyan" }, + ...props + }, + "Upload Files" + ), autoExtractImagesFromPDFs: false, /* additional FileManagementDialog options, see Props below */ }} diff --git a/data.json b/data.json index f1a45b6..1efb73a 100644 --- a/data.json +++ b/data.json @@ -3,8 +3,8 @@ "created": "2022-10-18T10:22:35.153753+00:00", "id": "8t29q-nfr77", "links": { - "files": "http://localhost:5173/general/datasets/8t29q-nfr77/files/", - "self": "http://localhost:5173/general/datasets/8t29q-nfr77", + "files": "http://localhost:5173/api/records/8t29q-nfr77/files", + "self": "http://localhost:5173/api/records/8t29q-nfr77", "transitions": {} }, "files": { diff --git a/index.html b/index.html index 3e7e3ed..eea20c8 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ Vite + React -
+
diff --git a/src/components/file-management-dialog/UppyDashboardDialog.jsx b/src/components/file-management-dialog/UppyDashboardDialog.jsx index 9525261..2ed7d9a 100644 --- a/src/components/file-management-dialog/UppyDashboardDialog.jsx +++ b/src/components/file-management-dialog/UppyDashboardDialog.jsx @@ -3,9 +3,7 @@ import "@uppy/dashboard/dist/style.min.css"; import "@uppy/image-editor/dist/style.min.css"; import { useEffect, useRef, useCallback } from "preact/hooks"; -import useWorker from "../../utils/useWorker"; -import useUppyContext from "../../utils/useUppyContext"; -import useAppContext from "../../utils/useAppContext"; +import { useUppyContext, useAppContext, useWorker } from "../../hooks"; import czechLocale from "../../utils/czechLocale"; import { debugLogger } from "@uppy/core"; @@ -93,13 +91,13 @@ const UppyDashboardDialog = ({ logger: debug ? debugLogger : { - debug: (...args) => {}, - warn: (...args) => {}, - error: (...args) => { - console.error(...args); - }, + debug: (...args) => { }, + warn: (...args) => { }, + error: (...args) => { + console.error(...args); }, - locale: locale?.startsWith("cs") ? cs_CZ : en_US, + }, + locale: locale?.startsWith("cs") ? cs_CZ : en_US, restrictions: { allowedFileTypes: allowedFileTypes, }, @@ -110,13 +108,13 @@ const UppyDashboardDialog = ({ const file = files[fileID]; updatedFiles[fileID] = file.type.startsWith("image/") ? { - ...file, - meta: { - ...file.meta, - caption: file.meta?.caption ?? "", - featureImage: file.meta?.featureImage ?? false, - }, - } + ...file, + meta: { + ...file.meta, + caption: file.meta?.caption ?? "", + featureImage: file.meta?.featureImage ?? false, + }, + } : file; }); return updatedFiles; @@ -124,18 +122,18 @@ const UppyDashboardDialog = ({ onBeforeFileAdded: !modifyExistingFiles && autoExtractImagesFromPDFs ? // eslint-disable-next-line no-unused-vars - (currentFile, _files) => { - if (currentFile.type === "application/pdf") { - uppy.info( - "PDF image extraction processing, please wait...", - "info", - 3000 - ); - handleUploadClick(currentFile); - return false; - } - return true; + (currentFile, _files) => { + if (currentFile.type === "application/pdf") { + uppy.info( + "PDF image extraction processing, please wait...", + "info", + 3000 + ); + handleUploadClick(currentFile); + return false; } + return true; + } : () => true, }); }, [ @@ -148,13 +146,6 @@ const UppyDashboardDialog = ({ ]); useEffect(() => { - const additionalLocale = locale?.startsWith("cs") ? czechLocale : {}; - - uppy.getPlugin("OARepoUpload")?.setOptions({ - endpoint: record.files.enabled ? record.files.links.self : record.links.files, - allowedMetaFields: ["caption", "featureImage"], - locale: additionalLocale, - }); /* fileSources: [ { @@ -175,29 +166,85 @@ const UppyDashboardDialog = ({ ... ] */ - const fileSources = record?.files?.enabled ? record?.files?.entries.map((file) => ({ - id: file?.file_id, - name: file?.key, - mimeType: file?.mimetype, - isFolder: false, - icon: "file", - thumbnail: null, - requestPath: file?.links?.content, - modifiedDate: file?.updated, - author: null, - size: file?.size, - metadata: file?.metadata, - })) : []; - uppy.getPlugin("OARepoFileSource")?.setOptions({ - fileSources: fileSources, - fileTypeFilter: !modifyExistingFiles ? ["application/pdf"] : null, - locale: additionalLocale, - }); + const setUpOARepoFileSourcePlugin = (fileSources) => { + uppy.getPlugin("OARepoFileSource")?.setOptions({ + fileSources: fileSources, + fileTypeFilter: !modifyExistingFiles ? ["application/pdf"] : null, + locale: locale?.startsWith("cs") ? czechLocale : {}, + }); + }; + + let fileSources = []; + if (record.files?.enabled) { + if (!record.files.entries) { + fetch(record.links.files) + .then((response) => { + if (!response.ok) + throw new Error(response.statusText); + return response.json(); + }) + .then((data) => { + fileSources = data?.entries.map((file) => ({ + id: file?.file_id, + name: file?.key, + mimeType: file?.mimetype, + isFolder: false, + icon: "file", + thumbnail: null, + requestPath: file?.links?.content, + modifiedDate: file?.updated, + author: null, + size: file?.size, + metadata: file?.metadata, + })) + }) + .catch((error) => { + uppy.info({ + message: "Error loading files.", + details: error.message, + }, "error", 7000); + }) + .finally(() => { + setUpOARepoFileSourcePlugin(fileSources); + }); + } else { + fileSources = record.files.entries.map((file) => ({ + id: file?.file_id, + name: file?.key, + mimeType: file?.mimetype, + isFolder: false, + icon: "file", + thumbnail: null, + requestPath: file?.links?.content, + modifiedDate: file?.updated, + author: null, + size: file?.size, + metadata: file?.metadata, + })); + setUpOARepoFileSourcePlugin(fileSources); + } + } else { + setUpOARepoFileSourcePlugin(fileSources); + } }, [ uppy, - record.files?.entries, - record.files?.links?.self, + record.files, + record.links?.files, modifyExistingFiles, + locale, + ]); + + useEffect(() => { + uppy.getPlugin("OARepoUpload")?.setOptions({ + endpoint: record.files?.enabled ? record.links.files : record.files.links.self, + allowedMetaFields: ["caption", "featureImage"], + locale: locale?.startsWith("cs") ? czechLocale : {}, + }); + }, [ + uppy, + record.files, + record.links?.files, + locale, ]); useEffect(() => { @@ -226,9 +273,8 @@ const UppyDashboardDialog = ({ type: `image/${imageObj.imageType}`, }); uppy.addFile({ - name: `${imageObj.sourcePdf}_${crypto.randomUUID()}.${ - event.data.imageType - }`, + name: `${imageObj.sourcePdf}_${crypto.randomUUID()}.${event.data.imageType + }`, type: `image/${imageObj.imageType}`, data: blob, source: "PDFImageExtractor", // pdfimageextractor diff --git a/src/components/file-management-dialog/__fixtures__/data-storybook.js b/src/components/file-management-dialog/__fixtures__/data-storybook.js index ebe7253..a1866e1 100644 --- a/src/components/file-management-dialog/__fixtures__/data-storybook.js +++ b/src/components/file-management-dialog/__fixtures__/data-storybook.js @@ -5,8 +5,8 @@ export default { "created": "2022-10-18T10:22:35.153753+00:00", "id": "8t29q-nfr77", "links": { - "files": `${baseUrl}/general/datasets/8t29q-nfr77/files/`, - "self": `${baseUrl}/general/datasets/8t29q-nfr77`, + "files": `${baseUrl}/api/records/8t29q-nfr77/files`, + "self": `${baseUrl}/api/records/8t29q-nfr77`, "transitions": {} }, "files": { diff --git a/src/hooks/index.js b/src/hooks/index.js new file mode 100644 index 0000000..5bd65d4 --- /dev/null +++ b/src/hooks/index.js @@ -0,0 +1,3 @@ +export { default as useAppContext } from "./useAppContext"; +export { default as useWorker } from "./useWorker"; +export { default as useUppyContext } from "./useUppyContext"; diff --git a/src/utils/useAppContext.js b/src/hooks/useAppContext.js similarity index 100% rename from src/utils/useAppContext.js rename to src/hooks/useAppContext.js diff --git a/src/utils/useUppyContext.js b/src/hooks/useUppyContext.js similarity index 100% rename from src/utils/useUppyContext.js rename to src/hooks/useUppyContext.js diff --git a/src/utils/useWorker.js b/src/hooks/useWorker.js similarity index 100% rename from src/utils/useWorker.js rename to src/hooks/useWorker.js diff --git a/todo.md b/todo.md index f5fec45..10d7ab7 100644 --- a/todo.md +++ b/todo.md @@ -87,4 +87,12 @@ Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0 "commit": "/api/records/8t29q-nfr77/draft/files/test_pattern.png/commit" } } -``` \ No newline at end of file +``` + +# 15.11.2023 + +BUGS: +1. when PDF is invalid, Uppy Error occurs after another PDF upload and another PDF cannot be uploaded +2. use api record.links.files instead of record.files +3. onClick on TriggerComponent +4. \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 226b818..8c2935b 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,7 @@ import { defineConfig } from "vite"; import preact from "@preact/preset-vite"; import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' import { name } from "./package.json"; +// import { viteMockServe } from "vite-plugin-mock"; // https://vitejs.dev/config/ export default defineConfig(({ command, mode }) => {