Report this

What is the reason for this report?

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

Posted on May 21, 2022

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;


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!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Heya,

I’ll recommend checking the permissions of the files in the Space Bucket.

A Spaces bucket’s file listing is a list of the bucket’s contents in XML. It displays the names (called keys) of every file in the bucket as well as other file information, like the file sizes and last modified dates.

Owners of a bucket set the visibility permissions of this file listing, which can be:

  • Public, meaning anyone on the internet can view the listing by visiting the base URL of the bucket, even if the contents of individual files are set to Private.
  • Private, meaning only users who connect to the bucket using access keys can list the contents.

The permission to list the contents of a DigitalOcean Spaces bucket is Private by default.

You can examine the logs as this will shed more light if the issue is caused from the permissions.

Hope that this helps!

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Start building today

From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.