0

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>
Mohammad Arshad Alam
  • 9,694
  • 6
  • 38
  • 61

3 Answers3

0

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!

Community
  • 1
  • 1
Aniket Inge
  • 25,375
  • 5
  • 50
  • 78
  • how to show popup? after post back, fileuploader does not contain value. – Mohammad Arshad Alam Jan 23 '13 at 12:14
  • after postback, you can save the value of the `FileUpload.FileName` which can be set on `Page_Load` @Arshad – Aniket Inge Jan 23 '13 at 12:22
  • FileUpload.FileName does not contain full path, it gives only file name, so it is not able to find the file after postback... and FileUpload.FileName is a read-only property – Mohammad Arshad Alam Jan 23 '13 at 12:24
  • @Arshad why do you want the full path? I suppose you want to do the upload twice or something? You _have_ to upload the file first to your server, then check for dimensions in server side, then `RegisterStartupScript` that displays a confirm() box, which either says YES or NO to your page(which means resubmit) and by that time, you'll have the filename at server side anyway. – Aniket Inge Jan 23 '13 at 12:26
  • @Ankit, because i need to create stream to resize it for that using these code: System.Drawing.Image.FromStream(fluploader.PostedFile.InputStream); – Mohammad Arshad Alam Jan 23 '13 at 12:31
0

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,

Learning Curve
  • 1,449
  • 7
  • 30
  • 60
  • how to show popup? after post back, fileuploader does not contain value. – Mohammad Arshad Alam Jan 23 '13 at 12:11
  • could you please give me some discription when really you want to display the alert or popup? I didn't get what exactly do you mean by fileuploader doesn't contain value? some of your code example will really be helpful. – Learning Curve Jan 23 '13 at 12:25
  • after clicking upload button, validate size, if not valid show popup, then upload it – Mohammad Arshad Alam Jan 23 '13 at 12:26
  • i have done code for uploading and resizing, need to know how to show popup – Mohammad Arshad Alam Jan 23 '13 at 12:28
  • you can simply throw and alert if condition is not meet. set alert message to something like "File size is greater than the required size please upload an another image". catch Yes and No events of alert dialog and if user click Yes than simply call the fileUpload routine to open the fileUploader. – Learning Curve Jan 23 '13 at 12:29
  • DialogResult result = MessageBox.Show("File size is greater than the required size please upload an another image", "Yes or No", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button2); if (result == DialogResult.Yes) { MessageBox.Show("You chose Yes."); } else if (result == DialogResult.No) { MessageBox.Show("You chose No."); } – Learning Curve Jan 23 '13 at 12:34
  • though all the aspx pages has their code behind files and you can access all of your controls and their events in code behind file but if you really want to do all the work on .aspx page than you can define onclientclick javascript function e.g OnClientClick = "return confirm('Your Message Here')" it will call the confirm dialog for you. – Learning Curve Jan 23 '13 at 12:48
  • FileUpload.FileName does not contain full path, it gives only file name, so it is not able to find the file after postback... and FileUpload.FileName is a read-only property . because i need to create stream to resize it for that using these code: System.Drawing.Image.FromStream(fluploader.PostedFile.InputStream); – Mohammad Arshad Alam Jan 23 '13 at 13:13
  • before posting back you can assign the path to a session variable where ever you reading this file from and than on post back get the session variable value. – Learning Curve Jan 23 '13 at 14:12
  • then how to process with java script yes – Mohammad Arshad Alam Jan 23 '13 at 14:27
0

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;
    }
Mohammad Arshad Alam
  • 9,694
  • 6
  • 38
  • 61