.NET Core how to submit a form with file using AJAX?

Question

I have this form that has a drag and drop. Using this plugin.

The code creates a drag and drop that auto triggers an upload.

<div class="form-group g-mb-30">
    <label class="g-mb-10" for="inputGroup-3_1">Image *</label>
    <div class="g-pos-rel">
        <span class="g-pos-abs g-top-0 g-right-0 d-block g-width-40 h-100 opacity-0 g-opacity-1--success">
           <i class="hs-admin-check g-absolute-centered g-font-size-default g-color-lightblue-v3"></i>
        </span>
        <input class="js-file-attachment" name="fileAttachment2[]" type="file" id="ka-file">
    </div>
</div>

Now in this object I set a couple options to process my form.

        uploadFile: {
            url: '/FileUpload/Upload',
            data: document.getElementById('ka-file').files[0],
            type: 'POST',
            enctype: 'multipart/form-data',
            beforeSend: function() {
                formData = document.getElementById('ka-file').files[0];
                console.log(formData);
            },
        }

I'm getting the element by Id and sending that data. I know I'm sending the data because on my console log in the function beforeSend I get output.

In my controller I'm receiving the data like this.

    [HttpPost]
    public async Task<IActionResult> Upload(IFormFile file)
    {
        if(file == null)
        {
            return Ok(200);
        }
    }

But my file is always null. I'm not sure what I'm missing.

Sabir Hossain · Accepted Answer · 2018-02-25 17:11:37Z

I use this for uploading file it's also help you to get multiple files, just call the SendImage() on your button click event.

function SendImage() {
    var fileUpload = $("#files").get(0);
    var files = fileUpload.files;
    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    }
    $.ajax({
        type: "POST",
        url: "/FileUpload/Upload/",
        contentType: false,
        processData: false,
        data: data,
        success: function (data) {
            if (data.length > 0) {
                console.log(data)
            }
        },
        error: function () {
            alert("There was error uploading files!");
        }
    });
}

and inside controller just get the files usingvar files = Request.Form.Files;

Hope it will solve your problem if there is no other problems.

Collectives™ on Stack Overflow

.NET Core how to submit a form with file using AJAX?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related