allow dropping files as input

This commit is contained in:
Bruno 2024-08-06 04:14:31 -03:00
parent 5160f906f4
commit 4eb49ca90d
No known key found for this signature in database
GPG key ID: E2D9580966DF5079

View file

@ -137,6 +137,11 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
const [blob, setBlob] = useState<Blob>(); const [blob, setBlob] = useState<Blob>();
const [blobUrl, setBlobUrl] = useObjectUrl(); const [blobUrl, setBlobUrl] = useObjectUrl();
const setAudioBlob = blob => {
setBlob(blob);
setBlobUrl(blob);
};
useEffect(() => () => { useEffect(() => () => {
if (blobUrl) if (blobUrl)
URL.revokeObjectURL(blobUrl); URL.revokeObjectURL(blobUrl);
@ -182,6 +187,16 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
|| blob.type.includes("codecs") && !blob.type.includes("opus") || blob.type.includes("codecs") && !blob.type.includes("opus")
); );
const handleDrop = async (event) => {
event.preventDefault();
const file = event.dataTransfer.files[0];
if (file) setAudioBlob(file);
};
const handleDragOver = (event) => {
event.preventDefault();
};
return ( return (
<ModalRoot {...modalProps}> <ModalRoot {...modalProps}>
<ModalHeader> <ModalHeader>
@ -189,22 +204,21 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
</ModalHeader> </ModalHeader>
<ModalContent className={cl("modal")}> <ModalContent className={cl("modal")}>
<div className={cl("buttons")}> <div
onDrop={handleDrop}
onDragOver={handleDragOver}
className={cl("buttons")}
>
<VoiceRecorder <VoiceRecorder
setAudioBlob={blob => { setAudioBlob={blob => setAudioBlob(blob)}
setBlob(blob);
setBlobUrl(blob);
}}
onRecordingChange={setRecording} onRecordingChange={setRecording}
/> />
<Button <Button
onClick={async () => { onClick={async () => {
const file = await chooseFile("audio/*"); const file = await chooseFile("audio/*");
if (file) { if (file) setAudioBlob(file);
setBlob(file);
setBlobUrl(file);
}
}} }}
> >
Upload File Upload File