Make AsyncFileUpload accepts only images files Asp.Net Webforms

Question

I am using asyncfileupload control, I want to accept only images. I used the accept attribute but it didn't work and used OnClientUploadComplete event to catch the content type and stop the uploading on server side, the event didn't fire and caused the OnUploadedComplete to not fire too! And I don't know how to stop it from uploading on the server side. I tried to check the contentType in OnUploadedComplete event, it fires and goes to 'else' but it doesn't show the message that it's supposed to show. Any suggestion?

C# code:

`protected void fileUpload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        if (fuImage.HasFile)
        {
            string contentType = fuImage.ContentType;
            if (contentType == "image/jpeg" || contentType == "image/gif"
              || contentType == "image/png")
            {
                string fileName = Path.GetFileName(e.FileName);
                string fileUploadPath = Path.Combine(Server.MapPath("~/images/Resturant"), fileName);
                fuImage.SaveAs(fileUploadPath);

                var url = "~/images/Resturant/" + fileName;
                ScriptManager.RegisterStartupScript(this, this.GetType(), "fileName",
                      "top.$get(\"" + hdfImagePath.ClientID + "\").value = '" + url + "';", true);
            }
            else
            {
            ucMessage1.MessageTitle = "Error Message";
            ucMessage1.MessageDetail = "Please Choose a valid image!";
            ucMessage1.MessageImage = "X";
            ucMessage1.Show();
        }
    }
}`

Design:

<ajaxToolkit:AsyncFileUpload ID="fuImage" runat="server" OnUploadedComplete="fileUpload_UploadedComplete" />

Answer 1

The UploadedCompleteevent fires on the server side when the file is successfully uploaded which means it cannot check the file extension before it being uploaded.