Question

i created a module for uploading contents. it is basically done by file api.

the html code is

    <input type="file" id="filepicker-input" multiple="true" style="display:none;"/>  
    <div class="addfile_btndiv" id="addfile_btndiv">
    <span id="direct-upload-text"><input name=""  class="add_filebtn" type="button" value="Add Files" /></span>
    </div>
    <div id="dropped-files">

    </div>

    <div class="clear"></div>
    </div>

the operation is taken place when onchange the file.
the js code is

 var fileInput  = document.getElementById("filepicker-input");
 document.getElementById("direct-upload-text").onclick = function(e){
    fileInput.click();
 }
 fileInput.onchange = function(e) {

//basically same as in ondrop
    $("#dropped-files").html("");

    var files = e.target.files;

    var type            = 'zip';
    var location_block  = 1;
    var check = createPreviewElements(files, type, location_block);

    if(check){

        //add an onclick property to the upload button, this will trigger the main upload process
        var uploadButton    = document.getElementById('upload_button_zip_1');

        uploadButton.onclick = function(e){
            var block   = document.getElementById("current_block");
            block.value = location_block;
            uploadButton.onclick = null; //disable the onclick event once it happened
            document.getElementById('loading_wrapper').style.display = 'inline';
            setTimeout(function(){$('#loading_wrapper').fadeOut()}, 6000);  //fade out loader after 2 sec
            startupload(files, type, location_block);
        };
    }


} 

the uploading is working perfectly. my problem is that there is a cancel button present for this uploading. i managed this by some javascript code but after when the user can reselect the same file then ‘onchange’ will not trigger. so i add a new logic in cancel button that remove the current input type and place a new input type. the code is

            $('#filepicker-input').attr("id", "newID");
    var foo     = document.getElementById("blk_switchbox1");
    var olddiv  = document.getElementById("newID");
    foo.removeChild(olddiv);
    var element = document.createElement("input");

    element.setAttribute("type", "file");
    element.setAttribute("id", "filepicker-input");
    element.setAttribute("class", "nodisplay");


    foo.appendChild(element);

this working fine in mozila. but not in chrome. in chrome there is any cashing present for dom elements. please help me

Answer 1

Have you tried triggering the change event manually? Rather than its click event?

document.getElementById("direct-upload-text").onclick = function(e){
    if(fileInput.value != '') {
        fileInput.change();
    } else {
        fileInput.click();
    }
}