image height width validation and popup

Question

i have a .aspx page with a FileUpload control. i want to achieve upload images to the website. but before that i need check image height and width with these condition:

• if image height >768 or width >1024 then show a popup message for continue.... (yes/No)

• if image height <768 or width <1024 then show a popup message for continue.... (yes/No)

  So, far i have done image upload code , but how to achieve this ? any kind of help/ suggestion will appreciated.

    <asp:RegularExpressionValidator ID="revUploaderMainPopup" runat="server" ControlToValidate="UploaderMainPopup" ErrorMessage="*" ValidationGroup="MainPopUploadvlg" ToolTip="Only .jpg, .bmp, .png are valid." ForeColor="Red" Display="Dynamic" ValidationExpression="(.*\\.([Jj][Pp][Gg])|.*\\.([Bb][Mm][Pp])|.*\\.([pP][nN][gG])$)"> </asp:RegularExpressionValidator> 

Answer 1

You will not be able to do this without using Custom validators. And it will definitely have to be server side. Client side code will require Javascript to display the "Yes or No" dialog box(this can be done with javascript: confirm('yes?'); dialog boxes.

Also, it will require some ajax if you want to keep the UI looking like the upload never happened and you're validating it completely in client side(because of partial postback).

See to get dimensions of the image, without reading the entire file just so you can shove off a few milli-seconds off that ajax request.

Good luck!

Answer 2

try following

        using (System.Drawing.Image image = System.Drawing.Bitmap.FromStream(fs))
        {
            int iWidth = (int)Math.Round((decimal)image.Width);
            int iHeight = (int)Math.Round((decimal)image.Height);
           if(iWidth > 1024 || iHeight > 768)
           {
                // here you can throw your message
           }
        }

Regards,

Answer 3

i done it in the following way: i have taken two variable(image and string) a div with popup, having tow button. after validating image i am setting display:block to the div from server.
on the click of ye button i am saving it.

 <div id="dvPopup" class="popup" runat="server" style="display: none">
    <asp:Panel ID="pnlpopup" runat="server" Style="display: block; position: absolute; width:400px;
        margin: auto" CssClass="modalConfirmation">
        <div style="width: 400px; height: 30px;" class="MessageHeaderError">
            <div class="modalHeader">
                Confirmation
            </div>
        </div>
        <br />
        <div style="color: Black">
            <span runat="server" id="spnMessge" style="font-weight:bold">Picture is smaller than 1024 x 768 and will be stretched.</span>
        </div>
        <div class="small">
        </div>
        <div>
            <div style="display: table-cell; height: 40px; padding-left: 80px; vertical-align: middle;
                width: 80px;">
                <asp:ImageButton ID="btnYes" ImageUrl="~/images/correct.png" runat="server" AlternateText="YES"
                    ToolTip="Yes" OnClick="btnYes_Click" />
            </div>
            <div style="display: table-cell; height: 40px; vertical-align: middle;">
                <asp:ImageButton ID="btnNo" ImageUrl="~/images/delete.png" runat="server" AlternateText="NO"
                    ToolTip="No" Style="margin-left: 100px;" OnClick="btnNo_Click" />
            </div>

in the .cs fie:

 private bool ValidateImageSize(System.Drawing.Image imgPopup, string strSource)
    {
        //Messure height & width and show popup;
        if ((strSource == "MainPopup") && (imgPopup.Height > 768 || imgPopup.Width > 1024))
        {
            return true;
        }
        else if (strSource == "SmallPopup" && imgPopup.Height > 300 || imgPopup.Width > 400)
        {
            return true;
        }
        return false;
    }