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 [blobUrl, setBlobUrl] = useObjectUrl();
const setAudioBlob = blob => {
setBlob(blob);
setBlobUrl(blob);
};
useEffect(() => () => {
if (blobUrl)
URL.revokeObjectURL(blobUrl);
@ -182,6 +187,16 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
|| 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 (
<ModalRoot {...modalProps}>
<ModalHeader>
@ -189,22 +204,21 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
</ModalHeader>
<ModalContent className={cl("modal")}>
<div className={cl("buttons")}>
<div
onDrop={handleDrop}
onDragOver={handleDragOver}
className={cl("buttons")}
>
<VoiceRecorder
setAudioBlob={blob => {
setBlob(blob);
setBlobUrl(blob);
}}
setAudioBlob={blob => setAudioBlob(blob)}
onRecordingChange={setRecording}
/>
<Button
onClick={async () => {
const file = await chooseFile("audio/*");
if (file) {
setBlob(file);
setBlobUrl(file);
}
if (file) setAudioBlob(file);
}}
>
Upload File