Upload directly to Amazon S3 using Plupload HTML5 runtime

Amazon S3 supports cross-origin resource sharing (CORS), enabling direct HTML5 file uploads from web browsers using Plupload. This eliminates the need for server-side proxies and provides a more efficient upload experience.

What is CORS in Amazon S3?

Cross-Origin Resource Sharing (CORS) allows web applications running on one domain to make requests to Amazon S3 buckets on a different domain. Without CORS, browsers block these cross-origin requests for security reasons.

Setting Up CORS Configuration

First, configure your S3 bucket's CORS policy to allow uploads from your domain:

{
  "CORSRules": [
    {
      "AllowedOrigins": ["https://yourdomain.com"],
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
      "MaxAgeSeconds": 3000,
      "ExposeHeaders": ["ETag"]
    }
  ]
}

Plupload Configuration for S3

Configure Plupload to upload directly to your S3 bucket using the HTML5 runtime:

var uploader = new plupload.Uploader({
    runtimes: 'html5',
    browse_button: 'upload-button',
    container: 'upload-container',
    url: 'https://your-bucket.s3.amazonaws.com/',
    
    multipart_params: {
        'key': '${filename}',
        'AWSAccessKeyId': 'YOUR_ACCESS_KEY',
        'policy': 'BASE64_ENCODED_POLICY',
        'signature': 'POLICY_SIGNATURE',
        'acl': 'public-read'
    },
    
    filters: {
        max_file_size: '10mb',
        mime_types: [
            {title: "Images", extensions: "jpg,gif,png"},
            {title: "Documents", extensions: "pdf,doc,txt"}
        ]
    }
});

Complete Upload Implementation

Here's a complete example showing the upload process with progress tracking:

// Initialize uploader
uploader.init();

// Handle upload progress
uploader.bind('UploadProgress', function(up, file) {
    document.getElementById('progress').innerHTML = 
        'Uploaded ' + file.percent + '%';
});

// Handle successful upload
uploader.bind('FileUploaded', function(up, file, response) {
    console.log('File uploaded successfully');
    var s3Url = 'https://your-bucket.s3.amazonaws.com/' + file.name;
    document.getElementById('result').innerHTML = 
        '<a href="' + s3Url + '">View uploaded file</a>';
});

// Handle upload errors
uploader.bind('Error', function(up, err) {
    console.error('Upload error: ' + err.message);
});

// Start upload
document.getElementById('start-upload').onclick = function() {
    uploader.start();
};

Security Considerations

Generate signed policies server-side to secure your uploads. Never expose AWS credentials in client-side code. Use temporary credentials and restrict upload permissions through IAM policies.

Benefits of Direct S3 Upload

Conclusion

Direct S3 uploads with Plupload and CORS provide efficient, scalable file uploading. Configure CORS properly and implement secure authentication for production use.