How do I view file in Edge when using ashx handler to read BLOB file from SQL table

173 Views Asked by At

I have JavaScript code that lists file names in a SQL table that also includes the BLOB for the file content. How do I display the file in Edge? I know for an image I can do the following:

$('#imgRequestImage').attr("src", "GetImageHandler.ashx?documentid=" + myDocumentID); where the image is part of the html page.

How do I view the image in a separate window? How do I view a PDF in a separate window?

Here is my ashx code:

Imports System.Web
Imports System.Web.Services
Imports System.Data.SqlClient

Public Class GetImageHandler
    Implements System.Web.IHttpHandler

    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        Dim documentid As String = context.Request.QueryString("documentid").ToString
        Using con As New SqlConnection(GetConnectionString("MyConnectionString"))
            Using cmd As New SqlCommand()
                cmd.CommandType = CommandType.StoredProcedure
                cmd.CommandText = "spDocumentByDocIDSelect"
                cmd.Parameters.AddWithValue("@pDocumentID", documentid)
                cmd.Connection = con
                con.Open()
                Dim sdr As SqlDataReader = cmd.ExecuteReader()
                If sdr.HasRows Then
                    While sdr.Read()
                        If Not String.IsNullOrEmpty(sdr(1).ToString) Then
                            Dim imageBytes As Byte() = DirectCast(sdr(2), Byte())
                            context.Response.ContentType = "image/*, application/pdf, text/*"
                            context.Response.BinaryWrite(imageBytes)
                        End If
                    End While
                Else
                    context.Response.StatusCode = 404
                End If
                con.Close()
            End Using
        End Using

    End Sub

    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
    Public Shared Function GetConnectionString(ByVal conName As String) As String
        Dim strReturn As New String("")
        strReturn = ConfigurationManager.ConnectionStrings(conName).ConnectionString
        'return the connection string to the calling method  
        Return strReturn
    End Function

End Class

here is what I tried in JavaScript code to call the handler and display in a separate window:

window.open("GetImageHandler.ashx?documentid=" + myDocumentID, "_blank");

When the window opens, it displays a bunch of characters and not the image or pdf.

How do I get the BLOB to display as an image or PDF in Edge?

1

There are 1 best solutions below

0
Xudong Peng On

I think this issue caused by this line:

context.Response.ContentType = "image/*, application/pdf, text/*"

Content-Type = "Content-Type" ":" media-type, and it takes a single media-type and cannot accept multiple. And you cannot set the header when using window.open(), but you can create an empty page and fill in its content.

I tested with a simple base64 string and it works well:

Public Sub ProcessRequest(ByVal context As HttpContext)
    Dim base64string As String = "JVBERi0xLjcNJeLjz9MNCjEgMCBvYmoNPDwvRmls..."
    Dim blob As Byte() = Convert.FromBase64String(base64string)
    context.Response.ContentType = "application/pdf"
    context.Response.BinaryWrite(blob)
End Sub

<body>
<form id="form1" runat="server">
    <div>
        <input type="button" name="show" value="Open in new tab" onclick="myfunction()" />
    </div>
</form>
<script>
    function myfunction() {
        window.open("GetImageHandler.ashx?documentid=1", "_blank")
    }
</script>
</body>

And if you need to use window.open() to show image in a new window, you may need to do something like this:

context.Response.ContentType = "image/*"

<input type="button" name="show" value="Open in new tab" onclick="myfunction()" />
<script>
    function myfunction() {
        const image_window = window.open("", "_blank")
        image_window.document.write(`
          <html>
            <head>
            </head>
            <body>
                <img src="GetImageHandler.ashx?documentid=1" />
            </body>
          </html>
        `);
    }
</script>