Today I completed a hands-on cloud project where I built a fully functional Cloud File Upload Portal using:
✅ HTML5
✅ CSS3
✅ JavaScript
✅ AWS S3
✅ AWS IAM
✅ GitHub
✅ Netlify CI/CD
The application allows users to upload files directly from a browser into an AWS S3 bucket with a modern UI and automatic deployment pipeline.
📸 Architecture Diagram
🌐 Live Workflow
The complete upload flow works like this:
User Browser
↓
Netlify Hosted Frontend
↓
AWS SDK for JavaScript
↓
AWS S3 Bucket
↓
File Stored in Cloud
And the CI/CD pipeline:
VS Code
↓
Git Commit & Push
↓
GitHub Repository
↓
Netlify Auto Deploy
↓
Live Website Updated
✨ Features
Modern responsive UI
Browser-based file upload
Direct AWS S3 integration
GitHub version control
Netlify auto deployment
CI/CD workflow
Secure HTTPS hosting
Real-time upload status
🏗️ Technologies Used
Technology Purpose
HTML5 Frontend Structure
CSS3 Modern Styling
JavaScript Upload Logic
AWS SDK S3 Communication
Amazon S3 Cloud Storage
GitHub Source Control
Netlify Hosting & CI/CD
AWS IAM Access Management
☁️ AWS S3 Configuration
I created:
An S3 Bucket
IAM User
Access Keys
CORS Policy
This allowed the frontend application to upload files directly into the bucket.
Example CORS configuration:
[
{
"AllowedHeaders": [""],
"AllowedMethods": ["GET", "PUT", "POST"],
"AllowedOrigins": [""],
"ExposeHeaders": []
}
]
🔐 Important Learning
One of the errors I faced was:
AccessControlListNotSupported
I fixed it by removing:
ACL: "public-read"
from the upload request because newer S3 buckets disable ACLs by default.
This was a great learning experience about modern AWS security practices.
🚀 CI/CD with GitHub + Netlify
After pushing the code to GitHub, Netlify automatically:
✅ Pulled the latest code
✅ Built the project
✅ Deployed the website
✅ Updated the live application
This helped me understand real-world DevOps workflows and deployment automation.
📚 Key Learnings
Through this project I learned:
AWS S3 bucket management
IAM permissions & security
Browser-based S3 uploads
Git & GitHub workflow
Netlify deployment
CI/CD fundamentals
Cloud frontend integration
🔥 Future Improvements
Planned upgrades:
Drag & Drop Upload
Upload Progress Bar
Multiple File Upload
Authentication
Pre-Signed URLs
CloudFront CDN
Backend API Integration
💡 Final Thoughts
This project helped me connect frontend development with cloud services and DevOps practices in a practical way.
Building end-to-end projects like this gives real exposure to:
Cloud Computing
DevOps
Deployment Automation
Web Development
AWS Security Concepts
👨💻 Author
Irfan Pasha
GitHub Repository:
cloud-file-upload-portal GitHub Repo
https://github.com/IrfanPasha05/cloud-file-upload-portal/tree/main
Top comments (0)