I finally managed to get the valums file uploader working in all the browsers. Now once the file gets uploaded it still shows the file just uploaded in a li just below the file input field. I need to remove this li as i am submitting a complete form with ajax that gets reset after submission. So the previous file name needs to be removed.
Any help?
<script type="text/javascript">
var ID="";
$(document).ready(function(e) {
var uploader = new qq.FileUploader({
element: document.getElementById('fine-uploader'),
debug:true,
action: '<?PHP echo base_url();?>index.php/teacher/addBook',
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
autoUpload:false,
multiple:false,
template: '<div style="margin-left:0px !important; margin-top:10px" class="qq-uploader span3">' +
'<pre class="qq-upload-drop-area span12"><span>{dragText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center; width:280px"></ul>' +
'</div>',
uploadButtonText: '<i class="icon-upload icon-white"></i> Upload Book Cover',
onComplete:function(id,fileName,responseJSON){
ID=responseJSON.id;
},
classes: {
button: 'qq-upload-button',
drop: 'qq-upload-drop-area',
dropActive: 'qq-upload-drop-area-active',
dropDisabled: 'qq-upload-drop-area-disabled',
list: 'qq-upload-list',
progressBar: 'qq-progress-bar',
file: 'qq-upload-file',
spinner: 'qq-upload-spinner',
finished: 'qq-upload-finished',
size: 'qq-upload-size',
cancel: 'qq-upload-cancel',
failText: 'qq-upload-failed-text',
success: 'alert alert-success',
fail: 'alert alert-error',
successIcon: null,
failIcon: null
}
});
$("#add_book").click(function(){
ready=true;
if($("#name").val()=="")
{
$("#name").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#author").val()=="")
{
$("#author").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#isbn").val()=="")
{
$("#isbn").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#subject").val()=="")
{
$("#subject").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if($("#ageGroup").val()=="")
{
$("#ageGroup").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
}
if(ready)
{
uploader.setParams({name:$("#name").val(),author:$("#author").val(),isbn:$("#isbn").val(),subject:$("#subject").val(),age:$("#ageGroup").val()});
uploader.uploadStoredFiles();
$("#name").val("");
$("#author").val("");
$("#isbn").val("");
$("#subject").val("");
$("#ageGroup").val("")
}
});
});
</script>
<div class="page">
<div class="menu"><a href="#">Books</a> | <a href="#" class="active">Students</a></div>
<h2>Add New Book</h2>
<div class="send-form" id="book_form" >
<p style="float:left">
<label>Book Title:</label>
<input class="u-3" name="name" id="name" />
</p>
<p style="float:right">
<label>Book Author</label>
<input class="u-3" name="author" id="author" />
</p>
<p style="float:left">
<label>Book ISBN</label>
<input class="u-3" name="isbn" id="isbn" />
</p>
<p style="float:right">
<label>Subject</label>
<input class="u-3" name="subject" id="subject" />
</p>
<p style="float:left">
<div id="fine-uploader" style="margin-left:0px !important">
</div>
</p>
<p style="float:right; width:250px; margin-top:10px; margin-right:-10px">
<label>Age group (eg. 8-12)</label>
<input class="u-3" name="ageGroup" id="ageGroup" />
</p>
Fine Uploader 3.0 has a reset/dispose function. When I wrote it, I was not 100% sure how developers would use it, so it could possibly use some improvement, but it will, among other things, clear the list of uploaded files (if you are using FineUploader, as opposed to FineUploaderBasic).
Note that 3.0 is scheduled to release in Nov. 19, but you can build the snapshot version now, if you'd like.