Uploading Files to Azure Blob Storage

This guide demonstrates how to upload files to Azure Blob Storage using a simple web interface. You can use this as a foundation for building your own file upload solutions.

Prerequisites

• An Azure account.
• An Azure Storage Account.
• A Blob Container within your Storage Account.
• (Optional) A method to obtain a temporary or SAS URI for direct upload. For this example, we'll simulate the upload process.

File Upload Interface

Use the form below to select and upload a file. The JavaScript will simulate the upload progress.

How it Works (Conceptual)

Typically, file uploads to Azure Blob Storage from a web application involve one of these approaches:

1. Client-Side SDKs (e.g., Azure Blob Storage SDK for JavaScript): This is the recommended approach for modern web applications. You can use the SDK to authenticate, generate SAS tokens, and upload directly from the browser.
2. Server-Side Uploads: Your backend server receives the file from the client, then uses Azure SDKs to upload it to Blob Storage. This provides more control over security and logic.
3. Direct Upload with SAS URI: Your backend generates a Shared Access Signature (SAS) URI with write permissions for a specific blob. The client then uses this URI to upload the file directly to Azure Storage. This reduces load on your server.

The interface above simulates the client-side interaction and progress reporting.

Example JavaScript for Upload Simulation

The following JavaScript handles the file selection, button click, and simulates upload progress and completion.

document.getElementById('uploadButton').addEventListener('click', () => {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    const messageArea = document.getElementById('messageArea');
    const progressBar = document.getElementById('progressBar');
    const progressBarContainer = document.getElementById('progressBarContainer');

    messageArea.style.display = 'none';
    progressBarContainer.style.display = 'none';
    progressBar.style.width = '0%';
    progressBar.textContent = '0%';

    if (!file) {
        showMessage('Please select a file first.', 'error');
        return;
    }

    // Simulate upload process
    progressBarContainer.style.display = 'block';
    let progress = 0;
    const interval = setInterval(() => {
        progress += Math.random() * 10 + 5; // Increment progress
        if (progress > 100) {
            progress = 100;
        }
        progressBar.style.width = progress + '%';
        progressBar.textContent = Math.round(progress) + '%';

        if (progress === 100) {
            clearInterval(interval);
            setTimeout(() => {
                showMessage(`'${file.name}' uploaded successfully!`, 'success');
                progressBarContainer.style.display = 'none';
                fileInput.value = ''; // Clear the file input
            }, 500);
        }
    }, 200);
});

function showMessage(msg, type) {
    const messageArea = document.getElementById('messageArea');
    messageArea.textContent = msg;
    messageArea.className = `message ${type}`;
    messageArea.style.display = 'block';
}