But it is storing in 9 bytes always in app/octet-stream format. It is the code
interface FileWithPreview extends File {
path: string;
preview: string;
}
const AudioDropzone = ({
className,
setIsDragActive,
}: {
className: string;
setIsDragActive: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
const [file, setFile] = useState<FileWithPreview | null>(null);
const [isDragActiveLocal, setIsDragActiveLocal] = useState(false);
/////////Function To Clear Files/////////
const clearFile = () => {
setFile(null);
};
/////////Function To Upload File///////////
const uploadAudio = async () => {
try {
if (file) {
const filename = file.path;
console.log(filename);
// Create a reference to the audio file in Firebase Storage
const audioRef = ref(storage, `audio/${filename + v4()}`);
uploadBytes(audioRef, file)
.then(() => {
alert("File uploaded successfully");
})
.then(() => {
clearFile();
});
} else {
alert("No file selected");
}
} catch (error) {
alert(`Error uploading file ${error}`);
}
};
const onDrop = useCallback(
(acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
if (acceptedFiles?.length) {
const fileWithPreview: FileWithPreview = {
...acceptedFiles[0],
preview: URL.createObjectURL(acceptedFiles[0]),
path: "",
};
setFile(fileWithPreview);
}
console.log(rejectedFiles);
},
[]
);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: { "audio/*": [] },
onDragEnter: () => {
setIsDragActive(true);
setIsDragActiveLocal(true);
},
onDragLeave: () => {
setIsDragActive(false);
setIsDragActiveLocal(false);
},
});
what is i am doing wrong. Even if changes its metadata still it is not playable and not of original size as of in the system.What i am doing wrong?`