Show an error if a user attempts to upload a folder

This commit is contained in:
DaneEveritt 2022-07-24 18:22:50 -04:00
parent 1d5d92f678
commit 1cfa4100ad
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 27 additions and 39 deletions

View file

@ -7,7 +7,7 @@ import styled from 'styled-components/macro';
import { ModalMask } from '@/components/elements/Modal'; import { ModalMask } from '@/components/elements/Modal';
import Fade from '@/components/elements/Fade'; import Fade from '@/components/elements/Fade';
import useEventListener from '@/plugins/useEventListener'; import useEventListener from '@/plugins/useEventListener';
import useFlash from '@/plugins/useFlash'; import { useFlashKey } from '@/plugins/useFlash';
import useFileManagerSwr from '@/plugins/useFileManagerSwr'; import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import { WithClassname } from '@/components/types'; import { WithClassname } from '@/components/types';
@ -23,15 +23,7 @@ function isFileOrDirectory(event: DragEvent): boolean {
return false; return false;
} }
for (let i = 0; i < event.dataTransfer.types.length; i++) { return event.dataTransfer.types.some((value) => value.toLowerCase() === 'files');
// Check if the item being dragged is not a file.
// On Firefox a file of type "application/x-moz-file" is also in the array.
if (event.dataTransfer.types[i] !== 'Files' && event.dataTransfer.types[i] !== 'application/x-moz-file') {
return false;
}
}
return true;
} }
export default ({ className }: WithClassname) => { export default ({ className }: WithClassname) => {
@ -39,7 +31,7 @@ export default ({ className }: WithClassname) => {
const [timeouts, setTimeouts] = useState<NodeJS.Timeout[]>([]); const [timeouts, setTimeouts] = useState<NodeJS.Timeout[]>([]);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const { mutate } = useFileManagerSwr(); const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { addError, clearAndAddHttpError } = useFlashKey('files');
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid); const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const directory = ServerContext.useStoreState((state) => state.files.directory); const directory = ServerContext.useStoreState((state) => state.files.directory);
@ -49,26 +41,16 @@ export default ({ className }: WithClassname) => {
useEventListener( useEventListener(
'dragenter', 'dragenter',
(e) => { (e) => {
if (!isFileOrDirectory(e)) { e.preventDefault();
return;
}
e.stopPropagation(); e.stopPropagation();
setVisible(true); if (isFileOrDirectory(e)) {
return setVisible(true);
}
}, },
true { capture: true }
); );
useEventListener( useEventListener('dragexit', () => setVisible(false), { capture: true });
'dragexit',
(e) => {
if (!isFileOrDirectory(e)) {
return;
}
e.stopPropagation();
setVisible(false);
},
true
);
useEffect(() => { useEffect(() => {
if (!visible) return; if (!visible) return;
@ -87,12 +69,23 @@ export default ({ className }: WithClassname) => {
const onFileSubmission = (files: FileList) => { const onFileSubmission = (files: FileList) => {
const formData: FormData[] = []; const formData: FormData[] = [];
clearAndAddHttpError();
const list = Array.from(files);
if (list.some((file) => !file.type && file.size % 4096 === 0)) {
return addError('Folder uploads are not supported at this time.', 'Error');
}
Array.from(files).forEach((file) => { Array.from(files).forEach((file) => {
const form = new FormData(); const form = new FormData();
form.append('files', file); form.append('files', file);
formData.push(form); formData.push(form);
}); });
clearFlashes('files');
if (formData.length === 0) {
return;
}
Promise.all( Promise.all(
Array.from(formData).map((f) => Array.from(formData).map((f) =>
getFileUploadUrl(uuid).then((url) => getFileUploadUrl(uuid).then((url) =>
@ -102,14 +95,10 @@ export default ({ className }: WithClassname) => {
// @ts-expect-error this is valid // @ts-expect-error this is valid
const name = f.getAll('files')[0].name; const name = f.getAll('files')[0].name;
appendFileUpload({ appendFileUpload({ name: name, loaded: data.loaded, total: data.total });
name: name,
loaded: data.loaded,
total: data.total,
});
if (data.loaded === data.total) { if (data.loaded === data.total) {
const timeout = setTimeout(() => removeFileUpload(name), 2000); const timeout = setTimeout(() => removeFileUpload(name), 500);
setTimeouts((t) => [...t, timeout]); setTimeouts((t) => [...t, timeout]);
} }
}, },
@ -118,10 +107,7 @@ export default ({ className }: WithClassname) => {
) )
) )
.then(() => mutate()) .then(() => mutate())
.catch((error) => { .catch(clearAndAddHttpError);
console.error(error);
clearAndAddHttpError({ error, key: 'files' });
});
}; };
return ( return (

View file

@ -3,6 +3,7 @@ import { FlashStore } from '@/state/flashes';
import { ApplicationStore } from '@/state'; import { ApplicationStore } from '@/state';
interface KeyedFlashStore { interface KeyedFlashStore {
addError: (message: string, title?: string) => void;
clearFlashes: () => void; clearFlashes: () => void;
clearAndAddHttpError: (error?: Error | string | null) => void; clearAndAddHttpError: (error?: Error | string | null) => void;
} }
@ -12,9 +13,10 @@ const useFlash = (): Actions<FlashStore> => {
}; };
const useFlashKey = (key: string): KeyedFlashStore => { const useFlashKey = (key: string): KeyedFlashStore => {
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { addFlash, clearFlashes, clearAndAddHttpError } = useFlash();
return { return {
addError: (message, title) => addFlash({ key, message, title, type: 'error' }),
clearFlashes: () => clearFlashes(key), clearFlashes: () => clearFlashes(key),
clearAndAddHttpError: (error) => clearAndAddHttpError({ key, error }), clearAndAddHttpError: (error) => clearAndAddHttpError({ key, error }),
}; };