I am taking audio file from dropzone component and uploading it into firebase storage

35 Views Asked by At

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);
    },
  });

firebase-console-image 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?`

0

There are 0 best solutions below