Clear File listing after upload in valums ajax file uploader

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>

post the html of file uploader after uploading the file – rahul Nov 15 '12 at 12:19 — rahul, Nov 15 '12 at 12:19

Ray Nicholus · Accepted Answer · 2013-05-03T14:31:04.000

0

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.

edited May 03 '13 at 14:31

answered Nov 16 '12 at 14:37

Ray Nicholus

19,538
14
59
82

score 0 · Answer 2 · answered Nov 23 '12 at 11:39

0

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.

answered Nov 23 '12 at 11:39

KatosRevenge

63
1
9

5

Your code will not work. First of all, the author of the question is not using the jQuery plug-in for Fine Uploader, so, he/she would have to call `uploader.reset()`, given the fact that the uploader instance is stored in a variable called `uploader` according to the code pasted in the question. Second, if the jQuery plugin WAS being used, you would reset the uploader by doing this: `$('#fine-uploader').fineUploader('reset')`. – Ray Nicholus Dec 01 '12 at 05:26
2

You should put this tip into the documentation for the jQuery wrapped version - it took me a while to find it. – dan Dec 18 '12 at 13:27

score 0 · Answer 3 · edited May 23 '17 at 12:16

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.

Clear File listing after upload in valums ajax file uploader

3 Answers3