Efficient File Management on Azure Blob Storage: CRUD Operations and Upload Strategies

    private readonly BlobServiceClient _blobServiceClient;

    public BlobStorageService(IConfiguration configuration)
    {
        var connectionString = configuration.GetConnectionString("AzureStorage");
        _blobServiceClient = new BlobServiceClient(connectionString);
    }

      var containerClient = _blobServiceClient.GetBlobContainerClient(containerName);
        await containerClient.CreateIfNotExistsAsync();

    [HttpPost("upload")] // POST api/blob/upload
    [Consumes("multipart/form-data")]
    public async Task<IActionResult> UploadBlobAsync([FromForm] BlobUploadRequest request)
    {
        using var stream = request.File.OpenReadStream();
        await _blobStorageService.UploadBlobAsync(request.ContainerName, request.BlobName, stream);
        return Ok();
    }

public class BlobUploadRequest
{
    public string ContainerName { get; set; }
    public string BlobName { get; set; }
    public IFormFile File { get; set; }
}

    public async Task UploadBlobAsync(string containerName, string blobName, Stream content)
    {
        if (!IsValidContainerName(containerName))
        {
            throw new ArgumentException("Invalid container name.");
        }
        string blobNameWithTimestamp = GenerateBlobNameWithTimestamp(blobName);

        var containerClient = _blobServiceClient.GetBlobContainerClient(containerName);
        await containerClient.CreateIfNotExistsAsync();

        var blobClient = containerClient.GetBlobClient(blobNameWithTimestamp);
        await blobClient.UploadAsync(content, overwrite: true);
    }

[HttpPost("upload-chunk")]
 public async Task<IActionResult> UploadChunk(
        [FromForm] IFormFile chunk,
        [FromForm] string containerName,
        [FromForm] string blobName,
        [FromForm] int chunkIndex,
        [FromForm] int totalChunks)
    {
        if (chunk == null || chunk.Length == 0)
        {
            return BadRequest(new { Message = "Chunk is missing or empty." });
        }

        try
        {
            // Stream the chunk to the service
            using var stream = chunk.OpenReadStream();
            await _blobStorageService.UploadChunkAsync(containerName, blobName, stream, chunkIndex, totalChunks);

            return Ok(new { Message = $"Chunk {chunkIndex + 1}/{totalChunks} uploaded successfully." });
        }
        catch (Exception ex)
        {
            return StatusCode(500, new { Message = "Error uploading chunk.", Error = ex.Message });
        }
}

    public async Task UploadChunkAsync(string containerName, string blobName, Stream chunkData, int chunkIndex, int totalChunks)
    {
        if (!IsValidContainerName(containerName))
        {
            throw new ArgumentException("Invalid container name.");
        }

        // Get the container client
        var containerClient = _blobServiceClient.GetBlobContainerClient(containerName);
        await containerClient.CreateIfNotExistsAsync();

        // Get the block blob client
        var blockBlobClient = containerClient.GetBlockBlobClient(blobName);

        // Generate a unique block ID for each chunk
        var blockId = Convert.ToBase64String(Encoding.UTF8.GetBytes(chunkIndex.ToString("d6")));

        // Stage the chunk as a block
        await blockBlobClient.StageBlockAsync(blockId, chunkData);

        // If this is the last chunk, commit the block list
        if (chunkIndex + 1 == totalChunks)
        {
            // Create a list of block IDs
            var blockList = Enumerable.Range(0, totalChunks)
                .Select(index => Convert.ToBase64String(Encoding.UTF8.GetBytes(index.ToString("d6"))))
                .ToList();

            // Commit the block list to assemble the final blob
            await blockBlobClient.CommitBlockListAsync(blockList);
        }
    }

    [HttpPost("stream-upload")]
    public async Task<IActionResult> StreamUploadAsync()
    {
        try
        {
            var containerName = Request.Headers["Container-Name"].ToString();
            var blobName = Request.Headers["Blob-Name"].ToString();

            if (string.IsNullOrEmpty(containerName) || string.IsNullOrEmpty(blobName))
            {
                return BadRequest(new { Message = "Container-Name and Blob-Name headers are required." });
            }

            // Stream data from the client directly to Azure Blob Storage
            using var stream = Request.Body;

            // Infer the Content-Type

            await _blobStorageService.UploadBlobAsync(containerName, blobName, stream);

            return Ok(new { Message = "File uploaded successfully." });
        }
        catch (Exception ex)
        {
            return StatusCode(500, new { Message = "Error uploading file.", Error = ex.Message });
        }
    }

    public async Task UploadBlobAsync(string containerName, string blobName, Stream content)
    {
        if (!IsValidContainerName(containerName))
        {
            throw new ArgumentException("Invalid container name.");
        }
        string blobNameWithTimestamp = GenerateBlobNameWithTimestamp(blobName);

        var containerClient = _blobServiceClient.GetBlobContainerClient(containerName);
        await containerClient.CreateIfNotExistsAsync();

        var blobClient = containerClient.GetBlobClient(blobNameWithTimestamp);
        await blobClient.UploadAsync(content, overwrite: true);
    }

