Html multiple file input - javascript access and delete files

Question

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.net/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);
        }

    }

Late to the party but I tried this jsfiddle.net/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
– isaac weathers, Commented Oct 2, 2014 at 4:59
aha... it was the multiple tags: jsfiddle.net/ryrfS/8 so taking your fiddle, comment out the preventDefault and remove the multiple attributes from all declarations of the input. — isaac weathers
– isaac weathers, Commented Oct 2, 2014 at 5:20
possible duplicate of Remove selected file(s) before upload with Javascript — Ciro Santilli OurBigBook.com
– Ciro Santilli OurBigBook.com, 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
– 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.com
– Ciro Santilli OurBigBook.com, Commented Nov 8, 2014 at 8:42

David · Accepted Answer · 2014-04-20 16:20:19Z

4

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');

answered Apr 20, 2014 at 16:20

David

5,9373 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

b3tac0d3 Over a year ago

Fantastic answer. No idea why it doesn't have more up votes but it helped me out a lot. Thank you!

Rudey Over a year ago

Am I missing something? OP asked for deleting files inside a multi select, this answer doesn't seem to do that.

David Over a year ago

@RuudLenders you can't modify the files using js (at the time anyway not sure about now, think you can with FF) which is a browser restriction, but you can append to formdata and upload that way using ajax. Because you are appending to formdata, if you want to remove a file, its easy enough to do, just don't append or remove afterwards. It is limited in scope to javascript and ajax submissions.

Community · Accepted Answer · 2017-05-23 11:59:23Z

1

Edit

Try Blob , FileReader ?

see

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

https://developer.mozilla.org/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?

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Apr 18, 2014 at 19:28

guest271314

1

7 Comments

David Over a year ago

Hi mate, it is a variable position, the issue i'm having is specifically the .files of a multiple file upload. The splice itself may not be the correct method for it.

guest271314 Over a year ago

@David At original post, var inputname= 3; jQuery('#i'+inputid).splice(inputname, 1); // delete 3rd file, etc....not working!!!!!!! , as best could gather, .splice() method's index perhaps 0-based , i.e.g. atorginal post, if inputname = 3, perhaps corresponding to index 4 of the files array ? see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . perhaps, see also developer.mozilla.org/en-US/docs/Web/API/Blob ?

David Over a year ago

apologies if that caused confusion, the 3 is a sample number. The issue is .splice dosen't modify the dom element if you check the jsfiddle and delete a element, all the elements are still in the object...ill try and modify the question above so its a bit clearer:)

guest271314 Over a year ago

Is requirement to a) get and store file object(s) as variable, b) then access a specific file object within the variable holding, possibly, multiple file objects, c) adjust, remove a specific DOM element within the specified file object ? Please clarify, Thanks

David Over a year ago

c- adjust the specific file upload value for that element.

|

Collectives™ on Stack Overflow

Html multiple file input - javascript access and delete files

2 Answers 2

3 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related