THE POWER OF POSITIVE THINKING: Build a Dropbox-like Cloud File Storage with Azure

☁ 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

Go to Storage Account → Containers → + Container
Name: user-files
Access Level: Blob (anonymous read for public files)

📝 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>

</head>

<body>

<h1>My Dropbox Clone</h1>

<button onclick="uploadFile()">Upload</button>

<h3>Files:</h3>

</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

Generate SAS tokens in Azure → Shared Access Signature.
Share links like:

https://dropboxclone.blob.core.windows.net/user-files/report.docx?sp=r&st=2023-10-01T00:00:00Z&se=2023-10-31T00:00:00Z&spr=https&sig=XXX

📝 Why: Share read/write access securely without exposing storage keys.

📡 Real-time updates

Use Azure Event Grid to detect blob changes.
Setup webhook → frontend refreshes file list.

📝 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

THE POWER OF POSITIVE THINKING

Pages

Monday, June 30, 2025

Build a Dropbox-like Cloud File Storage with Azure