Im trying to delete values from a html file input.

<input type="file" name="images" id="i1" class="imageup" multiple />

I cant seem to access the .files array to delete one of the values. I had tried using a hidden input type with the file value but i dont think this can be done....so im trying to access the input element to delete!

There is a fiddle below of all the code. There is a lot there to replicate the situation but the code controlling the delete event is about half way down the js.

Does anyone have a method of accessing for example the 3rd inputted value of the multiple file upload and deleting?

The js code below- using .splice attempt.

var files=jQuery('#i'+inputid)[0].files; 

        for (var i = 0; i < files.length; i++) {
        console.log(files[i].name);
        }
    var inputname= 3;
    jQuery('#i'+inputid).splice(inputname, 1); 
 // no files are being deleted!!!

    console.log('2nd test');
    var files=jQuery('#i'+inputid)[0].files; 

        for (var i = 0; i < files.length; i++) {
        console.log(files[i].name);
        }

    }

Im trying to delete values from a html file input.

<input type="file" name="images" id="i1" class="imageup" multiple />

I cant seem to access the .files array to delete one of the values. I had tried using a hidden input type with the file value but i dont think this can be done....so im trying to access the input element to delete!

There is a fiddle below of all the code. There is a lot there to replicate the situation but the code controlling the delete event is about half way down the js.

http://jsfiddle/dheffernan/ryrfS/1

Does anyone have a method of accessing for example the 3rd inputted value of the multiple file upload and deleting?

The js code below- using .splice attempt.

var files=jQuery('#i'+inputid)[0].files; 

        for (var i = 0; i < files.length; i++) {
        console.log(files[i].name);
        }
    var inputname= 3;
    jQuery('#i'+inputid).splice(inputname, 1); 
 // no files are being deleted!!!

    console.log('2nd test');
    var files=jQuery('#i'+inputid)[0].files; 

        for (var i = 0; i < files.length; i++) {
        console.log(files[i].name);
        }

    }

• javascript
• jquery
• html

• Late to the party but I tried this jsfiddle/ryrfS/6 and it seemed to remove at least the list but did not check the logs to ensure the file was removed from the dom. The preventDefault was throwing it off. I've noticed that this behaves much differently in various browsers but tested this in firefox on mac. Worked good for first three and then snafu... – isaac weathers Commented Oct 2, 2014 at 4:59
• aha... it was the multiple tags: jsfiddle/ryrfS/8 so taking your fiddle, ment out the preventDefault and remove the multiple attributes from all declarations of the input. – isaac weathers Commented Oct 2, 2014 at 5:20
• possible duplicate of Remove selected file(s) before upload with Javascript – Ciro Santilli OurBigBook. Commented Nov 7, 2014 at 22:37
• well the solution is different and utilizes formdata which is newish. I'm not sure why you are going over q's with answers? – David Commented Nov 8, 2014 at 1:13
• @David but do you agree that the question can be considered a duplicate? If so, I propose we concentrate all information on a single page, and the older question is a natural choice when all alternatives have the same number of upvotes. If not, please explain why you think it is not a duplicate, I may be wrong. – Ciro Santilli OurBigBook. Commented Nov 8, 2014 at 8:42

2 Answers 2

using html5 FormData solution:

Basically add the images to FormData, submit it using ajax and return the urls from where i uploaded them (i included the php for wordpress). I removed all data validation from js code and php code to keep it short + i still need a workaround for ie9 / older vers of browsers.

jQuery code:

jQuery(document).on('change', '.imageup', function(){

        var id= jQuery(this).attr('id');
        var length= this.files.length;

        if(length>1) {// if a multiple file upload



        var images = new FormData();
        images.append('action', 'uploadimg'); //wordpress specific add functionname

            jQuery.each(event.target.files, function(key, value ){

                        images.append(key, value);

            });



        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: images, 
            cache: false,
            processData: false, 
            contentType: false, 
                success: function(data) {
                    var obj= JSON.parse(data);


                    jQuery.each(obj,function(key, value){
                        if(key!='errors') {
                        var ind = value.lastIndexOf("/") + 1;
                        var filename = value.substr(ind);

                        //do something here with filename
                        console.log(filename);
                        }
                    });

        }//end of success function
        }); //end ajax


    } 
});

php code wordpress, if not using wordpress change the above url, etc..

function uploadimg() {

$error = false;
$files = array();
if ( ! function_exists( 'wp_handle_upload' ) ) require_once( ABSPATH . 'wp-admin/includes/file.php' );
$upload_overrides = array( 'test_form' => false );
$url=array();



foreach($_FILES as $file){

    $uploadimage= $file;

    $movefile = wp_handle_upload( $uploadimage, $upload_overrides );
        if ( $movefile ) {

            if($movefile['url']) {
                $url[]=$movefile['url'];
            } else {
                $url['errors'][]="error ".$movefile['file']." is not valid";
            }
    } else {

    }
}


$url['errors'][]="error is not valid";
echo json_encode($url);
exit; 



}

add_action('wp_ajax_uploadimg', 'uploadimg');
add_action('wp_ajax_nopriv_uploadimg', 'uploadimg');

Edit

Try Blob , FileReader ?

see

https://developer.mozilla/en-US/docs/Web/API/Blob

https://developer.mozilla/en-US/docs/Web/API/File

How do I read out the first 4 bytes in javascript, turn it into an integer and remove the rest?