File Upload Website for Student Portfolios

A simple, responsive web app that lets students upload their projects, from PDFs and images to CAD and video files, using Filestack.

This is perfect for learning platforms, digital classrooms, or student portfolio sites that need secure, multi-format file uploads without the backend complexity.

---

Features

• Multi-format uploads: Supports PDFs, images, videos, design, and CAD files.
• Automatic validation: Checks file type and size before uploading.
• Cloud storage: Files are securely stored in the cloud (via Filestack).
• Progress tracking: Shows real-time upload progress.
• Instant feedback: Displays upload success or error messages.
• Organized display: Uploaded files appear neatly with file icons and view links.
• Simple setup: Only a few lines of code to get started.

---

How It Works

1. Students Choose Files: The upload button opens Filestack’s file picker where students can select multiple files at once.

2. Automatic Validation: Only allowed file types and sizes are uploaded, everything else is blocked automatically.

3. Cloud Upload: Files are uploaded to Filestack’s secure cloud storage.

4. Progress Feedback: Upload progress is shown live in the console, and success or error messages appear instantly.

5. View Uploaded Files: Each file is displayed on the page with a name, size, icon, and a link to view or download it.

---

Getting Started

1. Clone the Repository

git clone <repo-url>
cd file-upload-website

---

2. Add Your Filestack API Key

Open script.js and replace the placeholder with your Filestack API key:

const client = filestack.init("YOUR_API_KEY_HERE");

You can get a free API key from the Filestack Developer Portal.

---

3. Run the Project

Simply open index.html in your browser. You’ll see a page where you can upload multiple files and view them right away.

---

Tech Stack

• Frontend: HTML, CSS, JavaScript
• File Handling: Filestack JavaScript SDK
• Storage: Filestack Cloud

---