Upload file with Boostrap Modal on Asp.net core 2.1

Question

I want to upload a file and send to email. But I don't see how to do this with Bootsrap Modal.

If you want any other information, tell me.

I would like to send the attached file by email then also integrate it in my database and be able to download it.

/[...]/ ==> Code that I didn't add, not useful.

Edit : Otherwise how to do with Ajax ?

My View :

<form name="contact" method="post" asp-action="Validation">
@if (ViewBag.Alert != null && ViewBag.Alert != "")
{
    <div class="alert role="alert">
        @ViewBag.Alert
    </div>
}
<div class="details">
    <h3 class="title">Demande</h3>
    <label for="card">Type *</label>
    <select required onchange="contact()" class=" form-control" disabled="true" name="type" value="@ViewBag.Form.Type">
        <option value="1">Choose 1</option>
        <option value="2">Choose 2</option>
    </select>
    <label for="card">Origine *</label>
    <select required class="form-control" name="origine" value="@ViewBag.Form.Origine">
        <option value="1">Origine 1</option>
        <option value="2">Origine 2</option>
        <option value="3">Origine 3</option>
    </select>
    /*[...]*/
    <input type="hidden" name="Id" value="@ViewBag.Form.Id" />
    <input type="hidden" name="Price" value="@ViewBag.Form.Price" />
    /*[...]*/
    <textarea class="form-control" name="Response" placeholder="Response..."></textarea>
    <button required class="btn" onclick="modal_response()" data-whatever="getbootstrap" data-toggle="modal" data-target="#modal_contact" type="button">Response</button>
    <label for="card" class="right">Response send</label><br />
    <button required class="btn_second" onclick="modal_save()" data-whatever="getbootstrap" data-toggle="modal" data-target="#modal_contact_save" type="button">Save</button>
    <label for="card-holder" class="right">Save Ok!</label>
    /*[...]*/
    <div class="form-row">
        <button class="btn-primary" onclick="form_confirmation()" type="submit">Save All</button>
        <button class="btn-secondary" type="reset" onclick="location.href = '@Url.Action("List", "Control", new { id = ViewBag.Id })';">Close</button>
    </div>
</div>
</form>

/* When I click on "Response" a new window open */

<div class="modal fade" id="modal_contact" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <h5 class="modal-title" id="modal_label">Send email to : @ViewBag.Form.Name</h5>
            <button type="button" class="close" data-dismiss="modal"></button>
    </div>
    <div class="modal-body">
        <form id="modal_contact_form" enctype = "multipart/form-data" method="post" action="@Url.Action("Modal_contact", "Control")">
            <div class="form-group">
                <input type="file" name="file" accept="application/pdf" /><br /><br />
                <textarea class="form-control" name="Description" required placeholder="Content">@ViewBag.Response</textarea>
            </div>
            <input type="hidden" name="Id" value="ID" hidden />
            <input type="hidden" name="Price" value="@ViewBag.Form.Price" hidden />
            <input type="hidden" name="Type" value="@ViewBag.Form.Type" hidden />
            /*[...]*/
            <input type="submit" hidden />
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" data-dismiss="modal" onclick="$('#modal_contact_form').submit();" class="btn-primary">Send Email</button>
    </div>
</div>

My Controller :

public class MyController : BaseEntity
{
    [Required]
    public string Id { get; set; }
    public string Price { get; set; }
    public string Type { get; set; }
    /*[...]*/

    /* For File I don't know if it's good?? */
    public IformFile File { get; set; }
}

My Model :

public ActionResult Modal_contact(MyController model)
{
    /* How to retrieve file ?? */
    bool ok = false;
    OtherController OC = new OtherController();
    /*[...]*/
    if (ModelState.IsValid)
    {
        OC = othercontrollerRepository.Find(model.Id);
        OC.Email = this.Session_get("Email");
        OC.Description = "";
        model.Email = this.Session_get("Email");
        model.Status = "1";
        model.View = "response";
        /*[...]*/
        if (mycontrollerRepository.Add(model) && othercontrollerRepository.Update(OC))
        {
            /* How to send file to email and save file to folder in my project to add in my database ? */
            MailManager mail = new MailManager();
            Modele modele = new Modele();
            modele= modeleRepository.Find("response");

            ok = mail.send(modele.Objet, model.Description, OC.Email);
        }
               
        return Json(new { Json_result = ok, Redirect = "" });
    }   
        return Json(new { Json_result = false, Redirect = "" });
    }

I found my error : Form before <div>

Answer 1

I tried your code and reproduced your issue. I noticed that you named the IFormFile object as File.

public IFormFile File { get; set; }

But input file you are getting is named file.

<input type="file" name="file" accept="application/pdf"/><br /><br />

Asp.net core model binding will bind the property according to the input name. This is the reason why you couldn't get the IFormFile value in controller.

To solve this issue, you should change the name of the input to File so that they could match each other.

Like below:

<input type="file" name="File" accept="application/pdf"/><br /><br />

Result: