YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: support uploads multi files (#191)

Browse Source
This commit is contained in:
boojack
2022-09-02 20:05:40 +08:00
committed by GitHub
parent 3e13fa1ce6
commit 422e190c96
3 changed files with 41 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/MemoEditor.tsx
View File

@ -209,21 +209,27 @@ const MemoEditor: React.FC<Props> = () => {
const handleUploadFileBtnClick = useCallback(() => {
const inputEl = document.createElement("input");
inputEl.style.position = "fixed";
inputEl.style.top = "-100vh";
inputEl.style.left = "-100vw";
document.body.appendChild(inputEl);
inputEl.type = "file";
inputEl.multiple = false;
inputEl.accept = "image/png, image/gif, image/jpeg";
inputEl.multiple = true;
inputEl.accept = "image/*";
inputEl.onchange = async () => {
if (!inputEl.files || inputEl.files.length === 0) {
return;
}
const file = inputEl.files[0];
for (const file of inputEl.files) {
const url = await handleUploadFile(file);
if (url) {
editorRef.current?.insertText(`![](${url})`);
}
}
};
inputEl.click();
document.body.removeChild(inputEl);
}, []);
const handleFullscreenBtnClick = () => {

22
web/src/components/ResourcesDialog.tsx
View File

@ -6,6 +6,7 @@ import { resourceService } from "../services";
import Dropdown from "./common/Dropdown";
import { generateDialog } from "./Dialog";
import { showCommonDialog } from "./Dialog/CommonDialog";
import showPreviewImageDialog from "./PreviewImageDialog";
import Icon from "./Icon";
import toastHelper from "./Toast";
import "../less/resources-dialog.less";
@ -51,9 +52,13 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
}
const inputEl = document.createElement("input");
inputEl.style.position = "fixed";
inputEl.style.top = "-100vh";
inputEl.style.left = "-100vw";
document.body.appendChild(inputEl);
inputEl.type = "file";
inputEl.multiple = false;
inputEl.accept = "image/png, image/gif, image/jpeg";
inputEl.multiple = true;
inputEl.accept = "image/*";
inputEl.onchange = async () => {
if (!inputEl.files || inputEl.files.length === 0) {
return;
@ -64,7 +69,8 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
isUploadingResource: true,
});
const file = inputEl.files[0];
for (const file of inputEl.files) {
await resourceService.upload(file);
try {
await resourceService.upload(file);
} catch (error: any) {
@ -75,10 +81,17 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
...state,
isUploadingResource: false,
});
await fetchResources();
}
}
await fetchResources();
};
inputEl.click();
document.body.removeChild(inputEl);
};
const handlPreviewBtnClick = (resource: Resource) => {
showPreviewImageDialog(`${window.location.origin}/h/r/${resource.id}/${resource.filename}`);
};
const handleCopyResourceLinkBtnClick = (resource: Resource) => {
@ -139,6 +152,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
<span className="field-text">{resource.type}</span>
<div className="buttons-container">
<Dropdown className="actions-dropdown">
<button onClick={() => handlPreviewBtnClick(resource)}>Preview</button>
<button onClick={() => handleCopyResourceLinkBtnClick(resource)}>Copy Link</button>
<button className="delete-btn" onClick={() => handleDeleteResourceBtnClick(resource)}>
Delete

4
web/src/less/resources-dialog.less
View File

@ -14,10 +14,10 @@
}
> .upload-resource-container {
@apply mt-2 mb-4 w-full rounded flex flex-row justify-start items-center;
@apply mt-2 mb-4 py-8 cursor-pointer w-full rounded flex flex-row justify-center items-center bg-blue-50 border border-blue-600 hover:opacity-80;
> .upload-resource-btn {
@apply px-3 py-1 rounded cursor-pointer flex flex-row justify-center items-center border border-dashed border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80;
@apply px-3 py-1 rounded flex flex-row justify-center items-center border border-dashed border-blue-600 text-blue-600 bg-blue-50;
> .icon-img {
@apply w-4 h-auto mr-1;