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: add upload resource button

Browse Source
This commit is contained in:
boojack
2022-08-07 01:56:10 +08:00
parent fd44255668
commit c991a48df6
3 changed files with 89 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,10 +11,18 @@ import "../less/resources-dialog.less";
interface Props extends DialogProps {}
interface State {
resources: Resource[];
isUploadingResource: boolean;
}
const ResourcesDialog: React.FC<Props> = (props: Props) => {
const { destroy } = props;
const loadingState = useLoading();
const [resources, setResources] = useState<Resource[]>([]);
const [state, setState] = useState<State>({
resources: [],
isUploadingResource: false,
});
useEffect(() => {
fetchResources()
@ -28,7 +36,45 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
const fetchResources = async () => {
const data = await resourceService.getResourceList();
setResources(data);
setState({
...state,
resources: data,
});
};
const handleUploadFileBtnClick = async () => {
if (state.isUploadingResource) {
return;
}
const inputEl = document.createElement("input");
inputEl.type = "file";
inputEl.multiple = false;
inputEl.accept = "image/png, image/gif, image/jpeg";
inputEl.onchange = async () => {
if (!inputEl.files || inputEl.files.length === 0) {
return;
}
setState({
...state,
isUploadingResource: true,
});
const file = inputEl.files[0];
try {
await resourceService.upload(file);
} catch (error: any) {
toastHelper.error("Failed to upload resource\n" + JSON.stringify(error, null, 4));
} finally {
setState({
...state,
isUploadingResource: false,
});
await fetchResources();
}
};
inputEl.click();
};
const handleCopyResourceLinkBtnClick = (resource: Resource) => {
@ -61,7 +107,12 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
</div>
<div className="dialog-content-container">
<div className="tip-text-container">(👨‍💻WIP) View your static resources in memos. e.g. images</div>
<div className="actions-container"></div>
<div className="upload-resource-container" onClick={() => handleUploadFileBtnClick()}>
<div className="upload-resource-btn">
<Icon.File className="icon-img" />
<span>Upload</span>
</div>
</div>
{loadingState.isLoading ? (
<div className="loading-text-container">
<p className="tip-text">fetching data...</p>
@ -74,21 +125,25 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
<span className="field-text">TYPE</span>
<span></span>
</div>
{resources.map((resource) => (
<div key={resource.id} className="resource-container">
<span className="field-text">{resource.id}</span>
<span className="field-text name-text">{resource.filename}</span>
<span className="field-text">{resource.type}</span>
<div className="buttons-container">
<Dropdown className="actions-dropdown">
<button onClick={() => handleCopyResourceLinkBtnClick(resource)}>Copy Link</button>
<button className="delete-btn" onClick={() => handleDeleteResourceBtnClick(resource)}>
Delete
</button>
</Dropdown>
{state.resources.length === 0 ? (
<p className="tip-text">No resource.</p>
) : (
state.resources.map((resource) => (
<div key={resource.id} className="resource-container">
<span className="field-text">{resource.id}</span>
<span className="field-text name-text">{resource.filename}</span>
<span className="field-text">{resource.type}</span>
<div className="buttons-container">
<Dropdown className="actions-dropdown">
<button onClick={() => handleCopyResourceLinkBtnClick(resource)}>Copy Link</button>
<button className="delete-btn" onClick={() => handleDeleteResourceBtnClick(resource)}>
Delete
</button>
</Dropdown>
</div>
</div>
</div>
))}
))
)}
</div>
)}
</div>