Skip to content

Commit

Permalink
Fix issues; change project structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@corovcam
corovcam committed Nov 15, 2023
1 parent 7e7240d commit 9f0c8cd
Show file tree
Hide file tree
Showing 11 changed files with 133 additions and 64 deletions.
13 changes: 12 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
/* ... */
Expand Down Expand Up @@ -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 = () => {
/* ... */
Expand All @@ -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 */
}}
Expand Down
4 changes: 2 additions & 2 deletions data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Vite + React</title>
</head>
<body>
<div id="root" data-detail-config='{"record":{"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","transitions":{}},"files":{"default_preview":null,"enabled":true,"entries":[{"key":"figure.png","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"image/png","size":89364,"status":"completed","metadata":{"caption":"Figure 1","featureImage":true},"file_id":"2151fa94-6dc3-4965-8df9-ec73ceb91T5c","version_id":"57ad8c66-b934-49c9-a46f-38bf5aa0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d018b9363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/figure.png/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/figure.png","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/figure.png/commit"}},{"key":"article.pdf","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"application/pdf","size":89364546,"status":"completed","metadata":null,"file_id":"2151fa94-6dc3-4935-8df9-efafgeb9175c","version_id":"57ad8c66-b934-49c9-a46f-38bfsda0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d0f439363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/article.pdf/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/article.pdf","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/article.pdf/commit"}},{"key":"article2.pdf","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"application/pdf","size":89364546,"status":"completed","metadata":null,"file_id":"2151fa94-6dc3-4235-8df9-ecafgeb9175c","version_id":"57ad8c66-b934-49c9-a46f-38bfsda0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d0f439363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/article2.pdf/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/article2.pdf","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/article2.pdf/commit"}},{"key":"article3.pdf","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"application/pdf","size":89364546,"status":"completed","metadata":null,"file_id":"2151fa94-6dc3-4935-8df9-ecafgeb8175c","version_id":"57ad8c66-b934-49c9-a46f-38bfsda0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d0f439363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/article3.pdf/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/article3.pdf","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/article3.pdf/commit"}}],"links":{"self":"http://localhost:5173/api/records/8t29q-nfr77/files"},"order":[]},"metadata":{"$schema":"https://data.narodni-repozitar.cz/schemas/nr_datasets/nr-datasets-v1.0.0.json","InvenioID":"d2a2g-vqz71","_bucket":"968ab438-7c5f-4efd-b949-7621ca230422","_files":[{"bucket":"968ab438-7c5f-4efd-b949-7621ca230422","checksum":"etag:f1f792c5321620c7902c1abd81a5eb5d-594","fileNote":"Original image data used for analyses presented in Figure 2 of the connected article.","file_id":"00e73729-634b-40dc-b9d2-750be9cc50f6","key":"article1.pdf","mime_type":"application/pdf","name":"Fig.2.zip","size":3110886758,"type":"application/x-zip-compressed","url":"https://data.narodni-repozitar.cz/general/datasets/d2a2g-vqz71/files/Fig.2.zip","version_id":"cf69a980-ab1a-43b2-bb3a-e0705bde9a65"},{"bucket":"968ab438-7c5f-4efd-b949-7621ca230422","checksum":"etag:ca7339f29f3a60154cad5f95ef41452a-3402","fileNote":"Original image data used for analyses presented in Figure 3 and Supplementary Figure 3 of the connected article.","file_id":"517f396b-2fe6-4808-ac11-dee8984e76cc","key":"article2.pdf","mime_type":"application/pdf","name":"Fig.3 and S3.zip","size":17832756479,"type":"article2.pdf","url":"https://data.narodni-repozitar.cz/general/datasets/d2a2g-vqz71/files/article2.pdf","version_id":"51d27ff8-8ec7-4be1-8f12-243149a7b6b8"}],"titles":[{"title":{"en":"Raw image data for article \"Role of casein kinase 1 (CK1) in the amoeboid migration of B cell leukemic and lymphoma cells\""},"titleType":"mainTitle"}]},"revision":198,"updated":"2023-08-07T08:55:11.751572+00:00"}}'></div>
<div id="root" data-detail-config='{"record":{"created":"2022-10-18T10:22:35.153753+00:00","id":"8t29q-nfr77","links":{"files":"http://localhost:5173/api/records/8t29q-nfr77/files","self":"http://localhost:5173/api/records/8t29q-nfr77","transitions":{}},"files":{"default_preview":null,"enabled":true,"entries":[{"key":"figure.png","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"image/png","size":89364,"status":"completed","metadata":{"caption":"Figure 1","featureImage":true},"file_id":"2151fa94-6dc3-4965-8df9-ec73ceb91T5c","version_id":"57ad8c66-b934-49c9-a46f-38bf5aa0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d018b9363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/figure.png/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/figure.png","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/figure.png/commit"}},{"key":"article.pdf","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"application/pdf","size":89364546,"status":"completed","metadata":null,"file_id":"2151fa94-6dc3-4935-8df9-efafgeb9175c","version_id":"57ad8c66-b934-49c9-a46f-38bfsda0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d0f439363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/article.pdf/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/article.pdf","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/article.pdf/commit"}},{"key":"article2.pdf","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"application/pdf","size":89364546,"status":"completed","metadata":null,"file_id":"2151fa94-6dc3-4235-8df9-ecafgeb9175c","version_id":"57ad8c66-b934-49c9-a46f-38bfsda0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d0f439363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/article2.pdf/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/article2.pdf","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/article2.pdf/commit"}},{"key":"article3.pdf","updated":"2020-11-27 11:26:04.607831","created":"2020-11-27 11:17:10.998919","checksum":"md5:6ef4267f0e710357c895627e931f16cd","mimetype":"application/pdf","size":89364546,"status":"completed","metadata":null,"file_id":"2151fa94-6dc3-4935-8df9-ecafgeb8175c","version_id":"57ad8c66-b934-49c9-a46f-38bfsda0374f","bucket_id":"90b5b318-114a-4b87-bc9d-0d0f439363d3","storage_class":"S","links":{"content":"http://localhost:5173/api/records/8t29q-nfr77/files/article3.pdf/content","self":"http://localhost:5173/api/records/8t29q-nfr77/files/article3.pdf","commit":"http://localhost:5173/api/records/8t29q-nfr77/files/article3.pdf/commit"}}],"links":{"self":"http://localhost:5173/api/records/8t29q-nfr77/files"},"order":[]},"metadata":{"$schema":"https://data.narodni-repozitar.cz/schemas/nr_datasets/nr-datasets-v1.0.0.json","InvenioID":"d2a2g-vqz71","_bucket":"968ab438-7c5f-4efd-b949-7621ca230422","_files":[{"bucket":"968ab438-7c5f-4efd-b949-7621ca230422","checksum":"etag:f1f792c5321620c7902c1abd81a5eb5d-594","fileNote":"Original image data used for analyses presented in Figure 2 of the connected article.","file_id":"00e73729-634b-40dc-b9d2-750be9cc50f6","key":"article1.pdf","mime_type":"application/pdf","name":"Fig.2.zip","size":3110886758,"type":"application/x-zip-compressed","url":"https://data.narodni-repozitar.cz/general/datasets/d2a2g-vqz71/files/Fig.2.zip","version_id":"cf69a980-ab1a-43b2-bb3a-e0705bde9a65"},{"bucket":"968ab438-7c5f-4efd-b949-7621ca230422","checksum":"etag:ca7339f29f3a60154cad5f95ef41452a-3402","fileNote":"Original image data used for analyses presented in Figure 3 and Supplementary Figure 3 of the connected article.","file_id":"517f396b-2fe6-4808-ac11-dee8984e76cc","key":"article2.pdf","mime_type":"application/pdf","name":"Fig.3 and S3.zip","size":17832756479,"type":"article2.pdf","url":"https://data.narodni-repozitar.cz/general/datasets/d2a2g-vqz71/files/article2.pdf","version_id":"51d27ff8-8ec7-4be1-8f12-243149a7b6b8"}],"titles":[{"title":{"en":"Raw image data for article \"Role of casein kinase 1 (CK1) in the amoeboid migration of B cell leukemic and lymphoma cells\""},"titleType":"mainTitle"}]},"revision":198,"updated":"2023-08-07T08:55:11.751572+00:00"}}'></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
160 changes: 103 additions & 57 deletions src/components/file-management-dialog/UppyDashboardDialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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,
},
Expand All @@ -110,32 +108,32 @@ 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;
},
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,
});
}, [
Expand All @@ -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:
[
{
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/components/file-management-dialog/__fixtures__/data-storybook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
3 changes: 3 additions & 0 deletions src/hooks/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { default as useAppContext } from "./useAppContext";
export { default as useWorker } from "./useWorker";
export { default as useUppyContext } from "./useUppyContext";
0 src/utils/useAppContext.js → src/hooks/useAppContext.js
View file
File renamed without changes.
0 src/utils/useUppyContext.js → src/hooks/useUppyContext.js
View file
File renamed without changes.
0 src/utils/useWorker.js → src/hooks/useWorker.js
View file
File renamed without changes.
10 changes: 9 additions & 1 deletion todo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
```
```

# 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.
1 change: 1 addition & 0 deletions vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down

0 comments on commit 9f0c8cd

Please sign in to comment.