[HttpPost("get-upload-url")]
public async Task<IActionResult> GetLargeFileUploadUrl([FromBody] LargeFileUploadRequest request)
{
    try
    {
        // Generate a SAS URL for the client to upload directly to Azure
        var sasDetails = await _blobStorageService.GetBlobSasUriAsync(
            request.ContainerName,
            request.BlobName,
            DateTimeOffset.UtcNow.AddHours(1));

        return Ok(new LargeFileUploadResponse 
        { 
            SasUri = sasDetails.SasUri,
            Expiry = sasDetails.Expiry
        });
    }
    catch (Exception ex)
    {
        return StatusCode(500, new { Message = "Error generating upload URL.", Error = ex.Message });
    }
}

public async Task<BlobSasDetails> GetBlobSasUriAsync(string containerName, string blobName, DateTimeOffset expiryTime)
{
    var containerClient = _blobServiceClient.GetBlobContainerClient(containerName);
    await containerClient.CreateIfNotExistsAsync();
    
    var blobClient = containerClient.GetBlobClient(blobName);
    
    // Create SAS token with write permission
    var sasBuilder = new BlobSasBuilder
    {
        BlobContainerName = containerName,
        BlobName = blobName,
        Resource = "b",
        ExpiresOn = expiryTime
    };
    
    sasBuilder.SetPermissions(BlobSasPermissions.Write | BlobSasPermissions.Create);
    
    var sasToken = sasBuilder.ToSasQueryParameters(
        new StorageSharedKeyCredential(_blobServiceClient.AccountName, 
        GetAccountKeyFromConnectionString())).ToString();
    
    return new BlobSasDetails
    {
        SasUri = blobClient.Uri + "?" + sasToken,
        Expiry = expiryTime
    };
}

async uploadWithSAS(file: File): Promise<void> {
  // Step 1: Request SAS URL from your server
  const response = await this.http.post<SasResponse>('/api/blob/get-upload-url', {
    containerName: 'uploads',
    blobName: file.name
  }).toPromise();
  
  // Step 2: Upload directly to Azure using the SAS URL
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('PUT', response.sasUri, true);
    xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
    xhr.setRequestHeader('Content-Type', file.type);
    
    // Track progress
    xhr.upload.onprogress = (e) => {
      const percentComplete = Math.round((e.loaded / e.total) * 100);
      this.uploadProgress.next(percentComplete);
    };
    
    xhr.onload = () => {
      if (xhr.status === 201) {
        resolve();
      } else {
        reject(`Upload failed: ${xhr.status}`);
      }
    };
    
    xhr.onerror = () => reject('Upload failed due to network error');
    xhr.send(file);
  });
}

    [HttpGet("list")] // GET api/blob/list
    public async Task<IActionResult> GetAllBlobsAsync(string containerName, string path = null)
    {
        var blobs = await _blobStorageService.GetAllBlobsAsync(containerName, path, true, DateTimeOffset.UtcNow.AddHours(1));
        return Ok(blobs);
    }

    public async Task<List<BlobDetails>> GetAllBlobsAsync(string containerName, string path = null, bool includeSasUri = false, DateTimeOffset? sasExpiryTime = null)
    {
        var containerClient = _blobServiceClient.GetBlobContainerClient(containerName);
        var blobs = containerClient.GetBlobsAsync(prefix: path);
        var blobDetailsList = new List<BlobDetails>();

        await foreach (var blobItem in blobs)
        {
            var blobDetails = new BlobDetails
            {
                Name = blobItem.Name,
                CreatedOn = blobItem.Properties.CreatedOn,
                Metadata = blobItem.Metadata,
            };

            if (includeSasUri && sasExpiryTime.HasValue)
            {
                blobDetails.SasUri = await GetBlobSasUriAsync(containerName, blobItem.Name, sasExpiryTime.Value);
            }

            blobDetailsList.Add(blobDetails);
        }

        return blobDetailsList;
    }

    [HttpGet("download")] // GET api/blob/download
    public async Task<IActionResult> DownloadBlobAsync(string containerName, string blobName)
    {
        var stream = await _blobStorageService.DownloadBlobAsync(containerName, blobName);
        return File(stream, "application/octet-stream", blobName);
    }

   public async Task<Stream> DownloadBlobAsync(string containerName, string blobName)
    {
        var containerClient = _blobServiceClient.GetBlobContainerClient(containerName);
        var blobClient = containerClient.GetBlobClient(blobName);
        var downloadInfo = await blobClient.DownloadAsync();
        return downloadInfo.Value.Content;
    }

