Decoding a base64 file in Javascript/jQuery for download

Question

Today I have been experimenting with SQL binary objects. I started by storing an image in a table, making an AJAX request for a base64 encoding of the image, and displaying it with.

<img src="data:image/jpeg;base64,' + base64imageReturnedWithAjax + '">')

The image displays fine.

The web project I'm working on also requires file downloads (PDF, mainly) - great, I thought, I'll store the PDF as a SQL binary object too, collect it from the server in the same way and then somehow magically decode it for download at the other end.

Help!

I first tried to decode it using a jQuery base64 decoder (https://github.com/carlo/jquery-base64) with:

$.base64.decode(base64fileReturnedWithAjax)

This generates the following error in the console:

Uncaught Cannot decode base64
_getbyte64
_decode
$.ajax.success
f.Callbacks.o
f.Callbacks.p.fireWith
w
f.support.ajax.f.ajaxTransport.send.d

My question is, therefore: Is this a feasible way to handle file downloads? if so, how! and if not, is there an advised way to allow a file to be downloaded from a SQL table?

Kind regards, ATfPT

EDIT: If it helps, this is the webmethod that retrieves and sends the file from the db/server (in VB.NET). Fileblob is the binary object within the database.

    'Having connected to the table
    While lrd.Read()
        Dim fileBytes = CType(lrd("Fileblob"), Byte())
        Dim stream = New MemoryStream(fileBytes, 0, fileBytes.Length)
        Dim base64String = Convert.ToBase64String(stream.ToArray())
        document.Add(base64String)
    End While

    Dim serializer As New JavaScriptSerializer()
    Dim returnVal As String = serializer.Serialize(document)

    Return returnVal

Tim M. · Accepted Answer · 2012-05-11T08:15:18.470

Inline base 64 works well with images (as long as they are small), so you are probably on the right track there. However, I don't think you are going down the right path for PDFs or most other blobs (varbinary(max) in SQL Server).

The way I would do this is to create a HTTP handler (Controller, ASHX, ASPX, etc.) which sets the correct HTTP headers and passes the data retrieved from SQL Server to Response.BinaryWrite() as a byte array. This is fast, clean, and reliable. It also requires very little code.

By comparison, base 64 encoding increases file size, and I'm not aware of any reliable means to process a base 64 string client-side and instruct the browser to open it with the correct application. Plus, the encoding/decoding is completely unnecessary overhead (which may be significant on a large file).

Incidentally, you could also use a HTTP handler for your images. Or, you could continue you use base 64 but serve all your images in a single JSON object which would reduce your request count (at the expense of more client-processing code).

HTTP Handler Example

I stripped down some production code into just the part which handles PDFs. This should work with minimal modification.

Start by adding a Generic Handler to your project in Visual Studio. It will have an ASHX extension.

public partial class RequestHandler : IHttpHandler
{
    public void ProcessRequest( HttpContext context ) {
        HttpRequest request = context.Request;
        HttpResponse response = context.Response;

        byte[] bytes = null; // get from your database
        string fileName = null; // get from database or put something generic here like "file.pdf"

        response.ContentType = "application/pdf";
        response.AddHeader( "content-disposition", "inline;filename=" + fileName );
        response.AddHeader( "Content-Length", bytes.Length.ToString() );

        response.Buffer = true;
        response.BinaryWrite( bytes );
        response.Flush();
    }

    public bool IsReusable {
        get {
            return true;
        }
    }
}

To invoke this code, you can simply link to it e.g. <a href="RequestHandler.ashx?id=abc">Download</a>. You can also put this code inside an ASPX page and trigger it in response to a button click, page event, etc.

Hi Tim, all of the images are currently being served in a single JSON object as you suggested, good to know this is an acceptable practice. I will do some reading on HTTP handlers and Response.BinaryWrite() and see how I get on, these words are currently alien to me! Thanks for your help, I gave you an upvote but will wait to vote you the correct answer until I've read enough to be confident that you are correct (which I'm almost positive you are)! — Dom Vinyard, May 11 '12 at 08:03
I've been trying to find a decent example of an HTTP Handler which serves PDFs (I do it all the time). The closest I could find was http://stackoverflow.com/questions/10206011/how-to-open-files-stored-as-bytes-in-database-with-http-handler — Tim M., May 11 '12 at 08:05

score 0 · Answer 2 · answered May 11 '12 at 08:06

If I follow what your goal is, then the issue isn't with the decoding, it's with the fact that javascript can't trigger a download. This is because it can't send the browser (itself) a content-disposition http header.

You could do one of the following (that I can think of):

Use a traditional object element to embed the PDF. You could have that get generated dynamically with jquery. And set the object source URL to the data: URI.
(This is just a theory), you could use window.location.assign('data:xxx) which would either take the user to the PDF or trigger the download, depending on how PDFs with no content-disposition are handled.

I'm pretty sure, however, that if an ajax request gets a content-disposition of download in the response header, it will bubble up and the user is presented with the download option, which would eliminate the need for the data schema.

Decoding a base64 file in Javascript/jQuery for download

2 Answers2

HTTP Handler Example

Linked