How to Create JSON from Multiple Attachment

Question

I have a form where user can add one or more attachment using this code

<div id="attachments">
</div>
<a href="#" id="addAttachment">Add attachment</a>

<script>
$("#addAttachment").click(function () {
    var strChooseFile = "<table><tr><td><input type='file' name='PostedFiles' size='30' title='Choose file ...'></td>";
    strChooseFile += "<td><input type='text' name='FileDescriptions' size='50' title='File descriptions ...'></td>";
    strChooseFile += "<td><input type='button' name='btnAttachmentRemove' id='btnRemoveAttachment' value='Remove' ></td></tr></table>";

    inputFile = $(strChooseFile);
    inputFile.clone(true).appendTo("#attachments");
});
</script>

I followed this tutorial to prepare the data before being sent to the server. Below the code how I prepared the data:

$("#btnAddInvoice").click(function (e) {
    if ($("#frmInvoice").validate().form()) {
        var m_data = new FormData();
        m_data.append("SubsidiaryClientID", $("#SubsidiaryClientID").val());
        m_data.append("SubsidiaryClientNo", $("#SubsidiaryClientNo").val());
        m_data.append("SubsidiaryClientName", $("#SubsidiaryClientName").val());
        m_data.append("PostedFiles", $("input[name=PostedFiles]").val()); // how to parse this to json?
        m_data.append("FileDescriptions", $("input[name=FileDescriptions]").val()); // how to parse this to json?

        $.ajax({
            type: "POST",
            url: "@Url.Content("~/Invoice/AddInvoice")",
            data: m_data,
            contentType: false,
            processData: false,
            dataType: "json",
            cache: false
        }).done(function (data) {
            alert(data);
            if (!data.message) {
                $("#invoiceList").html(data);
                $("#addInvoiceModal").modal("hide");
            }
        });
    }
});

As you can see in the code above, I've a problem when prepared PostedFiles and FileDescriptions. After being sent to the controller, the values is null.

How to prepared PostedFiles from array of $("input[name=PostedFiles]") and also FileDescriptions?

Can you give us an example value of your inputs please? Along with how you'd like them to be 'parsed' for submission to the server. As an aside, that markup in javascript makes my head hurt. Might be worth throwing all of this in a jsfiddle so we can help you restructure it. — , Jun 16 '15 at 10:34
is the input[name=PostedFiles] an input file? and the input[name=FileDescriptions] input? — ale, Jun 16 '15 at 10:36
Firstly `m_data.append("PostedFiles", $("input[name=PostedFiles]").val());` (and the following line) wont work. It would be easiest to just serialize your form (including the files) - [refer this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Jun 16 '15 at 10:38
@Infer-On Yes, PostedFiles is an `` and FileDescriptions is `` as you can see in the script. It's dynamic and can be more than 1 — Willy, Jun 16 '15 at 10:40
Thank you @StephenMuecke, it works, how smart you are :) could you add it as an answer. Btw, I have serialized the form using `$("#frmInvoice").serialize(),` but it doens't work. Could you explain it in the your answer? — Willy, Jun 16 '15 at 10:48

How to Create JSON from Multiple Attachment

0 Answers0