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

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

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

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

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

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

@ -14,10 +14,10 @@
} }
> .upload-resource-container { > .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 { > .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 { > .icon-img {
@apply w-4 h-auto mr-1; @apply w-4 h-auto mr-1;