Generate a base64 encoded string from a file and send it as a response using an ASP.NET httpHandler after receiving an AJAX request

Question

Generate a base64 encoded string from a file and send it as a response using an ASP.NET httpHandler after receiving an AJAX request

Looking for a way to download various file types using AJAX.

I came up with the idea of sending get requests with the file name as a query string via AJAX, receiving the response as a base64 string, and then converting it into a blob object to be downloaded/saved using an a tag with a download attribute.

Can someone assist me in finding an optimized method/code for converting a file to a base64 string and then back to a blob?

javascript asp.net ajax vb.net httphandler

Answer 1

Answer №1

Check out the ASP.Net httpHandler code snippet below:

Imports System
Imports System.Web
Imports System.IO
Public Class FileDownload : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    Dim Request As HttpRequest = context.Request
    Dim Response As HttpResponse = context.Response
    Dim serverFile As String = Request.QueryString("filename")
    Dim filePath As String = String.Empty
    filePath = context.Server.MapPath("~") & "\" & serverFile
    Dim file As New System.IO.FileInfo(filePath)
    Try
        If (file.Exists) Then
            Response.Clear()
            Response.ClearContent()
            Using reader As New FileStream(filePath, FileMode.Open, IO.FileAccess.Read, IO.FileShare.Read)
                Dim buffer As Byte() = New Byte(reader.Length - 1) {}
                reader.Read(buffer, 0, CInt(reader.Length))
                Response.Write(Convert.ToBase64String(buffer))
            End Using
            Response.Flush()
            Response.End()
        Else
            Response.Write("File Not Found!")
            Response.StatusCode = 500
        End If
    Catch ex As Exception
        Response.Write(ex.ToString)
        Response.StatusCode = 500
        context.ApplicationInstance.CompleteRequest()
    End Try
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get

The Javascript function is triggered with the httphandler's application path as the URL and the client-side filename as a parameter.

function downloadFileByAjax(filename, url) {
$.ajax({
    type: 'GET',
    url: url,
    responseType: 'arraybuffer',
    downloadid: filename,
    success: function (result, status, xhr) {
        var octetStreamMime = 'application/octet-stream';
        var filename = this.downloadid;
        var contentType = xhr.getResponseHeader('content-type') || octetStreamMime;
        var a = document.createElement('a');
        var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
        if (urlCreator && window.Blob && ('download' in a) && window.atob) {
            var blob = base64ToBlob(result, contentType);
            var url = window.URL.createObjectURL(blob);
            a.setAttribute('href', url);
            a.setAttribute("download", filename);
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(event);
            //window.URL.revokeObjectURL(url);
        }
    },
    error: function (xhr, msg, error) {
        console.log(msg);
    },
    complete: function (xhr, status) {
        //console.log('completed');
    }
});
}
function base64ToBlob(base64, mimetype, slicesize) {
if (!window.atob || !window.Uint8Array) {
    console.log('The current browser does not have the atob function. Cannot continue');
    return null;
}
mimetype = mimetype || '';
slicesize = slicesize || 512;
var bytechars = atob(base64);
var bytearrays = [];
for (var offset = 0; offset < bytechars.length; offset += slicesize) {
    var slice = bytechars.slice(offset, offset + slicesize);
    var bytenums = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
        bytenums[i] = slice.charCodeAt(i);
    }
    var bytearray = new Uint8Array(bytenums);
    bytearrays[bytearrays.length] = bytearray;
}
return new Blob(bytearrays, { type: mimetype });
}

Answer 2

Check out the ASP.Net httpHandler code snippet below:

Imports System
Imports System.Web
Imports System.IO
Public Class FileDownload : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    Dim Request As HttpRequest = context.Request
    Dim Response As HttpResponse = context.Response
    Dim serverFile As String = Request.QueryString("filename")
    Dim filePath As String = String.Empty
    filePath = context.Server.MapPath("~") & "\" & serverFile
    Dim file As New System.IO.FileInfo(filePath)
    Try
        If (file.Exists) Then
            Response.Clear()
            Response.ClearContent()
            Using reader As New FileStream(filePath, FileMode.Open, IO.FileAccess.Read, IO.FileShare.Read)
                Dim buffer As Byte() = New Byte(reader.Length - 1) {}
                reader.Read(buffer, 0, CInt(reader.Length))
                Response.Write(Convert.ToBase64String(buffer))
            End Using
            Response.Flush()
            Response.End()
        Else
            Response.Write("File Not Found!")
            Response.StatusCode = 500
        End If
    Catch ex As Exception
        Response.Write(ex.ToString)
        Response.StatusCode = 500
        context.ApplicationInstance.CompleteRequest()
    End Try
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get

