How to show success alert on file upload?

Question

I'm currently working on a project where I upload files with the following code:

<div class="row">
        <div class="col-lg-2 d-flex align-items-stretch">
            @using (Html.BeginForm("ImportOther", "Mapper", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                   <p>
                       <label class="btn btn-block btn-primary">
                           Other JSON / XML <input type="file" name="jsonFileOther" onchange="this.form.submit()" style="display: none;">
                       </label>
                   </p>
            }
        </div>
    </div>

How can I show a succes alert when file has been uploaded? I've used alerts in javascript so far. Hope anyone has some suggestions.

Thanks in advance!

Answer 1

After you have submitted your form to the Controller, based upon your upload result, you can set a message using ViewBag.

In your Controller:

if(fileUpload == true)
{
ViewBag.UploadMessage = "File Successfully Uploaded";
}
else
{
ViewBag.UploadMessage = "Could Not Upload File";
}

You can use the ViewBag like this in your View:

@if(ViewBag.UploadMessage != null)
{
<script>

$(document).ready(function(){

alert('@ViewBag.UploadMessage ');

});

</script>

}

Note: Instead of using return RedirectToAction(), use return View() to preserve your ViewBag variable.