Message Box Appear After User Click Upload Button

J

Jason Phang

Well-known member
Joined
Aug 13, 2019
Messages
46
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?
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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#:
Expand Collapse Copy 
<!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#:
Expand Collapse Copy 
    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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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 :
Skydiver said:
real live native message box (ugly) or a more modern style light box.
Click to expand...
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#:
Expand Collapse Copy 
[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#:
Expand Collapse Copy 
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.
 
Upvote 0 Downvote
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. :)
 
Upvote 0 Downvote
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#:
Expand Collapse Copy 
 <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#:
Expand Collapse Copy 
        [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:
Upvote 0 Downvote
Jason Phang said:
Perhaps I will post my code for the upload button and seek guidance from there
Click to expand...
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
Jason Phang said:
but what if I already have exsiting code for it.
Click to expand...
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote

Similar threads

J
  • Question Question
MS Edge browser file browse and upload button
Replies
1
Views
1K
Skydiver
Skydiver
L
  • Question Question
Set image as background for Button as default, hover and click
2
Replies
19
Views
2K
Skydiver
Skydiver
lpeder6
  • Question Question
TextBox validation after button click
Replies
5
Views
2K
lpeder6
lpeder6
complete
  • Question Question
How do I connect my existing Visual Studio 2022 project to an existing github repository?
Replies
1
Views
3K
Skydiver
Skydiver
ahmedaziz
  • Question Question
Question validation message sweet alert display more than once when record exist before and click on submit button multi time ?
Replies
3
Views
2K
Skydiver
Skydiver

Share this page

Latest posts

Back
Top Bottom