Question posted in
The official documentation can be found here.

ASP.NET : image returning invalid characters

I have an ASP.NET page that contains the following markup:

<td>
    <asp:FileUpload runat="server" ID="fileSignature" accept=".png,.jpg,.jpeg" />
</td>
<td>
    <asp:Button ID="btnUploadSignature" runat="server" Text="Upload" onclick="btnUploadSignature_Click" />
    <asp:Image ID="imgSignature" Visible = "true" runat="server" Height = "100" Width = "100" />
</td>

Code behind:

protected void btnUploadSignature_Click(object sender, EventArgs e)
{
   string base64String = Convert.ToBase64String(fileSignature.FileBytes);// Convert.ToBase64String(bytes, 0, bytes.Length);

    imgSignature.ImageUrl = @"data:image/png;base64," + base64String;
}

When an image is uploaded, it does not show. On inspecting the Image element on the browser, the image src now becomes something like this:

<img id="ctl00_ContentPlaceHolder1_imgSignature" src="data%3Aimage/png%3Bbase64%2C

instead of

src="data:image/png;base64,....".

The base64 string also contains some replaced characters in such pattern.

Is there anyway to make the image src display the string as it is?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have discovered the what led to this issue. The code perfectly works as it is. However, on the web config I had this:

    <httpRuntime requestPathInvalidCharacters="&lt;,&gt;,%,&amp;,:,,?" appRequestQueueLimit="100" executionTimeout="60000" requestValidationMode="2.0" maxRequestLength="32768" enableVersionHeader="false" encoderType="System.Web.Security.AntiXss.AntiXssEncoder" />

    However, the images started displaying fine, immediately I commented this out.


  2. 0

    Well, since you have some "stray" "tr" in your markup, then I suspect this is some type of listView or other nested type of control, and thus you issue something else we can’t see here.

    Removing the "stray" "tr", and using this markup:

        <asp:FileUpload runat="server" ID="fileSignature" accept=".png,.jpg,.jpeg" />
    <br />

    <asp:Button ID="btnUploadSignature" runat="server" Text="Upload" 
        OnClick="btnUploadSignature_Click" />
    <br />

    <asp:Image ID="imgSignature" Visible="true" runat="server" 
        Height="100" Width="100" />

    And your code was "hard" coded to a type of png, yet you allow different image types.

    So, this code will use the correct content type based on the file extension.

    Thus, this code:

        protected void btnUploadSignature_Click(object sender, EventArgs e)
    {

        string sContentType = MimeMapping.GetMimeMapping(fileSignature.FileName);

        string base64String = Convert.ToBase64String(fileSignature.FileBytes);

        imgSignature.ImageUrl = $@"data:{sContentType};base64,{base64String}";

    }

    And thus this:
    enter image description here

    So, your code does look to be correct. However the stay "tr" tags suggests that more markup and nesting of controls is occurring here.

    Try the above sample code. It works just fine, and hence you have to post a reproduceable example for further help, since above works fine for me, and also in comments a poster has also noted the code works for them. So, this code is working for everyone else but you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search