---
title: "Implement Azure Blob Storage Using Presigned URL in .NET Core and JavaScript"  
description: "Cloud file storage is now a standard requirement for modern web applications. Whether you are building a social media platform, blogging system, e-commerce site"  
author: "Anubhav Sharma"  
published: 2026-05-11  
updated: 2026-05-12  
canonical: https://answers.mindstick.com/blog/284/implement-azure-blob-storage-using-presigned-url-in-dot-net-core-and-javascript  
category: "software"  
tags: ["software development", "software"]  
reading_time: 6 minutes  

---

# Implement Azure Blob Storage Using Presigned URL in .NET Core and JavaScript

Cloud file storage is now a standard requirement for modern [web applications](https://www.mindstick.com/blog/11464/improve-your-understanding-of-web-applications). Whether you are building a [social media](https://www.mindstick.com/articles/156919/how-can-social-media-be-used-for-digital-marketing) platform, blogging system, e-commerce site, or enterprise dashboard, users expect fast and secure file uploads.

One of the best ways to securely upload files to Azure Blob Storage is by using **Presigned URLs**, commonly known in Azure as **SAS (Shared Access Signature) URLs**.

Instead of uploading files through your server, the backend generates a temporary secure upload URL, and the frontend uploads directly to Azure Blob Storage.

This approach improves:

- Performance
- Security
- Scalability
- Server resource usage

According to [Microsoft Learn Azure SAS Documentation](https://learn.microsoft.com/en-us/azure/storage/common/storage-sas-overview?source=recommendations), SAS provides delegated and time-limited access to Azure Storage resources.

## What is a Presigned URL (SAS URL)?

A SAS URL is a temporary URL that grants limited access to a blob or container.

The URL contains:

- Expiration time
- Allowed operations
- Resource path
- Security signature

Example:

```plaintext
https://myaccount.blob.core.windows.net/uploads/image.png?
sv=2024-01-01&
sr=b&
sig=xxxxx
```

The frontend can use this URL to upload files directly without exposing Azure credentials.

![Implement Azure Blob Storage Using Presigned URL in .NET Core and JavaScript](https://answers.mindstick.com/blogs/cc5d3303-78b9-4859-9a57-eaad317c75fe/images/582331c0-9ec3-4d73-a83d-576afb7c1be3.png)

## Why Use SAS URLs?

## Traditional Upload Flow

```plaintext
Browser → Your Server → Azure Blob Storage
```

Problems:

- Large server bandwidth usage
- Slow uploads
- High server memory consumption
- Difficult scaling

## SAS Upload Flow

```plaintext
Browser → Azure Blob Storage
          ↑
     SAS URL from API
```

Benefits:

- Faster uploads
- Reduced server load
- Better scalability
- Secure temporary access
- Ideal for large files

## Azure Blob Storage Architecture

```plaintext
Frontend (JavaScript)
        ↓
ASP.NET Core API
        ↓
Generate SAS URL
        ↓
Frontend uploads directly
        ↓
Azure Blob Storage
```

## Step 1: Create Azure Storage Account

Go to:

- [Microsoft Azure Portal](https://portal.azure.com/)

Create:

- Storage Account
- Blob Container
- Enable Blob Storage

Example container:

```plaintext
uploads
```

## Step 2: Install NuGet Package

Install Azure Blob SDK.

```plaintext
dotnet add package Azure.Storage.Blobs
```

## Step 3: Add Configuration

## appsettings.json

```plaintext
{
  "AzureBlob": {
    "ConnectionString": "YOUR_CONNECTION_STRING",
    "ContainerName": "uploads",
    "AccountName": "youraccount",
    "AccountKey": "yourkey"
  }
}
```

## Step 4: Create SAS Service

## BlobStorageService.cs

```cs
using Azure.Storage;
using Azure.Storage.Blobs;
using Azure.Storage.Sas;

public class BlobStorageService
{
    private readonly IConfiguration _configuration;

    public BlobStorageService(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    public string GenerateUploadSasUrl(string fileName)
    {
        var accountName = _configuration["AzureBlob:AccountName"];
        var accountKey = _configuration["AzureBlob:AccountKey"];
        var containerName = _configuration["AzureBlob:ContainerName"];

        var credential = new StorageSharedKeyCredential(
            accountName,
            accountKey
        );

        var blobUri = new Uri(
            $"https://{accountName}.blob.core.windows.net/{containerName}/{fileName}"
        );

        BlobSasBuilder sasBuilder = new BlobSasBuilder
        {
            BlobContainerName = containerName,
            BlobName = fileName,
            Resource = "b",
            StartsOn = DateTimeOffset.UtcNow,
            ExpiresOn = DateTimeOffset.UtcNow.AddMinutes(15)
        };

        sasBuilder.SetPermissions(BlobSasPermissions.Create |
                                  BlobSasPermissions.Write);

        var sasToken = sasBuilder.ToSasQueryParameters(credential).ToString();

        return $"{blobUri}?{sasToken}";
    }
}
```

## Step 5: Create API Endpoint

## UploadController.cs

```cs
using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/upload")]
public class UploadController : ControllerBase
{
    private readonly BlobStorageService _blobStorageService;

    public UploadController(BlobStorageService blobStorageService)
    {
        _blobStorageService = blobStorageService;
    }

    [HttpGet("sas-url")]
    public IActionResult GetSasUrl(string fileName)
    {
        var sasUrl = _blobStorageService.GenerateUploadSasUrl(fileName);

        return Ok(new
        {
            uploadUrl = sasUrl
        });
    }
}
```

## Step 6: Register Service

## Program.cs

```cs
builder.Services.AddScoped<BlobStorageService>();
```

## Step 7: Frontend JavaScript Upload

## HTML

```html
<input type="file" id="fileInput" />
<button onclick="uploadFile()">Upload</button>
```

## JavaScript

```javascript
async function uploadFile() {

    const fileInput = document.getElementById("fileInput");

    const file = fileInput.files[0];

    if (!file) {
        alert("Select file");
        return;
    }

    // Step 1: Get SAS URL
    const response = await fetch(
        `/api/upload/sas-url?fileName=${encodeURIComponent(file.name)}`
    );

    const data = await response.json();

    // Step 2: Upload directly to Azure
    const uploadResponse = await fetch(data.uploadUrl, {
        method: "PUT",
        headers: {
            "x-ms-blob-type": "BlockBlob",
            "Content-Type": file.type
        },
        body: file
    });

    if (uploadResponse.ok) {
        alert("File uploaded successfully");
    } else {
        alert("Upload failed");
    }
}
```

## How It Works

## Backend

- Generates secure temporary URL
- Defines permissions
- Sets expiration time

## Frontend

- Requests upload URL
- Uploads file directly to Azure Blob Storage
- No file passes through your API server.

## Important SAS Permissions

| Permission | Meaning |
| --- | --- |
| Read | Download file |
| Write | Modify blob |
| Create | Upload new blob |
| Delete | Remove blob |
| List | List container files |

Use minimum required permissions.

Microsoft recommends limiting permissions and expiration scope for security.

## Production Security Best Practices

## 1. Use Short Expiration

Good:

```cs
ExpiresOn = DateTimeOffset.UtcNow.AddMinutes(10)
```

Bad:

```cs
ExpiresOn = DateTimeOffset.UtcNow.AddYears(1)
```

## 2. Generate URLs Server-Side Only

Never expose:

- Storage account key
- [Connection string](https://www.mindstick.com/articles/17/connection-string)

## 3. Validate File Types

Example:

```cs
string[] allowedExtensions = { ".jpg", ".png", ".pdf" };
```

## 4. Use Random File Names

Avoid collisions.

```cs
var fileName = $"{Guid.NewGuid()}{extension}";
```

## 5. Restrict Permissions

Only grant required access.

Example:

```cs
BlobSasPermissions.Create | BlobSasPermissions.Write
```

NOT:

```cs
BlobSasPermissions.All
```

## Large File Upload Optimization

For large files:

- Use chunk uploads
- Use parallel uploads
- Use resumable uploads

Azure Blob Storage supports block-based uploads efficiently.

## Common Errors

## 1. Signature Did Not Match

Usually caused by:

- Wrong account key
- Invalid blob path
- Expired SAS token

This is a common developer issue discussed in Azure community forums.

## 2. CORS Error

Configure Azure Storage CORS.

Azure Portal:

```plaintext
Storage Account
→ Resource Sharing (CORS)
```

Add:

```plaintext
Allowed Origins: *
Allowed Methods: PUT, GET
Allowed Headers: *
```

## 3. Authentication Failed

Check:

- SAS expiration
- Blob permissions
- Container name

## Advanced Production Architecture

```plaintext
Client
   ↓
API Gateway
   ↓
Auth Validation
   ↓
Generate SAS URL
   ↓
Azure Blob Storage
```

Optional additions:

- CDN
- Virus scanning
- Queue processing
- Thumbnail generation

## User Delegation SAS (Recommended)

Microsoft recommends using **User Delegation SAS** instead of account-key SAS because it uses Microsoft Entra credentials for better security.

Benefits:

- Better security
- No direct account key exposure
- RBAC integration

## Real-World Use Cases

- **Social Media Platforms**

   - Image uploads
   - Video uploads

- **Blogging Systems**

   - Thumbnail uploads
   - PDF attachments

- **E-Commerce**

   - Product image uploads

- **Enterprise Apps**

   - Document management
   - Report uploads

## Performance Benefits

| Traditional Upload | SAS Upload |
| --- | --- |
| High server load | Minimal server load |
| Slow | Faster |
| Expensive scaling | Better scalability |
| Large memory usage | Direct [cloud](https://www.mindstick.com/services/cloud-development) upload |

## Conclusion

Using Azure Blob Storage with SAS URLs is one of the best approaches for modern scalable applications.

It provides:

- Secure uploads
- Faster performance
- Reduced backend load
- Better scalability
- Cloud-native architecture

The combination of:

- [ASP.NET Core](https://www.mindstick.com/articles/326150/asp-dot-net-core-why-it-is-best-suited-for-banking-and-finance-sectors) backend
- JavaScript frontend
- Azure Blob Storage
- creates a highly scalable and production-ready upload system suitable for enterprise applications.

For official Azure documentation and SDK examples, see:

[Azure SAS Overview Documentation](https://learn.microsoft.com/en-us/azure/storage/common/storage-sas-overview?source=recommendations)

[Azure Blob SAS JavaScript Guide](https://learn.microsoft.com/en-us/azure/storage/blobs/sas-service-create-javascript)

[Azure Blob Storage JavaScript SDK](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-account-delegation-sas-create-javascript)

---

Original Source: https://answers.mindstick.com/blog/284/implement-azure-blob-storage-using-presigned-url-in-dot-net-core-and-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.