// storage.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpEventType, HttpHeaders, HttpRequest } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private apiUrl = '/api/blob';
  private uploadProgress = new Subject<number>();
  
  uploadProgress$ = this.uploadProgress.asObservable();

  constructor(private http: HttpClient) { }

  // 1. Standard File Upload
  uploadMultipartFormData(file: File, containerName: string): Observable<any> {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('containerName', containerName);
    formData.append('blobName', file.name);

    const req = new HttpRequest('POST', `${this.apiUrl}/upload`, formData, {
      reportProgress: true
    });

    return this.http.request(req).pipe(
      map(event => this.getEventMessage(event, file))
    );
  }

  // 2. Chunked Upload
  uploadFileChunked(file: File, containerName: string, chunkSize: number = 5 * 1024 * 1024): Observable<any> {
    const totalChunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;
    const uploadChunk$ = new Subject<any>();

    const processNextChunk = () => {
      if (currentChunk >= totalChunks) {
        uploadChunk$.complete();
        return;
      }

      const start = currentChunk * chunkSize;
      const end = Math.min(file.size, start + chunkSize);
      const chunk = file.slice(start, end);

      const formData = new FormData();
      formData.append('chunk', chunk, 'chunk');
      formData.append('containerName', containerName);
      formData.append('blobName', file.name);
      formData.append('chunkIndex', currentChunk.toString());
      formData.append('totalChunks', totalChunks.toString());

      this.http.post(`${this.apiUrl}/upload-chunk`, formData).subscribe(
        (response) => {
          currentChunk++;
          this.uploadProgress.next(Math.round((currentChunk / totalChunks) * 100));
          uploadChunk$.next({ progress: (currentChunk / totalChunks) * 100 });
          processNextChunk();
        },
        (error) => {
          uploadChunk$.error(error);
        }
      );
    };

    // Start the chunking process
    processNextChunk();
    return uploadChunk$.asObservable();
  }

  // 3. Stream Upload
  uploadFileStream(file: File, containerName: string): Observable<any> {
    const headers = new HttpHeaders({
      'Container-Name': containerName,
      'Blob-Name': file.name
    });

    const req = new HttpRequest('POST', `${this.apiUrl}/stream-upload`, file, {
      headers,
      reportProgress: true
    });

    return this.http.request(req).pipe(
      map(event => this.getEventMessage(event, file))
    );
  }

  // 4. SAS Direct Upload
  uploadLargeFile(file: File, containerName: string): Observable<any> {
    const sasUpload$ = new Subject<any>();
    
    // Step 1: Get SAS URL from server
    this.http.post<{sasUri: string, expiry: string}>(`${this.apiUrl}/get-upload-url`, {
      containerName,
      blobName: file.name
    }).subscribe(
      (response) => {
        // Step 2: Upload directly to Azure using the SAS URL
        const xhr = new XMLHttpRequest();
        xhr.open('PUT', response.sasUri, true);
        xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
        xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
        
        // Track progress
        xhr.upload.onprogress = (e) => {
          if (e.lengthComputable) {
            const percentComplete = Math.round((e.loaded / e.total) * 100);
            this.uploadProgress.next(percentComplete);
            sasUpload$.next({ progress: percentComplete });
          }
        };
        
        xhr.onload = () => {
          if (xhr.status === 201) {
            sasUpload$.next({ complete: true });
            sasUpload$.complete();
          } else {
            sasUpload$.error(`Upload failed: ${xhr.status}`);
          }
        };
        
        xhr.onerror = () => {
          sasUpload$.error('Upload failed due to network error');
        };
        
        xhr.send(file);
      },
      (error) => {
        sasUpload$.error(error);
      }
    );
    
    return sasUpload$.asObservable();
  }

  // List files in a container
  listFiles(containerName: string, path: string = null): Observable<any> {
    let url = `${this.apiUrl}/list?containerName=${containerName}`;
    if (path) {
      url += `&path=${path}`;
    }
    return this.http.get(url);
  }

  // Helper method to format upload progress events
  private getEventMessage(event: HttpEvent<any>, file: File) {
    switch (event.type) {
      case HttpEventType.UploadProgress:
        const progress = Math.round(100 * event.loaded / event.total);
        this.uploadProgress.next(progress);
        return { progress };
      
      case HttpEventType.Response:
        return { complete: true };
      
      default:
        return { progress: 0 };
    }
  }
}

// file-upload.component.ts
import { Component } from '@angular/core';
import { StorageService } from '../storage.service';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.scss']
})
export class FileUploadComponent {
  selectedFile: File = null;
  containerName: string = 'uploads';
  uploadProgress: number = 0;
  uploading: boolean = false;
  uploadMethod: string = 'standard';
  dragOver: boolean = false;
  
