5

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

    }
David
  • 5,897
  • 3
  • 24
  • 43
  • Late to the party but I tried this http://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 Oct 02 '14 at 04:59
  • aha... it was the multiple tags: http://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 Oct 02 '14 at 05:20
  • possible duplicate of [Remove selected file(s) before upload with Javascript](http://stackoverflow.com/questions/9337793/remove-selected-files-before-upload-with-javascript) – Ciro Santilli OurBigBook.com Nov 07 '14 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 Nov 08 '14 at 01: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 Nov 08 '14 at 08:42
  • id see the other question as a broad method of dealing with image uploads, the question provides no code to demonstrate the method they are trying, whereas this q relates specifically to the html multiple file element and how to modify in place. – David Nov 08 '14 at 12:37

2 Answers2

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');
David
  • 5,897
  • 3
  • 24
  • 43
  • Fantastic answer. No idea why it doesn't have more up votes but it helped me out a lot. Thank you! – b3tac0d3 Feb 10 '16 at 06:59
  • Am I missing something? OP asked for deleting files inside a multi select, this answer doesn't seem to do that. – Rudey Apr 21 '16 at 10:18
  • @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. – David Apr 21 '16 at 12:02
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?

Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
  • 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. – David Apr 18 '14 at 19:48
  • @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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice . perhaps, see also https://developer.mozilla.org/en-US/docs/Web/API/Blob ? – guest271314 Apr 18 '14 at 20:08
  • 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:) – David Apr 18 '14 at 20:17
  • 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 – guest271314 Apr 18 '14 at 20:31
  • c- adjust the specific file upload value for that element. – David Apr 18 '14 at 20:38
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/50989/discussion-between-guest271314-and-david) – guest271314 Apr 18 '14 at 20:44
  • thanks for the suggestion, i was trying the blob you suggested but couldn't get a working example. i actually used html FormData to do this in the end, i still need a workaround for ie9 which i will post another Q for! – David Apr 20 '14 at 16:13