在valums ajax文件上传器中上传后清除文件列表

Question

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> &nbsp;| &nbsp;<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>

Answer 1

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.

Answer 2

You must include :

 fnOnAdding: function(data)
    {   
      $('#fine-uploader').reset();
      return true;  
    },

But, in my case, with an editable datatable it resets the whole table while i was expecting to only reset the FileUploader related objects. Besides that it works.

Answer 3

I don´t know if it is the same question but take a look at this topic:

Delete Specific File From the List of Uploads

Well, What I did is, in the fileuploader.js I´ve changed the filetemplate I´ve putted an ID to the <li> list, so In my HTML file ( in fact aspx) I wrote a Style for them

in fileuploader.js locate

fileTemplate: '<li id="listaArquivos">' +
            '<span class="qq-upload-file"></span>' +
            '<span class="qq-upload-spinner"></span>' +
            '<span class="qq-upload-size"></span>' +
            '<a class="qq-upload-cancel" href="#">Cancel</a>' +
            '<span class="qq-upload-failed-text">Failed</span>' +
        '</li>'

<style>
      #listaArquivos
        {
            display: none;
        }
</style>

So that has vanished with the list.