why Request.files arrayList is empty? C#

Question

I am currently working on a website in which i have to implement a bug reporting module. In this module user will provide the screen-shot of the bug being reported with some other details. I am passing this data to controller using AJAX, jQuery. But in controller the Request.Files arrayList is shown empty and gives exception. I tried everything to resolve it but can't figured it out kindly help if anyone know. Here is the HTML page

<div class="row mt">
        <div class="col-lg-12">
            <div class="form-panel">
                <h4 class="mb"><i class="fa fa-angle-right"></i> Please provide Details about bug you have found</h4>
                <form class="form-horizontal style-form" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">Brief Description</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control round-form" placeholder="Provide brief description about bug here" id="bug_des">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">URL</label>
                        <div class="col-sm-10">
                            <input type="url" placeholder="Please provide ulr of the page where you found this bug" id="bug_url" class="form-control round-form">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">Screen-Shot</label>
                        <div class="col-sm-10">
                            <input class="form-control round-form" type="file" placeholder="Please provide screenshot of the bug" id="bug_img" accept="image/*">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">Aditional Details</label>
                        <div class="col-sm-10">
                            <textarea class="form-control round-form" placeholder="Provide additionl details here...." id="feedback" tabindex="5" required></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <button type="button" class="btn btn-primary btn-lg btn-block" onclick="getBugReport()">Submit</button>
                        </div>
                    </div>  
                </form>
            </div>
        </div><!-- col-lg-12-->
    </div><!-- /row -->

This is the java Script code

    function getBugReport() {

            var content = document.getElementById("bug_url").value;
            if (content.length < 1) {
                alert("url field cant be left empty");
                return false;
            }

            content = document.getElementById("bug_des").value;
            if (content.length < 1) {
                alert("Description field cant be left empty");
                return false;
            }

            if (document.getElementById("bug_img").value == "") {
                alert("please provide a screenshot of bug");
                return false;
            }

            content = document.getElementById("feedback").value;
            if (content.length < 1) {
                alert("Message field cant be left empty");
                return false;
            }
            else {
                    $.getJSON("/Sponsor/sendBugReport/?_bugDes=" + document.getElementById("bug_des").value + "&_bugUrl=" + document.getElementById("bug_url").value + "&_bugDetail=" + document.getElementById("feedback").value, function (data) {
                        document.getElementById("feedback").value = "";
                        document.getElementById("bug_des").value = "";
                        document.getElementById("bug_url").value = "";
                        alert(data);
                    });
            }
        };

Here is the controller function

    public JsonResult sendBugReport(String _bugDes, Uri _bugUrl, String _bugDetail)
    {
        try
        {
            if ((_bugDes != null) && (_bugUrl != null) && (_bugDetail != null) && (Request.Files[0] != null))
            {
                HttpPostedFileBase file = Request.Files[0];
                string img = @"~\Files\" + file.FileName;
                file.SaveAs(Server.MapPath(img));
                string from = "muhammadusama387@gmail.com";

                using (MailMessage mail = new MailMessage(from, "ishtiyar.customer.service@gmail.com"))

                {

                    mail.Subject = _bugDes;
                    mail.Body = "URL:\n" + _bugUrl + "\nDetails:\n" + _bugDetail;
                    mail.Attachments.Add(new Attachment(img));
                    mail.IsBodyHtml = false;
                    SmtpClient smtp = new SmtpClient();
                    smtp.Host = "smtp.gmail.com";
                    smtp.EnableSsl = true;
                    NetworkCredential networkCredential = new NetworkCredential(from, "");
                    smtp.UseDefaultCredentials = true;
                    smtp.Credentials = networkCredential;
                    smtp.Port = 587;
                    smtp.Send(mail);
                    return this.Json("Your Bug Report has been Submitted Successfully!!! Thank You", JsonRequestBehavior.AllowGet);
                }
            }
            else
            {
                return this.Json("Something went wrong!.... Please provide complete details", JsonRequestBehavior.AllowGet);
            }
        }
        catch (Exception ex)
        {
            return this.Json(ex.ToString(), JsonRequestBehavior.AllowGet);
        }

    }

thanks

Is there a reason why you're doing this via ajax and not just regular MVC convention? What you just posted is WAY more difficult, especially in terms of maintainability. — Grizzly, Jun 05 '18 at 19:13
I don't see the code that uploads the file. Where is it? You certainly can't upload a file using `getJSON`. — John Wu, Jun 05 '18 at 19:17
@M12Bennett yes i used ajax to prevent the page from loading again and what is the regular mvc convention? — Muhammad Usama, Jun 05 '18 at 19:36
Just submit the model that is being shown in the view to the controller.. although this would create a page refresh unless if you want the user to be redirected to another page after they submit — Grizzly, Jun 05 '18 at 19:40
@JohnWu why we can't? the has to be a way to do this using `getJSON` — Muhammad Usama, Jun 05 '18 at 19:43
Files are uploaded using POST. So `getJSON()` or `getAnything()` isn't going to work for you. In addition, I don't see any reference to `bug_img` other than the markup that displays the control. — John Wu, Jun 05 '18 at 20:14
Relevant: [Is it possible to use AJAX to do file upload?](https://stackoverflow.com/questions/543926/is-it-possible-to-use-ajax-to-do-file-upload/543927) — John Wu, Jun 05 '18 at 20:15
Thanks @M12Bennett i changed my approach a little bit and thanks — Muhammad Usama, Jun 06 '18 at 03:23

score 0 · Accepted Answer · answered Jun 06 '18 at 03:25

I changed my approach a little bit and its working now. here are the changes which i made

function getBugReport() {

            var content = document.getElementById("bug_url").value;
            if (content.length < 1) {
                alert("url field cant be left empty");
                return false;
            }

            content = document.getElementById("bug_des").value;
            if (content.length < 1) {
                alert("Description field cant be left empty");
                return false;
            }

            if (document.getElementById("bug_img").value == "") {
                alert("please provide a screenshot of bug");
                return false;
            }

            content = document.getElementById("feedback").value;
            if (content.length < 1) {
                alert("Message field cant be left empty");
                return false;
            }

            else
            {
                var file = $("#bug_img").get(0).files;
                var data = new FormData;
                data.append("_file", file[0]);
                data.append("_bugDes", document.getElementById("bug_des").value);
                data.append("_bugUrl", document.getElementById("bug_url").value);
                data.append("_bugDetail", document.getElementById("feedback").value);

                $.ajax({

                    type: "Post",
                    url: "/Sponsor/sendBugReport",
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        alert(data);
                    }
                });
            }
        };

why Request.files arrayList is empty? C#

1 Answers1