  uploadMethods = [
    { value: 'standard', label: 'Standard Upload', description: 'Best for small files' },
    { value: 'chunked', label: 'Chunked Upload', description: 'Better for large files' },
    { value: 'stream', label: 'Stream Upload', description: 'Memory efficient' },
    { value: 'sas', label: 'Direct Upload (SAS)', description: 'Fastest for very large files' }
  ];

  constructor(private storageService: StorageService) {
    this.storageService.uploadProgress$.subscribe(progress => {
      this.uploadProgress = progress;
    });
  }

  onFileSelected(event: any): void {
    if (event.target.files.length > 0) {
      this.selectedFile = event.target.files[0];
    }
  }

  onDrop(event: DragEvent): void {
    event.preventDefault();
    this.dragOver = false;
    
    if (event.dataTransfer.files.length > 0) {
      this.selectedFile = event.dataTransfer.files[0];
    }
  }

  onDragOver(event: DragEvent): void {
    event.preventDefault();
    this.dragOver = true;
  }

  onDragLeave(event: DragEvent): void {
    event.preventDefault();
    this.dragOver = false;
  }

  uploadFile(): void {
    if (!this.selectedFile) {
      alert('Please select a file first');
      return;
    }
    
    this.uploading = true;
    this.uploadProgress = 0;
    let upload$: Observable<any>;
    
    switch (this.uploadMethod) {
      case 'standard':
        upload$ = this.storageService.uploadMultipartFormData(this.selectedFile, this.containerName);
        break;
      case 'chunked':
        upload$ = this.storageService.uploadFileChunked(this.selectedFile, this.containerName);
        break;
      case 'stream':
        upload$ = this.storageService.uploadFileStream(this.selectedFile, this.containerName);
        break;
      case 'sas':
        upload$ = this.storageService.uploadLargeFile(this.selectedFile, this.containerName);
        break;
      default:
        upload$ = this.storageService.uploadMultipartFormData(this.selectedFile, this.containerName);
    }
    
    upload$.subscribe(
      (event) => {
        if (event.complete) {
          this.uploading = false;
          this.selectedFile = null;
          // Refresh file list or show success message
        }
      },
      (error) => {
        console.error('Upload error:', error);
        this.uploading = false;
      }
    );
  }
}

<!-- file-upload.component.html -->
<div class="upload-container">
  <h2>Upload Files to Azure Blob Storage</h2>
  
  <div 
    class="dropzone" 
    [class.active]="dragOver"
    [class.disabled]="uploading"
    (dragover)="onDragOver($event)" 
    (dragleave)="onDragLeave($event)" 
    (drop)="onDrop($event)">
    
    <div class="dropzone-content">
      <mat-icon>cloud_upload</mat-icon>
      <h3>Drag & Drop Files Here</h3>
      <p>Or click to browse files</p>
      
      <input 
        type="file" 
        id="fileInput" 
        [disabled]="uploading"
        (change)="onFileSelected($event)" 
        style="display: none;">
      
      <button 
        mat-raised-button 
        color="primary" 
        [disabled]="uploading"
        (click)="fileInput.click()">
        Select File
      </button>
    </div>
  </div>
  
  <div class="file-info" *ngIf="selectedFile">
    <h3>Selected File</h3>
    <p>
      <strong>Name:</strong> {{ selectedFile.name }}<br>
      <strong>Size:</strong> {{ selectedFile.size | fileSize }}<br>
      <strong>Type:</strong> {{ selectedFile.type || 'Unknown' }}
    </p>
  </div>
  
  <div class="upload-options">
    <h3>Upload Method</h3>
    <mat-radio-group [(ngModel)]="uploadMethod" [disabled]="uploading">
      <mat-radio-button 
        *ngFor="let method of uploadMethods" 
        [value]="method.value"
        class="upload-method-option">
        <strong>{{ method.label }}</strong>
        <small>{{ method.description }}</small>
      </mat-radio-button>
    </mat-radio-group>
  </div>
  
  <mat-form-field appearance="outline" class="container-input">
    <mat-label>Container Name</mat-label>
    <input matInput [(ngModel)]="containerName" [disabled]="uploading">
  </mat-form-field>
  
  <div class="upload-progress" *ngIf="uploading">
    <mat-progress-bar 
      mode="determinate" 
      [value]="uploadProgress">
    </mat-progress-bar>
    <p>{{ uploadProgress }}% Uploaded</p>
  </div>
  
  <div class="action-buttons">
    <button 
      mat-raised-button 
      color="primary" 
      [disabled]="!selectedFile || uploading"
      (click)="uploadFile()">
      <mat-icon>cloud_upload</mat-icon>
      Upload File
    </button>
  </div>
</div>