CODEWITHSUNDEEP
javascriptjquerypython
Sohaib
Sohaib

Reputation: 4694

How to make a hidden form with a file field

I have a dynamically generated table which is editable. On clicking any cell in the table I can change its text.

In one column there is an image displayed. When the user clicks on it I change the html for that column to <input type='file'> and trigger a click hence making the user choose a file to upload as the an icon.

In the last column of the table I have a commit button. If the user makes some changes and presses commit I have to pick up the whole row ( some text fields and one file field ) and add all the contents to a form including the file the user chose and send it to a python script to upload it to an s3 server.

My question is: How do I send this form?

I'm currently using script this but it is not working as it is only sending text as request.Files turns out empty at the python(django) script side.

function update(a) {
    try {
        var button = $(a);
        var row = $(button.parent());
        var rowcount = button.parent().parent().parent().children().index(button.parent().parent());
        var filerow = '';
        var formrow = new Array();
        var rowkey = new Array('Topic', 'TopicDescription');
        var cnt = 0;
        var form = $('#dyno_form');
        row.siblings().each(function () {
            if ($(this).find($('input:file')).length > 0) {
                $(this).find($('input:file')).appendTo($(form));
            } else if ($(this).find($('img')).length == 0) {
                formrow[cnt++] = '<input type="text" value="' + $(this).html() + '" name="' + rowkey[cnt - 1] + '"/>';
            }
        });
        $(form).append(formrow[0]);
        $(form).append(formrow[1]);
        $(form).submit();
    } catch (a) {
        alert(a);
    }
}

and here is the HTML:

   <form id='dyno_form' action='' method="post" style="visibility:hidden">{% csrf_token %}</form>

How do I go about doing this?

Upvotes: 1

Views: 145

Answers (1)

a better oliver
a better oliver

Reputation: 26838

When you want to upload a file the form element needs to have the correct enctype attribute and the method must be post.

<form enctype="multipart/form-data" method="post" ...

Otherwise only the values of your inputs will be uploaded.

Upvotes: 1

Related Questions