Public File Sharing (#72)
* Public File Sharing This implements public file sharing (read-only) with and without passwords (#57). It also fixes a problem with filenames including special characters like `#` not working properly (#71). You can share a directory or a single file, by using the new share icon on the right of the directories/files, and click on it to manage an existing file share (setting a new password, or deleting the file share). There is some other minor cleanup and other copy updates in the README. Closes #57 Fixes #71 * Hide UI elements when sharing isn't allowed
This commit is contained in:
Bruno Bernardino
@@ -21,21 +21,39 @@ import {
|
||||
RequestBody as DeleteDirectoryRequestBody,
|
||||
ResponseBody as DeleteDirectoryResponseBody,
|
||||
} from '/routes/api/files/delete-directory.tsx';
|
||||
import {
|
||||
RequestBody as CreateShareRequestBody,
|
||||
ResponseBody as CreateShareResponseBody,
|
||||
} from '/routes/api/files/create-share.tsx';
|
||||
import {
|
||||
RequestBody as UpdateShareRequestBody,
|
||||
ResponseBody as UpdateShareResponseBody,
|
||||
} from '/routes/api/files/update-share.tsx';
|
||||
import {
|
||||
RequestBody as DeleteShareRequestBody,
|
||||
ResponseBody as DeleteShareResponseBody,
|
||||
} from '/routes/api/files/delete-share.tsx';
|
||||
import SearchFiles from './SearchFiles.tsx';
|
||||
import ListFiles from './ListFiles.tsx';
|
||||
import FilesBreadcrumb from './FilesBreadcrumb.tsx';
|
||||
import CreateDirectoryModal from './CreateDirectoryModal.tsx';
|
||||
import RenameDirectoryOrFileModal from './RenameDirectoryOrFileModal.tsx';
|
||||
import MoveDirectoryOrFileModal from './MoveDirectoryOrFileModal.tsx';
|
||||
import CreateShareModal from './CreateShareModal.tsx';
|
||||
import ManageShareModal from './ManageShareModal.tsx';
|
||||
|
||||
interface MainFilesProps {
|
||||
initialDirectories: Directory[];
|
||||
initialFiles: DirectoryFile[];
|
||||
initialPath: string;
|
||||
baseUrl: string;
|
||||
isFileSharingAllowed: boolean;
|
||||
fileShareId?: string;
|
||||
}
|
||||
|
||||
export default function MainFiles({ initialDirectories, initialFiles, initialPath, baseUrl }: MainFilesProps) {
|
||||
export default function MainFiles(
|
||||
{ initialDirectories, initialFiles, initialPath, baseUrl, isFileSharingAllowed, fileShareId }: MainFilesProps,
|
||||
) {
|
||||
const isAdding = useSignal<boolean>(false);
|
||||
const isUploading = useSignal<boolean>(false);
|
||||
const isDeleting = useSignal<boolean>(false);
|
||||
@@ -56,6 +74,8 @@ export default function MainFiles({ initialDirectories, initialFiles, initialPat
|
||||
const moveDirectoryOrFileModal = useSignal<
|
||||
{ isOpen: boolean; isDirectory: boolean; path: string; name: string } | null
|
||||
>(null);
|
||||
const createShareModal = useSignal<{ isOpen: boolean; filePath: string; password?: string } | null>(null);
|
||||
const manageShareModal = useSignal<{ isOpen: boolean; fileShareId: string } | null>(null);
|
||||
|
||||
function onClickUploadFile(uploadDirectory = false) {
|
||||
const fileInput = document.createElement('input');
|
||||
@@ -483,12 +503,150 @@ export default function MainFiles({ initialDirectories, initialFiles, initialPat
|
||||
}
|
||||
}
|
||||
|
||||
function onClickCreateShare(filePath: string) {
|
||||
if (createShareModal.value?.isOpen) {
|
||||
createShareModal.value = null;
|
||||
return;
|
||||
}
|
||||
|
||||
createShareModal.value = {
|
||||
isOpen: true,
|
||||
filePath,
|
||||
};
|
||||
}
|
||||
|
||||
async function onClickSaveFileShare(filePath: string, password?: string) {
|
||||
if (isAdding.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!filePath) {
|
||||
return;
|
||||
}
|
||||
|
||||
isAdding.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: CreateShareRequestBody = {
|
||||
pathInView: path.value,
|
||||
filePath,
|
||||
password,
|
||||
};
|
||||
const response = await fetch(`/api/files/create-share`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as CreateShareResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to create share!');
|
||||
}
|
||||
|
||||
directories.value = [...result.newDirectories];
|
||||
files.value = [...result.newFiles];
|
||||
|
||||
createShareModal.value = null;
|
||||
|
||||
onClickOpenManageShare(result.createdFileShareId);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isAdding.value = false;
|
||||
}
|
||||
|
||||
function onClickCloseFileShare() {
|
||||
createShareModal.value = null;
|
||||
}
|
||||
|
||||
function onClickOpenManageShare(fileShareId: string) {
|
||||
manageShareModal.value = {
|
||||
isOpen: true,
|
||||
fileShareId,
|
||||
};
|
||||
}
|
||||
|
||||
async function onClickUpdateFileShare(fileShareId: string, password?: string) {
|
||||
if (isUpdating.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!fileShareId) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUpdating.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: UpdateShareRequestBody = {
|
||||
pathInView: path.value,
|
||||
fileShareId,
|
||||
password,
|
||||
};
|
||||
const response = await fetch(`/api/files/update-share`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as UpdateShareResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to update share!');
|
||||
}
|
||||
|
||||
directories.value = [...result.newDirectories];
|
||||
files.value = [...result.newFiles];
|
||||
|
||||
manageShareModal.value = null;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isUpdating.value = false;
|
||||
}
|
||||
|
||||
function onClickCloseManageShare() {
|
||||
manageShareModal.value = null;
|
||||
}
|
||||
|
||||
async function onClickDeleteFileShare(fileShareId: string) {
|
||||
if (!fileShareId || isDeleting.value || !confirm('Are you sure you want to delete this public share link?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDeleting.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: DeleteShareRequestBody = {
|
||||
pathInView: path.value,
|
||||
fileShareId,
|
||||
};
|
||||
const response = await fetch(`/api/files/delete-share`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as DeleteShareResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to delete file share!');
|
||||
}
|
||||
|
||||
directories.value = [...result.newDirectories];
|
||||
files.value = [...result.newFiles];
|
||||
|
||||
manageShareModal.value = null;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isDeleting.value = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section class='flex flex-row items-center justify-between mb-4'>
|
||||
<section class='relative inline-block text-left mr-2'>
|
||||
<section class='flex flex-row items-center justify-start'>
|
||||
<SearchFiles />
|
||||
{!fileShareId ? <SearchFiles /> : null}
|
||||
|
||||
{isAnyItemChosen
|
||||
? (
|
||||
@@ -539,63 +697,67 @@ export default function MainFiles({ initialDirectories, initialFiles, initialPat
|
||||
</section>
|
||||
|
||||
<section class='flex items-center justify-end'>
|
||||
<FilesBreadcrumb path={path.value} />
|
||||
<FilesBreadcrumb path={path.value} fileShareId={fileShareId} />
|
||||
|
||||
<section class='relative inline-block text-left ml-2'>
|
||||
<div>
|
||||
<button
|
||||
class='inline-block justify-center gap-x-1.5 rounded-md bg-[#51A4FB] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-400 ml-2'
|
||||
type='button'
|
||||
title='Add new file or directory'
|
||||
id='new-button'
|
||||
aria-expanded='true'
|
||||
aria-haspopup='true'
|
||||
onClick={() => toggleNewOptionsDropdown()}
|
||||
>
|
||||
<img
|
||||
src='/images/add.svg'
|
||||
alt='Add new file or directory'
|
||||
class={`white ${isAdding.value || isUploading.value ? 'animate-spin' : ''}`}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{!fileShareId
|
||||
? (
|
||||
<section class='relative inline-block text-left ml-2'>
|
||||
<div>
|
||||
<button
|
||||
class='inline-block justify-center gap-x-1.5 rounded-md bg-[#51A4FB] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-400 ml-2'
|
||||
type='button'
|
||||
title='Add new file or directory'
|
||||
id='new-button'
|
||||
aria-expanded='true'
|
||||
aria-haspopup='true'
|
||||
onClick={() => toggleNewOptionsDropdown()}
|
||||
>
|
||||
<img
|
||||
src='/images/add.svg'
|
||||
alt='Add new file or directory'
|
||||
class={`white ${isAdding.value || isUploading.value ? 'animate-spin' : ''}`}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
|
||||
!areNewOptionsOpen.value ? 'hidden' : ''
|
||||
}`}
|
||||
role='menu'
|
||||
aria-orientation='vertical'
|
||||
aria-labelledby='new-button'
|
||||
tabindex={-1}
|
||||
>
|
||||
<div class='py-1'>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickUploadFile()}
|
||||
type='button'
|
||||
<div
|
||||
class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
|
||||
!areNewOptionsOpen.value ? 'hidden' : ''
|
||||
}`}
|
||||
role='menu'
|
||||
aria-orientation='vertical'
|
||||
aria-labelledby='new-button'
|
||||
tabindex={-1}
|
||||
>
|
||||
Upload Files
|
||||
</button>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickUploadFile(true)}
|
||||
type='button'
|
||||
>
|
||||
Upload Directory
|
||||
</button>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickCreateDirectory()}
|
||||
type='button'
|
||||
>
|
||||
New Directory
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class='py-1'>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickUploadFile()}
|
||||
type='button'
|
||||
>
|
||||
Upload Files
|
||||
</button>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickUploadFile(true)}
|
||||
type='button'
|
||||
>
|
||||
Upload Directory
|
||||
</button>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickCreateDirectory()}
|
||||
type='button'
|
||||
>
|
||||
New Directory
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
: null}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -613,6 +775,9 @@ export default function MainFiles({ initialDirectories, initialFiles, initialPat
|
||||
onClickOpenMoveFile={onClickOpenMoveFile}
|
||||
onClickDeleteDirectory={onClickDeleteDirectory}
|
||||
onClickDeleteFile={onClickDeleteFile}
|
||||
onClickCreateShare={isFileSharingAllowed ? onClickCreateShare : undefined}
|
||||
onClickOpenManageShare={isFileSharingAllowed ? onClickOpenManageShare : undefined}
|
||||
fileShareId={fileShareId}
|
||||
/>
|
||||
|
||||
<span
|
||||
@@ -650,33 +815,76 @@ export default function MainFiles({ initialDirectories, initialFiles, initialPat
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<section class='flex flex-row items-center justify-start my-12'>
|
||||
<span class='font-semibold'>WebDav URL:</span>{' '}
|
||||
<code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav</code>
|
||||
</section>
|
||||
{!fileShareId
|
||||
? (
|
||||
<section class='flex flex-row items-center justify-start my-12'>
|
||||
<span class='font-semibold'>WebDav URL:</span>{' '}
|
||||
<code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav</code>
|
||||
</section>
|
||||
)
|
||||
: null}
|
||||
|
||||
<CreateDirectoryModal
|
||||
isOpen={isNewDirectoryModalOpen.value}
|
||||
onClickSave={onClickSaveDirectory}
|
||||
onClose={onCloseCreateDirectory}
|
||||
/>
|
||||
{!fileShareId
|
||||
? (
|
||||
<CreateDirectoryModal
|
||||
isOpen={isNewDirectoryModalOpen.value}
|
||||
onClickSave={onClickSaveDirectory}
|
||||
onClose={onCloseCreateDirectory}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
|
||||
<RenameDirectoryOrFileModal
|
||||
isOpen={renameDirectoryOrFileModal.value?.isOpen || false}
|
||||
isDirectory={renameDirectoryOrFileModal.value?.isDirectory || false}
|
||||
initialName={renameDirectoryOrFileModal.value?.name || ''}
|
||||
onClickSave={renameDirectoryOrFileModal.value?.isDirectory ? onClickSaveRenameDirectory : onClickSaveRenameFile}
|
||||
onClose={onClickCloseRename}
|
||||
/>
|
||||
{!fileShareId
|
||||
? (
|
||||
<RenameDirectoryOrFileModal
|
||||
isOpen={renameDirectoryOrFileModal.value?.isOpen || false}
|
||||
isDirectory={renameDirectoryOrFileModal.value?.isDirectory || false}
|
||||
initialName={renameDirectoryOrFileModal.value?.name || ''}
|
||||
onClickSave={renameDirectoryOrFileModal.value?.isDirectory
|
||||
? onClickSaveRenameDirectory
|
||||
: onClickSaveRenameFile}
|
||||
onClose={onClickCloseRename}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
|
||||
<MoveDirectoryOrFileModal
|
||||
isOpen={moveDirectoryOrFileModal.value?.isOpen || false}
|
||||
isDirectory={moveDirectoryOrFileModal.value?.isDirectory || false}
|
||||
initialPath={moveDirectoryOrFileModal.value?.path || ''}
|
||||
name={moveDirectoryOrFileModal.value?.name || ''}
|
||||
onClickSave={moveDirectoryOrFileModal.value?.isDirectory ? onClickSaveMoveDirectory : onClickSaveMoveFile}
|
||||
onClose={onClickCloseMove}
|
||||
/>
|
||||
{!fileShareId
|
||||
? (
|
||||
<MoveDirectoryOrFileModal
|
||||
isOpen={moveDirectoryOrFileModal.value?.isOpen || false}
|
||||
isDirectory={moveDirectoryOrFileModal.value?.isDirectory || false}
|
||||
initialPath={moveDirectoryOrFileModal.value?.path || ''}
|
||||
name={moveDirectoryOrFileModal.value?.name || ''}
|
||||
onClickSave={moveDirectoryOrFileModal.value?.isDirectory ? onClickSaveMoveDirectory : onClickSaveMoveFile}
|
||||
onClose={onClickCloseMove}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
|
||||
{!fileShareId && isFileSharingAllowed
|
||||
? (
|
||||
<CreateShareModal
|
||||
isOpen={createShareModal.value?.isOpen || false}
|
||||
filePath={createShareModal.value?.filePath || ''}
|
||||
password={createShareModal.value?.password || ''}
|
||||
onClickSave={onClickSaveFileShare}
|
||||
onClose={onClickCloseFileShare}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
|
||||
{!fileShareId && isFileSharingAllowed
|
||||
? (
|
||||
<ManageShareModal
|
||||
baseUrl={baseUrl}
|
||||
isOpen={manageShareModal.value?.isOpen || false}
|
||||
fileShareId={manageShareModal.value?.fileShareId || ''}
|
||||
onClickSave={onClickUpdateFileShare}
|
||||
onClickDelete={onClickDeleteFileShare}
|
||||
onClose={onClickCloseManageShare}
|
||||
/>
|
||||
)
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user