The Javascript function is triggered with the httphandler's application path as the URL and the client-side filename as a parameter.

function downloadFileByAjax(filename, url) {
$.ajax({
    type: 'GET',
    url: url,
    responseType: 'arraybuffer',
    downloadid: filename,
    success: function (result, status, xhr) {
        var octetStreamMime = 'application/octet-stream';
        var filename = this.downloadid;
        var contentType = xhr.getResponseHeader('content-type') || octetStreamMime;
        var a = document.createElement('a');
        var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
        if (urlCreator && window.Blob && ('download' in a) && window.atob) {
            var blob = base64ToBlob(result, contentType);
            var url = window.URL.createObjectURL(blob);
            a.setAttribute('href', url);
            a.setAttribute("download", filename);
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(event);
            //window.URL.revokeObjectURL(url);
        }
    },
    error: function (xhr, msg, error) {
        console.log(msg);
    },
    complete: function (xhr, status) {
        //console.log('completed');
    }
});
}
function base64ToBlob(base64, mimetype, slicesize) {
if (!window.atob || !window.Uint8Array) {
    console.log('The current browser does not have the atob function. Cannot continue');
    return null;
}
mimetype = mimetype || '';
slicesize = slicesize || 512;
var bytechars = atob(base64);
var bytearrays = [];
for (var offset = 0; offset < bytechars.length; offset += slicesize) {
    var slice = bytechars.slice(offset, offset + slicesize);
    var bytenums = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
        bytenums[i] = slice.charCodeAt(i);
    }
    var bytearray = new Uint8Array(bytenums);
    bytearrays[bytearrays.length] = bytearray;
}
return new Blob(bytearrays, { type: mimetype });
}

Answer 3

Answer №2

If you want to change a file into a base64 string, you can use the given code snippet

string data;
using (FileStream fs = new FileStream(path + fileName, FileMode.Open, FileAccess.Read)) {
    byte[] buffer = new byte[fs.Length];
    fs.Read(buffer, 0, (int)fs.Length);
    data = Convert.ToBase64String(buffer);
    fs.Close();
}
return data;

In the ajax call's success function, you can convert the string into a blob with this code

var byteCharacters = atob(data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = null;
blob = new Blob([byteArray], { type: 'text/plain' });
blob = new Blob([byteArray], { type: 'application/pdf;base64' });
var blobUrl = URL.createObjectURL(blob);

Specify the type attribute for the blob according to the file format and then set the anchor tag's source as blobUrl

Answer 4

If you want to change a file into a base64 string, you can use the given code snippet

string data;
using (FileStream fs = new FileStream(path + fileName, FileMode.Open, FileAccess.Read)) {
    byte[] buffer = new byte[fs.Length];
    fs.Read(buffer, 0, (int)fs.Length);
    data = Convert.ToBase64String(buffer);
    fs.Close();
}
return data;

In the ajax call's success function, you can convert the string into a blob with this code

var byteCharacters = atob(data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = null;
blob = new Blob([byteArray], { type: 'text/plain' });
blob = new Blob([byteArray], { type: 'application/pdf;base64' });
var blobUrl = URL.createObjectURL(blob);

Specify the type attribute for the blob according to the file format and then set the anchor tag's source as blobUrl

Generate a base64 encoded string from a file and send it as a response using an ASP.NET httpHandler after receiving an AJAX request

Answer №1

Answer №2

Similar questions

Exploring ways to cycle through dynamically loaded checkboxes with AJAX?

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

A simple guide on how to display a child object in a materialUI select dropdown from a parent object

Determine the Total of a Column in jqgrid

Is there an issue with the initial positioning of the tooltip in the seiyria angular-bootstrap slider?

Creating a dynamic search feature that displays results from an SQL database with a dropdown box

My function is not working with jQuery's .append method

Passing parameters to an external function in order to display a message is proving difficult. An error of type TypeError is being encountered, specifying that the Class constructor AlertMessage cannot be called without using the

Is it possible for type constraints to be exclusive rather than inclusive in nature?

Convert web address object to URL string

Display the picture for a few moments, then conceal it. A button will appear to reveal the following image after a short period

Minimize white spaces when validating input fields in a form using Javascript

Watch for changes in a nested collection in Angular using $scope.$watch

Mastering server requests in Angular 5

The parsing of source maps fails due to issues with the .htaccess file

The jQuery UI Tab is failing to scroll within its container

Encountering a "Duplicate identifier error" when transitioning TypeScript code to JavaScript

Populate a JSON table in React with checkboxes and automatically mark them based on the JSON data

The most effective method for dynamically loading a view in Drupal 8 using contextual filters

a guide on dynamically determining the value within a text input field