CODEWITHSUNDEEP
reactjsamazon-web-servicesamazon-s3
Arun
Arun

Reputation: 549

How to upload video files into an S3 bucket using React

How do I upload video files into S3 bucket using React JS?

I am currently developing a React JS application and I have to upload video files into S3 bucket. I searched a lot but I can only find out "Image" uploading part. But I would like to know how to upload video files into S3 bucket.

Upvotes: 3

Views: 8359

Answers (2)

Michael Sanderson
Michael Sanderson

Reputation: 21

Use the multer-s3 node package as it used in this tutorial: https://www.youtube.com/watch?v=ASuU4km3VHE&t=3s

and add the contentType: multerS3.AUTO_CONTENT_TYPE to the multer object like so.

var upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'some-bucket',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString())
    }
  })
})

This will set the Content-type metadata to video/quicktime for the bucket object when you upload a video file. These video objects can be played back using a media player and the object url from s3.

Upvotes: 2

mostafazh
mostafazh

Reputation: 4207

Technically speaking, uploading a video is just like uploading any binary file (e.g. Image, audio file ... etc). However, because those video files can get too big quickly so I'd suggest you utilize one or more of the following:

  • Multipart upload: Highly recommended if the file is above 100MB. It will help you reach higher throughput, the ability to resume interrupted uploads and pausing and resuming uploads. Read more here.

  • S3 Transfer Acceleration: Using a CDN users will be uploading to a geographically closer location which will also speed things up for them. Read more here.

Some helpful libraries to checkout: EvaporateJS, react-s3-uploader-multipart

Upvotes: 2

Related Questions