🚀 Introduction

In this tutorial, we will build a simple file upload website (similar to a basic Google Drive uploader) using only HTML and Azure Blob Storage — without any backend server.

This approach is fast, lightweight, and perfect for beginners or assignments.

🧱 Architecture Overview

The system is very simple:

Browser (HTML Page) → Azure Blob Storage (via SAS Token)

There is no backend server, which makes the setup easy and cost-effective.

☁️ Step 1: Create a Storage Account in Azure

  1. Log in to the Azure Portal
  2. Click Create Resource
  3. Select Storage Account
  4. Fill in:
  • Resource Group
  • Storage Account Name
  • Region

5. Click Review + Create

None

📦 Step 2: Create a Blob Container

  1. Open your Storage Account
  2. Go to Containers
  3. Click + Container
  4. Enter:
  • Name: uploads
  • Public Access Level: Private
None
None
Allow blob Anonymous acess to enable
None
Now you can upload your files to blob storage

Step 3: Create Vm

None
None
None
None
Go to create port rule -> inbound port rules and select http service
None
First download putty software and In the VM copied the NIC public ip and paste it putty and Start the VM and Click Open in putty
None
Click Accept
None
update the terminal
None
install apache
None

Step 4: Simple HTML Upload Page

None

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TD077Colud-Azure Blob Upload</title>

<style> body { font-family: "Segoe UI", Arial; background: linear-gradient(135deg, #eef2ff, #f7f9fc); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }

.card { background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 350px; text-align: center; }

h2 { margin-bottom: 15px; }

/* File Upload Styling */ .file-upload { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 20px 0; }

input[type="file"] { display: none; }

.custom-file-btn { background: #6366f1; color: white; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: 0.3s; }

.custom-file-btn:hover { background: #4f46e5; }

.file-name { font-size: 14px; color: #444; max-width: 250px; text-align: center; word-break: break-word; }

/* Upload Button */ button { background: #4f46e5; color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; width: 100%; font-size: 15px; }

button:hover { background: #4338ca; }

/* Progress */ .progress-bar { width: 100%; background: #eee; border-radius: 10px; overflow: hidden; margin-top: 15px; display: none; }

.progress { height: 10px; width: 0%; background: #4f46e5; }

/* Status */ #status { margin-top: 15px; font-weight: bold; }

.file-link { margin-top: 10px; font-size: 13px; word-break: break-all; } </style> </head>

<body>

<div class="card"> <h2>Upload Your Files to SEU/077Cloud</h2>

<! — File Picker → <div class="file-upload"> <label for="fileInput" class="custom-file-btn">📁R Choose File</label> <input type="file" id="fileInput" onchange="showFileName()"> <div class="file-name" id="fileName">No file selected</div> </div>

<! — Upload Button → <button onclick="uploadFile()">Upload</button>

<! — Progress → <div class="progress-bar" id="progressBar"> <div class="progress" id="progress"></div> </div>

<! — Status → <p id="status"></p> <div class="file-link" id="fileLink"></div> </div>

<script> function showFileName() { const file = document.getElementById("fileInput").files[0]; if (file) { document.getElementById("fileName").innerText = "Selected: " + file.name; } else { document.getElementById("fileName").innerText = "No file selected"; } }

function uploadFile() { const file = document.getElementById("fileInput").files[0];

if (!file) { alert("Please select a file!"); return; }

const accountName = "seu077"; const containerName = "seu077";

const sasToken = "?sv=2025–11–05&ss=b&srt=sco&sp=rwctf&se=2026–12–29T18:54:23Z&st=2026–04–29T10:39:23Z&spr=https&sig=G30GX0AbenSGPZbxUD5triN3qcmroZxq89CgQkaPZwM%3D";

const blobName = file.name; const fileUrl = `https://${accountName}.blob.core.windows.net/${containerName}/${blobName}`; const uploadUrl = fileUrl + sasToken;

const progressBar = document.getElementById("progressBar"); const progress = document.getElementById("progress");

progressBar.style.display = "block"; progress.style.width = "0%";

const xhr = new XMLHttpRequest(); xhr.open("PUT", uploadUrl, true);

xhr.setRequestHeader("x-ms-blob-type", "BlockBlob"); xhr.setRequestHeader("Content-Type", file.type);

xhr.upload.onprogress = function(e) { if (e.lengthComputable) { let percent = (e.loaded / e.total) * 100; progress.style.width = percent + "%"; } };

xhr.onload = function() { if (xhr.status === 201) { document.getElementById("status").innerText = "✅ Upload successful!"; document.getElementById("fileLink").innerHTML = `<a href="${fileUrl}" target="_blank">View Uploaded File</a>`; } else { document.getElementById("status").innerText = "❌ Upload failed!"; console.log(xhr.responseText); } };

xhr.onerror = function() { document.getElementById("status").innerText = "⚠️ Error occurred!"; };

xhr.send(file); } </script>

</body> </html>

None
None
Primary NIC public ip address copied and open the AnyBrowser Window and paste the Ip. Then show Your Html page in your browser.

Step 5: Generate SAS Token

Go to:

  • Storage Account → Shared Access Signature

Enable:

  • ✅ Write
  • ✅ Create
  • ✅ Add (optional)

Then:

  • Click Generate SAS
  • SAS Token → starts with ?sv=...
None
select and unselect this options
None
Click genarate SAS token Copied SAS token to html file
None
None
choose the file and upload the file
None
Now it Successfully files uploaded to the your Blob storage

Final Result

You now have:

  • A simple upload interface
  • Direct upload to Azure Blob Storage
  • No backend required

Security Notes

  • SAS token gives temporary access — always set expiry time
  • Do not share SAS tokens publicly
  • For production, use backend authentication

Future Improvements

  • Upload progress bar
  • Drag & drop file upload
  • Multiple file uploads
  • File preview
  • User authentication

Conclusion

You have successfully built a cloud-based file upload system using only HTML and Azure Blob Storage. This is one of the simplest ways to integrate cloud storage into a web application.