Message Box Appear After User Click Upload Button

Jason Phang

Active member
Joined
Aug 13, 2019
Messages
28
Programming Experience
Beginner
Good day everyone, I have a simple program here and I want that when the user clicks on the upload button, if the file is able to be uploaded, then a message should pop up like "Succesfully uploaded" and If the file already exists in the database, then a message should appear "Please upload another file" and redirect the user to the upload page again. How should I go about this?

1570353439932.png

Most of the responses I see are for windows forms but mine is a asp.net C# mvc application. How should I approach this problem?
 

Skydiver

Well-known member
Joined
Apr 6, 2019
Messages
461
Location
Virginia Beach, VA
Programming Experience
10+
This is when your simple WebForms program becomes more complex. The first thing you have to resign yourself to the fact that there is no (easy) WebForms way to cause a message box on the client side browser to show up on command based on an event that happens on the server side.

There is the pre-Web 2.0 solution: When the user clicks on the Upload button, your response from the server side will redirect the user to another page that shows your desired success or failure messages. This lets you continue to use WebForms without having to learn anything new, but it will look very clunky in the Web 2.0 world.

In the Web 2.0 world, what you need to do is essentially stop writing WebForms code, and start learning how to use AJAX on the client side to talk to web services on the server side. Based on the AJAX response from server, then you can popup a real live native message box (ugly) or a more modern style light box.
 

Sheepings

Senior Programmer
Joined
Sep 5, 2018
Messages
466
Location
UK
Programming Experience
10+
Assuming you use file upload in asp.net - this will give you a stepping stone, although it shows how to display messages but you may want to work on the events ensuring the file has uploaded fully. Try this
C#:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="fu" runat="server" />
            <asp:Button ID="upBt" Text="Upload" OnClick="upBt_Click" runat="server" />
        </div>
    </form>
</body>
</html>
In the code behind, on click for your image upload button, you can do
C#:
    protected void upBt_Click(object sender, EventArgs e)
    {
        try
        {
            if (fu.HasFile && fu.FileName.EndsWith(".jpg"))
            {
                Response.Write("<script>alert('Uploading');</script>");
            }
            else
            {
                Response.Write("<script>alert('Not uploading');</script>");
            }
        }
        catch (Exception ex)
        {
            /* Handle error */
        }
    }
And see ASP.NET - File Uploading - Tutorialspoint for further help. Any questions post back

Also, to satisfy naming convention rules, you may want to name UpBt instead of upBt and same for fu
 

Skydiver

Well-known member
Joined
Apr 6, 2019
Messages
461
Location
Virginia Beach, VA
Programming Experience
10+
Notice how in Sheepings' response above, he had to rely on JavaScript to get the message box to show up on the client side browser. WebForms was conceived at the time before JavaScript became ubiquitous.
 

Sheepings

Senior Programmer
Joined
Sep 5, 2018
Messages
466
Location
UK
Programming Experience
10+
Note, that I do almost everything in JS nowadays. Given how MVC projects are constructed with its current framework, there is no magic bullet for stylishly displaying a fancy popup box, but with JS and some CSS, this can very well be accomplished nicely.
Speaking of :
real live native message box (ugly) or a more modern style light box.
You could horribly use InteropServices and display a native windows message box with the following API, if this is a theme you are after :
C#:
[DllImport("User32.dll", CharSet = CharSet.Unicode)]
        public static extern int MessageBox(IntPtr intPtr, string uMsg, string sTle, int iType);
And in your
if (fu.HasFile && fu.FileName.EndsWith(".jpg")){ You can call it like this :
C#:
MessageBox((IntPtr)0, "Some popup", "Some title", 0);
But this is well ugly, and should also work for popping messages at a user because the page is invoking the API call.

Frankly, I think bombing the user with a message box is so 1990's stuff, and you really should set aside a bit of CSS for displaying messages to a user, instead of using the dated message box concept.
 

Skydiver

Well-known member
Joined
Apr 6, 2019
Messages
461
Location
Virginia Beach, VA
Programming Experience
10+
Actually, what I meant by the native message box is whatever message box that the browser offers when there is a call to the JavaScript alert() function. But yes, if our OP happened to be on Windows and were still using IE, then an ActiveX control could be installed with would do the interop call. But if our OP could install an ActiveX control on the user might as well go whole hog with also providing a custom control that provides the upload button and feedback. :)
 

Jason Phang

Active member
Joined
Aug 13, 2019
Messages
28
Programming Experience
Beginner
Perhaps I will post my code for the upload button and seek guidance from there. I have seen the code for the button upload but what if I already have exsiting code for it. Will using JS and Css be sufficient or I need other addons? I believe I should be able to insert some additional JS code within the upload button part? I am not using webforms by the way.

C#:
 <div style="width:80%; text-align:left;">
        @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <p>
                <label for="file">Upload file:</label>
                <input type="file" name="file" id="file" />
                <input type="submit" value="Upload" />
            </p>
        }
    </div>
This is the code for the upload button in the controller class.
C#:
        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file)
        {
            GoogleDriveFilesRepository.FileUpload(file);
            return RedirectToAction("GetGoogleDriveFiles");
        }
If it is in this context, where should I insert the js or how should I go about this? I am really new to asp.net and c# but I saw some people using sweetalert for message displays? I just am unsure where to insert the JS or CSS code for the code as shown above. that code is the upload button code.
 
Last edited:

Sheepings

Senior Programmer
Joined
Sep 5, 2018
Messages
466
Location
UK
Programming Experience
10+
Perhaps I will post my code for the upload button and seek guidance from there
And it never dawned on you to show us this code and info before, and instead let us waste time giving you a response you don't want to use... pff
but what if I already have exsiting code for it.
Then you should have posted that code before hand. I am traveling cross country for work for the company I work for. So someone else will have to waste their time helping you implement the JS I gave you already.
 

Jason Phang

Active member
Joined
Aug 13, 2019
Messages
28
Programming Experience
Beginner
No, I do not think it is as wasted. Im sorry if it upset you but just I wanted to see what are my options that I can use for this project. But well, then I guess I will solve this on my own. Sorry then
 

Sheepings

Senior Programmer
Joined
Sep 5, 2018
Messages
466
Location
UK
Programming Experience
10+
I ain't upset lol. I just don't like to waste time providing solutions to people who already have code they want us to alter, but fail to mention it. That's your own fault for not providing it in your opening topic. Had you posted it instead of acting clueless, I'd have edited it for you instead of what I gave you. Either way, should be able add the JS yourself. Ain't hard.

It's best that you post what you have, what you're using, what you're trying to do, and what problem you're experiencing in future topics. The devil is in the details, and while you keep that info redacted, you only delay helping yourself. As I said, I'm on the road now, maybe someone else will give you some pointers...

Reply from mobile
 
Top Bottom