HTML5 solution for uploading large files directly to S3 without server involvement

Backend
1

I’m trying to find a way to upload big files straight to S3 using HTML5 without going through my server. Right now, we use a Flash uploader, but we want to move away from that.

Here’s what we need:

  1. HTML5-based uploader (no Flash)
  2. Video upload with conversion for HTML5 players and mobile
  3. Image upload with resizing, cropping, and rotating
  4. Document upload (like PDFs) with preview feature

I’ve heard about Filepicker.io and Zencoder, but I’m not sure if they’re the best solution. Has anyone used these or found a better way to handle large file uploads without server interaction?

Our main goal is to avoid the overhead of processing files on our server. We want the files to go straight to S3, and then handle any post-processing (like video conversion or image editing) separately.

Any suggestions or experiences with similar setups would be really helpful. Thanks!

2

yo silvia, check out plupload! it’s html5 & can do direct s3 uploads. for vids, maybe pair it w/ aws elastic transcoder? image stuff, u could use something like fabric.js on client side. haven’t tried this exact setup but sounds promising. good luck!

3

hey there! have u looked into using the aws sdk for javascript? it lets u upload directly to s3 from the browser. for video stuff, maybe check out aws elemental mediaconvert? curious what others think tho. anyone tried combining these with some client-side image processing libraries?

4

I’ve implemented a similar system using the AWS SDK for JavaScript in conjunction with Uppy for the front-end. It works seamlessly for direct S3 uploads without server involvement. For video processing, we integrated with AWS Elemental MediaConvert, which handles the transcoding efficiently. Image manipulation is done client-side using Cropper.js before upload. For document previews, we’ve had success with PDF.js. This combination has significantly reduced our server load and improved upload speeds. One caveat: ensure you implement proper security measures, like generating pre-signed URLs, to prevent unauthorized S3 access. It took some time to set up, but the performance gains were worth it.