** FOR FUTURE READERS **
Although I accepted an answer, this problem is not resolved for me. User dbf
obviously knows his stuff and perhaps his answer will work for you. If it doesn't, I apologize. The waters are too deep for me, and I'm out of time to spend on this, so I have reworked my code to remove the custom-file-input niceties. I'll get my project completed and then, if possible, return to this code and post my solution. At the end of the day, however, user dbf
put in a lot of effort and deserves the cred.
An ajax call returns a table structure, which gets placed inside form tags.
An ADD ROW button clones a table row, with a link (custom-file-input as anchor tag) for uploading a file.
I am replacing the INPUT TYPE=FILE element with the jquery-custom-file-input.js plugin, from here. This jquery plugin allows to turn any element into a file input element, so I am using an anchor tag #change_pd
as the file input element. But to actually upload the file, the minimal documentation says to "attach the input element to a form element."
This StackOverflow question addresses exactly this issue, but I haven't been able to make it work in my case.
A standard submit button submits the form, where everything is received except the uploaded file.
HTML - An AJAX-generated table is inserted inside DIV #reportstable
<form action="" method="post" name="upd" enctype="multipart/form-data" id="AFrm">
<div id="reportstable">
</div>
</form>
AJAX - the returned table looks like this. The table is placed within div #reportstable, above.
<table id="DocTable">
<tr>
<td>New Document</td>
<td>
<span id="span_pd"></span>
<input type="hidden" id="proj_id" name="proj_id" value="'.$project_id.'">
<input type="hidden" id="status_pd" name="status_pd">
</td>
<td>
<a id="change_pd" href="#">change</a>
<input type="hidden" id="new_pd" name="new_pd">
</td>
</tr>
</table>
JQUERY - This is the code to insert a file. It does put the chosen filename into the SPAN as text, and into the hidden input file #new_pd, which is received in the $POST data.
However, the file itself is not uploaded.
I am not sure where to put the .appendTo(), or how to write the jquery. Here is what I tried. Everything works except the .appendTo().
$(document).on('click','#change_pd',function() {
$(this).file().choose(function(e, input) {
$('#new_pd').val(input.val());
$('#span_pd').html(input.val());
$('#span_pd').css('color','grey');
$('#status_pd').val('CHANGED');
});
$(this).css('text-transform','uppercase');
$(input).appendTo('#AFrm').
attr('name', 'a-name').
attr('id', 'an-id');
});
PS - If anyone can recommend a better (preferred?) custom-file-input plugin, I'm all ears.