Uploading and displaying image with FileUpload control in C#

Question

I recently came across an article on how upload and display image with FileUpload control. What was not clear to me is the file path. I just need to click on the image and select an image from my local machine and then the selected image will be displayed inside the image control, I already how this is done in JavaScript, I need to learn how it can be done in C# I don't want to save it in any directory and I don't have a file path. All I want is to click on the image control, then it will open a dialog in my machine, then I select an image and it will display in the image image control on the web form. This is the code

protected void UploadFile(object sender, EventArgs e)
{
    string folderPath = Server.MapPath("~/Files/");
 
    //Check whether Directory (Folder) exists.
    if (!Directory.Exists(folderPath))
    {
        //If Directory (Folder) does not exists Create it.
        Directory.CreateDirectory(folderPath);
    }
 
    //Save the File to the Directory (Folder).
    FileUpload1.SaveAs(folderPath + Path.GetFileName(FileUpload1.FileName));
 
    //Display the Picture in Image control.
    Image1.ImageUrl = "~/Files/" + Path.GetFileName(FileUpload1.FileName);
}

This is how I did it in JavaScript

<script type="text/javascript">
        $(function () {
            //this is the id of the file upload control
            var fileUpload = $("[id*=imgupload]");
            //this is the id of the image control
            var img = $("[id*=dp]");
            img.click(function () { fileUpload.click(); });
            fileUpload.change(function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("[id*=dp]").attr("src", e.target.result);
                }
                reader.readAsDataURL($(this)[0].files[0]);
            });
        });
    </script>

But I want to replicate same in C#. Please can anyone help?

Answer 1

Hi @Donald Symmons , You can get the bytes of the uploaded file and pass it to the Image control.

<asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Image ID="Image1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />

 protected void Upload(object sender, EventArgs e)
        {
            if (FileUpload1.HasFile)
            {
                int fileLen; 
                // Get the length of the file.
                fileLen = FileUpload1.PostedFile.ContentLength;                                    
                byte[] input = new byte[fileLen - 1];
                input = FileUpload1.FileBytes;

                byte[] fileBytes = new byte[FileUpload1.PostedFile.ContentLength];
              
                Image1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(input.ToArray(), 0, input.ToArray().Length);

            }
        }

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.