Utilizing to enable AJAX file uploads seemed like the perfect fit for my requirements. However, I am struggling to customize its behavior as needed. Despite the documentation suggesting the use of FileUploaderBasic, I am unable to even display an upload button with it. My current attempt looks like this:
<div id="file-uploader">
<noscript>
<p>Please make sure to enable JavaScript for the file uploader to work.</p>
</noscript>
</div>
<div id="progressbar" style="width:300px;"></div>
<script type="text/javascript">
$().ready(function () {
var u = new uploader.FileUploaderBasic({
element: document.getElementById('file-uploader'),
action: '/files/upload',
debug: true,
onProgress: function (id, fileName, loaded, total) {
$("#progressbar").progressbar("value", 50);
},
onComplete: function(id, fileName, responseJSON){
$("#progressbar").progressbar("value", 100);
},
});
$("#progressbar").progressbar({
value: 0
});
});
</script>
I aim to display a progress bar for each uploaded file, with the percentage completed shown to the right. Below the progress bar, I intend to show the file's name and total size. I believe the HTML structure for this layout would resemble the following:
<table border='0' cellpadding='0' cellspacing='0'>
<tr><td rowspan='2'>[img]</td>
<td>[Progress Bar]</td>
<td>[%]</td>
</tr>
<tr><td colspan='2'>[filename] - [filesize]</td></tr>
</table>
My struggle persists with implementing this using FileUploaderBasic. Could you please guide me on where I am going wrong? Your assistance is greatly appreciated in my time of need.