Question

How can I stream videos uploaded on space bucket from react frontend

https://docs.digitalocean.com/products/spaces/

I’m using React.js to upload video, image and audio contents to digital ocean space. I can successfully upload contents using multerS3 but I cannot stream video content or images on my frontend.

const multer = require("multer");
var multerS3 = require("multer-s3");
var aws = require("aws-sdk");
const { v4: uuidv4 } = require("uuid");

const dotenv = require("dotenv");
const {
  bucketAccessKeyId,
  bucketLocation,
  bucketSecretAccessKey,
} = require("../config/main");
dotenv.config();

const spacesEndpoint = new aws.Endpoint(bucketLocation);

var s3 = new aws.S3({
  accessKeyId: bucketAccessKeyId,
  secretAccessKey: bucketSecretAccessKey,
  endpoint: spacesEndpoint,
});

const fileFilter = (req, files, cb) => {
  // reject a file
  if (
    files.mimetype === "image/jpeg" ||
    files.mimetype === "image/pipeg" ||
    files.mimetype === "image/png" ||
    files.mimetype === "audio/mp3" ||
    files.mimetype === "audio/mpeg" ||
    files.mimetype === "audio/wav" ||
    files.mimetype === "audio/ogg" ||
    files.mimetype === "video/mp4" ||
    files.mimetype === "video/ogg" ||
    files.mimetype === "video/webm"
  ) {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

module.exports = multer({
  storage: multerS3({
    s3: s3,
    bucket: "mybucketname",
    acl: "public-read",
    metadata: function (req, file, cb) {
      cb(null, { fieldName: file.fieldname });
    },
    key: function (req, file, cb) {
      const storyId = uuidv4();

      cb(
        null,
        Date.now().toString() + "__" + storyId + "__" + file.originalname
      );
    },
  }),
  limits: {
    // Maximum file size of 250MB
    fileSize: 1024 * 1024 * 250,
  },
  fileFilter: fileFilter,
});

// module.exports = upload;

Submit an answer
Answer a question...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer