Tech Journey With Gagan: How to open Blob Files in New Tab using dot net and angular

Step 1: Add This code to Angular app

Angular code


  async openImageInNewTab(url:any){
    
   await this.blobService.getFile(url).then(res=>{
      if(res.success){
        this.openFile(res.result.fileContent,res.result.contentType);
      }
    })
  }

  openFile(base64Data: string, mimeType: string): void {
    const fileUrl = `data:${mimeType};base64,${base64Data}`;
    const newTab = window.open(); // Open a new tab
    if (newTab) {
      if (mimeType.startsWith('image/')) {
        newTab.document.write(`
          <html>
            <head><title>Image Viewer</title></head>
            <body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;">
              <img src="${fileUrl}" style="max-width: 100%; max-height: 100%;" />
            </body>
          </html>
        `);
      } else if (mimeType === 'application/pdf') {
        newTab.document.write(`
          <html>
            <head><title>PDF Viewer</title></head>
            <body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;">
              <embed src="${fileUrl}" style="width: 100%; height: 100%;" type="application/pdf" />
            </body>
          </html>
        `);
      } else {
        // For unsupported types, force download
        const link = document.createElement('a');
        link.href = fileUrl;
        link.download = 'file';
        link.click();
      }
      newTab.document.close();
    } else {
      console.error('Failed to open a new tab.');
    }
  }

Html Side Code

HTML Code

<!-- Paste your HTML, CSS, or JS code here -->
<button (click)="yourbloblink" class="blue-text" >view</button>

Step 2: Add DotNet Code To Download blob File.

Dot Net Code

public async Task<IActionResult> DownloadBlobFileAsync(string blobUrl)
{
    // Parse the Blob URL
    Uri blobUri = new Uri(blobUrl);
    string[] segments = blobUri.AbsolutePath.TrimStart('/').Split('/');
    if (segments.Length < 2)
    {
        throw new ArgumentException("Invalid Blob URL.", nameof(blobUrl));
    }

    // Extract container name and blob name
    string containerName = segments[0];
    string blobName = string.Join('/', segments[1..]);

    BlobContainerClient containerClient = _blobServiceClient.GetBlobContainerClient(containerName.ToLower());
    if (!(await containerClient.ExistsAsync()))
    {
        throw new ArgumentException("Container does not exist.", nameof(containerName));
    }

    BlobClient blobClient = containerClient.GetBlobClient(blobName);

    // Check if the blob exists
    if (!await blobClient.ExistsAsync())
    {
        return new NotFoundObjectResult("Blob not found.");
    }

    // Download the blob
    var response = await blobClient.DownloadAsync();

    // Determine content type using GetMimeType method
    string contentType = response.Value.Details.ContentType ?? GetMimeType(blobName);

    // Create a new memory stream to hold blob content
    var memoryStream = new MemoryStream();
    await response.Value.Content.CopyToAsync(memoryStream);
    memoryStream.Position = 0;

    // Return the file as a FileStreamResult without disposing the stream here
    return new FileStreamResult(memoryStream, contentType)
    {
        FileDownloadName = blobName
    };
}

private string GetMimeType(string fileName)
{
    var extension = Path.GetExtension(fileName).ToLowerInvariant();
    return extension switch
    {
        ".jpg" or ".jpeg" => "image/jpeg",
        ".png" => "image/png",
        ".gif" => "image/gif",
        ".bmp" => "image/bmp",
        ".tif" or ".tiff" => "image/tiff",
        ".pdf" => "application/pdf",
        ".txt" => "text/plain",
        ".html" or ".htm" => "text/html",
        ".css" => "text/css",
        ".js" => "application/javascript",
        ".json" => "application/json",
        ".xml" => "application/xml",
        _ => MediaTypeNames.Application.Octet
    };
}

Note: use this in your api service

Tech Journey With Gagan

Monday, January 6, 2025

How to open Blob Files in New Tab using dot net and angular

Angular code

HTML Code

Dot Net Code

No comments:

Post a Comment

How to make Scheduler with Azure Queue using .net

Labels