Uploading and retrieving videos

Working with Data Drivers
1

Hello,

I need to update and retrieve video files to/from my database. Seeing that files will be small I decided to upload a video file directly to a document’s video field (no GridFS, no external storage, etc.)

I use multer (with memory storage) to upload via form data but I’m not sure if I’m doing it right (?)

Multer’s memory storage puts a file in req.file.buffer which looks like this

    {
      fieldname: 'file',
      originalname: 'test_video.mp4',
      encoding: '7bit',
      mimetype: 'video/mp4',
      buffer: <Buffer 00 00 00 20 66 74 79 70 69 73 6f 6d 00 00 02 00 69 73 6f 6d 69 73 6f 32 61 76 63 31 6d 70 34 31 00 00 00 08 66 72 65 65 00 23 cb b5 6d 64 61 74 00 00 ... 2353584 more bytes>,
      size: 2353634
    }

On server side I try to write this buffer into db

    upload(req, res, async function (err) {
                
                let item = req.body
                
                if (req.file) {
                  item.file = new mongo.Binary(req.file.buffer)
                }
                
                let result = await uploadDAO.insertItem(item);
                res.json(result)
    })

My document’s video field looks like this afterwards:

video: Binary('QUFBQUlHWjBlWEJwYzI5dEFBQUNBR2x6YjIxcGMyOHlZWFpqTVcxd05ERUFBQUFJWm5KbFpRQWp5N1Z0WkdGMEFBQUNyZ1lGLy8r...', 0)

On the client side, when retrieving the video I get this same string and I have no idea what to do with it ? Ideally I would like to createObjectURL and display a video, would it be possible ?

Thanks in advance for your help :slight_smile:

2

It’s dependent upon what your client side is, the video may be too large to upload but give this a try first, I use React primarily as my front-end application. Here is how I would handle a video or picture.

const [video, setVideo] = useState('')
useEffect(() => {
    axios
    .get(/api/profile/${username}/video, {
      responseType: 'blob' // Set the responseType to 'blob' to handle binary data
    })
    .then(response => {
      const blob = new Blob([response.data], { type: response.headers['content-type'] });
      
const videoUrl = URL.createObjectURL(blob);
      setVideo(videoUrl);
    })
    .catch(error => {
    // Handle errors
    });
  }, []);

here we receive the video as a blob and create an object URL with it, that way the front end knows it’s a binary video and we give it that URL so it can be displayed, then for clean code I use a useState to set the video so it can be used elsewhere in the application. If the video is too large you may have to use GridFS which there is a lot of information on the web on how to use and set it up in your personal application.