Skip to content
Snippets Groups Projects
Commit fd7388b3 authored by Savok's avatar Savok
Browse files

Added the upload

parent 987e4941
Branches
Tags
No related merge requests found
......@@ -8,7 +8,7 @@ const Header = () => {
if (!user) return null;
return <div className={'bg-primary w-100 h-25 py-1 px-3 d-flex align-items-center'}>
return <div className={'bg-primary w-100 py-1 px-3 d-flex align-items-center header'}>
<div className={'text-logo fs-3 text-white'}>WiDri</div>
<div className={'ms-auto d-flex align-items-center gap-2'}>
<FontAwesomeIcon icon={faCircleUser} size={'2x'} className={'text-white'} />
......
......@@ -23,7 +23,7 @@ const FileEntryList = ({files, onDirectoryClick}: FileEntryListProps) => {
.thenBy(e => e.name)
.toArray()
return <Table className={'text-white'}>
return <Table className={'text-white mb-0 w-100 file-entry-table'}>
<thead>
<tr className={'text-muted'}>
<th><Form.Check className={'bg-dark'}/></th>
......
@import "src/styles/file-entry-list";
@import "src/styles/header";
@import "src/styles/content";
@import "src/styles/hierarchy";
$theme-colors: (
'primary': #ba68c8,
......
import {Modal, Spinner} from "react-bootstrap";
type UploadingFileModalProps = {
file: File
}
const UploadingFileModal = ({file}: UploadingFileModalProps) => {
return <Modal show={true} centered contentClassName={'bg-dark text-white'} size={'sm'}>
<Modal.Header><Modal.Title>Uploading...</Modal.Title></Modal.Header>
<Modal.Body className={'d-flex align-items-center gap-3'}>
<Spinner animation={'border'} />
<span className={'ms-2'}>Uploading "{file.name}"...</span>
</Modal.Body>
</Modal>
}
export {UploadingFileModal}
import {Header} from "../components/Header";
import {useEffect, useState} from "react";
import {DragEventHandler, useEffect, useState} from "react";
import {FileEntry, FileService, Listing} from "../api";
import {Dropdown, Spinner} from "react-bootstrap";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
faArrowUpFromBracket,
faChevronRight,
faCircleExclamation,
faCirclePlus,
......@@ -14,6 +15,7 @@ import {
import {FileEntryList} from "../components/main/FileEntryList";
import {CreateFolderModal} from "../modals/main/CreateFolderModal";
import {useNavigate, useSearchParams} from "react-router-dom";
import {UploadingFileModal} from "../modals/main/UploadingFileModal";
const MainPage = () => {
const [searchParams] = useSearchParams();
......@@ -25,6 +27,9 @@ const MainPage = () => {
const [showCreateFolderModal, setShowCreateFolderModal] = useState(false);
const [dragging, setDragging] = useState(false);
const [uploadingFile, setUploadingFile] = useState<File | undefined>(undefined);
const navigate = useNavigate();
useEffect(() => {
......@@ -47,11 +52,43 @@ const MainPage = () => {
setListing(prev => !prev ? prev : ({...prev, children: [...(prev.children ?? []), dir]}))
}
const onDragOver: DragEventHandler<HTMLDivElement> = e => {
e.preventDefault();
setDragging(true);
}
const onDragLeave: DragEventHandler<HTMLDivElement> = e => {
e.preventDefault();
setDragging(false);
}
const onDrop: DragEventHandler<HTMLDivElement> = async (evt) => {
evt.preventDefault();
setDragging(false);
for (let i = 0; i < evt.dataTransfer.files.length; i++) {
const file = evt.dataTransfer.files[i];
setUploadingFile(file);
try {
const fileEntry = await FileService.uploadFile(currentDirId, {file: file});
setListing(prev => !prev ? prev : {...prev, children: !prev.children ? prev.children : [...prev.children, fileEntry]})
} catch {}
}
setUploadingFile(undefined);
}
return <>
<div className={'d-flex flex-column w-100 min-vh-100'}>
<div className={'d-flex flex-column w-100 vh-100'}>
<Header />
<div className={'d-flex flex-grow-1 flex-column text-white'}>
{!listing && <div className={'w-100 flex-grow-1 d-inline-flex align-items-center justify-content-center'}>
<div className={'position-relative d-flex flex-grow-1 flex-column text-white content'}
onDragOver={onDragOver} onDrop={onDrop} onDragLeave={onDragLeave}>
{dragging && <div className={'position-absolute top-0 left-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center gap-3'} style={{backgroundColor: '#FFF8'}}>
<FontAwesomeIcon icon={faArrowUpFromBracket} size={'6x'} className={'text-dark'} />
<div className={'fs-3 fw-bold text-dark'}>Drop the file here!</div>
</div>}
{!listing && <div className={'w-100 d-inline-flex align-items-center justify-content-center'}>
{listing === undefined && <Spinner className={'text-white'} animation={'border'} />}
{listing === null && <div className={'text-white d-flex flex-column gap-2'}>
<FontAwesomeIcon icon={faCircleExclamation} size={'4x'} />
......@@ -60,7 +97,7 @@ const MainPage = () => {
</div>}
</div>}
{listing && <>
<div className={'p-3 d-flex gap-3'}>
<div className={'p-3 d-flex gap-3 hierarchy'}>
<FontAwesomeIcon icon={faHouse} size={'lg'} />
<FontAwesomeIcon className={'text-muted'} icon={faChevronRight} size={'lg'} />
......@@ -88,6 +125,7 @@ const MainPage = () => {
<CreateFolderModal show={showCreateFolderModal} onHide={() => setShowCreateFolderModal(false)}
parentId={currentDirId} onNewDirectory={onNewDirectory} />
{uploadingFile && <UploadingFileModal file={uploadingFile} />}
</>
}
......
.content {
height: calc(100% - 48px);
}
.file-entry-table {
height: calc(100% - 56px);
min-height: 0;
overflow-y: scroll;
display: block;
}
.column-name {
width: 9999px;
padding-left: 67px!important;
padding-left: 55px!important;
}
.column-last-change {
......@@ -10,7 +17,8 @@
.file-entry-icon {
display: flex;
justify-content: center;
min-width: 60px;
min-width: 32px;
margin-right: 16px;
}
.file-entry-row {
......
.header {
height: 48px;
}
.hierarchy {
height: 56px;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment