☁ Build a Dropbox-like Cloud File Storage with Azure
๐ฆ Store files → ๐ Sync across devices → ๐ค Collaborate — without managing servers.
✅ Phase 1: Setup Azure Resources
1. Create Azure Storage Account
Go to Azure Portal → Create Resource → Storage Account
Name: dropboxclone
Region: closest to users
Redundancy: LRS (Locally Redundant)
Enable Static Website (under Data management)
๐ Why: Blob Storage will store and serve files; Static Website hosts your frontend.
2. Create Blob Container
๐ Why: Files uploaded here become publicly downloadable via URL.
๐ผ Phase 2: Build Frontend (HTML + JavaScript)
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Dropbox Clone</title>
<!-- Include Azure Storage Blob SDK -->
<script src="https://cdn.jsdelivr.net/npm/@azure/storage-blob@12.8.0/dist/azure-storage-blob.min.js"></script>
</head>
<body>
<h1>My Dropbox Clone</h1>
<input type="file" id="fileInput" />
<button onclick="uploadFile()">Upload</button>
<h3>Files:</h3>
<div id="fileList"></div>
<script src="script.js"></script>
</body>
</html>
๐ Why: Simple upload form + file list, no backend needed.
JavaScript (script.js)
Replace "YOUR_SAS_TOKEN"
with your generated SAS token:
const account = "dropboxclone";
const sas = "YOUR_SAS_TOKEN"; // create in Azure → Shared access signature
const container = "user-files";
async function uploadFile() {
const file = document.getElementById('fileInput').files[0];
const blobService = new AzureStorage.Blob.BlobServiceClient(
`https://${account}.blob.core.windows.net?${sas}`
);
const client = blobService.getContainerClient(container);
await client.uploadBlockBlob(file.name, file, file.size);
alert("Uploaded!");
listFiles();
}
async function listFiles() {
const blobService = new AzureStorage.Blob.BlobServiceClient(
`https://${account}.blob.core.windows.net?${sas}`
);
const client = blobService.getContainerClient(container);
let html = "";
for await (const blob of client.listBlobsFlat()) {
html += `<a href="https://${account}.blob.core.windows.net/${container}/${blob.name}" download>${blob.name}</a><br>`;
}
document.getElementById("fileList").innerHTML = html;
}
๐ Why: Upload and instantly list files from blob storage.
๐ Phase 3: Deploy frontend to Azure Static Website
Go to Storage Account → Static Website → Upload index.html
and script.js
Copy Primary endpoint URL (e.g., https://dropboxclone.z22.web.core.windows.net
)
๐ Why: Accessible from any browser/device.
๐ Phase 4: Enable Cross-Device Sync (Serverless)
Use Azure Functions:
Create Function App → Runtime: Node.js
Add HTTP Trigger Function sync.js
:
module.exports = async function (context, req) {
const fileUrl = req.body.fileUrl;
context.bindings.outputBlob = fileUrl;
return { body: "Synced to devices!" };
};
Configure output binding to blob storage.
๐ Why: Automatically sync uploaded files info across devices.
Call sync from frontend:
async function syncFile(fileUrl) {
await fetch("https://your-function.azurewebsites.net/api/sync", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ fileUrl })
});
}
๐ค Phase 5: Collaboration Features
✅ Share files
๐ Why: Share read/write access securely without exposing storage keys.
๐ก Real-time updates
๐ Why: Like Dropbox desktop app auto-refresh.
๐งช Phase 6: Test the system
What | How |
---|
Upload | Open static site, upload file |
Cross-device sync | Open same URL on phone; file shows |
Collaboration | Share SAS link; teammate downloads or edits |
๐งฉ Key Concepts
Feature | Azure | Dropbox Equivalent |
---|
File storage | Blob Storage | Cloud drive |
Cross-device sync | Azure Functions | Desktop sync |
Share links | SAS Tokens | Shared links |
Website | Static site | dropbox.com |
๐งฐ Troubleshooting
Issue | Fix |
---|
CORS errors | Storage Account → CORS → Allow * origins |
Expired SAS | Generate new token |
Function error | Azure Portal → Function → Monitor |
๐ Why this approach works
✅ Blob Storage: scalable & cost-effective
✅ SAS: secure, limited sharing
✅ Functions: no servers to manage
✅ Static website: low-cost global frontend