Handling audio data in Next JS

124 Views Asked by At

I am working on a Next JS app, now trying to make a test component to figure out how to upload an audio file from the file system to a mongo DB using GridFS.

The component hereafter is meant to do that, but it is not working.

Can someone see what I did wrong? Or give me a hint on what to try.

    import mongoose from "mongoose";
    import "./TEST.css";

    const AudioStore = async () => {
            function loadData(connection: mongoose.Connection) {
                const path = require('path'),
                            Grid = require('gridfs-stream'), // Require GridFS.
                            fs = require('fs'), // Require files system module.
                            audioPath = path.join(__dirname, '/readFrom/GridFS.ogg');
            
                // Connect GridFS and mongo
                Grid.mongo = mongoose.mongo;
            
                connection.once('open', () => {
                    console.log('- Connection open -');
                    const gridFSBucket = new mongoose.mongo.GridFSBucket(connection.db);
                
                    // When connection is open, create write stream with
                    // the name to store files as in the DB
                    const writeStream = gridFSBucket.openUploadStream('TheSavedDBGridFS.ogg');
                
                    // Create a read-stream from where the file is (audioPath)
                    // and pipe it into the database (through write-stream)
                    fs.createReadStream(audioPath).pipe(writeStream);
                
                    writeStream.on('finish', () => {
                        console.log('All is done!');
                        process.exit(0);
                    });
                });
            } /* End of loadData */
        
        
            const storeAudio = async () => {
                const uri = process.env.NEXT_PUBLIC_MDB_URI_AUDIO!,
                            connectMDB = async () => {
                                try {
                                    await mongoose.connect(uri);
                                    console.log("Connected to MongoDB successfully!");
                                    const conn = mongoose.connection
                                    loadData(conn)
                                } catch (error) {
                                    console.error("Error connecting to MongoDB:", error);
                                }
                            };
                await connectMDB()
            }; /* End of storeAudio */
        
        
            await storeAudio();
        
            return (
                <div>
                    <h2>Audio Store</h2>
                    <main>
                        <div className="audio-controls">
                        </div>
                        {true ? (
                            <div className="audio-container">
                            </div>
                            ) : null}
                    </main>
                </div>
            );
    }; /* End of AudioStore */

    export default AudioStore;

Note that I have put the file GridFS.ogg is in 2 places:

    ./app/readFrom/GridFS.ogg
    ./public/readFrom/GridFS.ogg

One more detail, I made this component starting from a working sample code I have in JavaScript; but obviously missing some important points.

0

There are 0 best solutions below