Topic: Add delete button to uploaded file

hi , i want add a button to delete file when the file are uploaded , i use :

-jquery ui
-plupload full v1.5.7

this is my code :

<script type="text/javascript">
// Initialize the widget when the DOM is ready

 var pluploader_documenti_personali = $("#uploader_documenti_personali").plupload({
    // General settings
    // runtimes : 'html5,flash,silverlight,html4',
    runtimes : 'html5,html4',
    url : '<?=base_url() ?>/user_Isee/upload_documenti_personali',

    // User can upload no more then 20 files in one go (sets multiple_queues to false)
    max_file_count: 20,

    chunk_size: '1mb',

    filters : {
      // Maximum file size
      max_file_size : '10mb',
      // Specify what files to browse for
      mime_types: [
        {title : "Image files", extensions : "jpg,jpeg,png"},
        {title : "Zip files", extensions : "zip"}
      ]
    },

    // Rename files by clicking on their titles
    rename: false,

    // Sort files
    sortable: true,

    // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
    dragdrop: true,

    // Views to activate
    views: {
      list: true,
      thumbs: true, // Show thumbs
      active: 'thumbs'
    },

     multipart_params : {

        
        id_isee:'<?=$record->id?>',
        <?= csrf_token() ?> : '<?=csrf_hash() ?>',
        id_users:'<?= $_SESSION['user_id'] ?>'
    },

    buttons:{browse:true,start:true,stop:true},





    // Flash settings
    // flash_swf_url : '../../js/Moxie.swf',

    // Silverlight settings
    // silverlight_xap_url : '../../js/Moxie.xap'
  });

     pluploader_documenti_personali.init(        
         //debug
        console.log('dentro init')
    );

    pluploader_documenti_personali.bind('FileUploaded', function(up, file, result) {

        //debug
        console.log('dentro FileUploaded')


        self._handleFileStatus(file);
        self._trigger('uploaded', null, { up: up, file: file, result: result } );

        var respond=JSON.parse(result.response) ;

        if(respond.success==0){

            file.status = plupload.FAILED;
            up.trigger('UploadProgress', file);
            var imageError=true;
        }
        else{

            file.status = plupload.DONE;
            var imageError=false;
        }   

        if(this.total.queued == 0) {

            $("#message").text('All File uploaded successfully');
            setTimeout(function(){ 
            up.splice();
                $("#message").text('');
            }, 3000);

        }
    });


  // Handle the case when form was submitted before uploading has finished
  $('#form').submit(function(e) {

        var myUploader = $('#uploader').plupload('getUploader');

        // myUploader.bind('BeforeUpload', function(up, file) {

        //   up.settings.multipart_params =  {
        //                                     numero_esame:$("#numero_esame").val(),
        //                                     id_users:'<?= $_SESSION['user_id'] ?>',
        //                                     id_esami:$("#id_esame").val(),
        //                                     nome_paziente : $("#nome_paziente").val(),
        //                                     prezzo : $("#prezzo").val(),
        //                                     sconto : $("#sconto").val(),
        //                                     cognome_paziente : $("#cognome_paziente").val(),
        //                                     anamnesi: $("#anamnesi").val(),
        //                                     note:$("#note").val(),
        //                                     random_string:'<?='';// $uri->getSegment(4) ?>',
        //                                     data_nascita: $("#data_nascita").val(),
        //                                     <?= csrf_token() ?>: '<?= csrf_hash() ?>',

        //                                   }
        // });

    // Files in queue upload them first
    if (pluploader_documenti_personali.plupload('getFiles').length > 0) {


      // When all files are uploaded submit form
      pluploader_documenti_personali.on('complete', function() {
        $('#form')[0].submit();
      });


      pluploader_documenti_personali.plupload('start');

    }else if($("#id_class_nome").val()==''){

      alert("Nome  non può essere vuoto");


    }else if($("#id_class_cognome").val()==''){

      alert("Cogome  non può essere vuoto");


    }else if($("#id_class_telefono").val()==''){

      alert("Telefono non può essere vuoto");


    }else if($("#id_class_indirizzo").val()==''){

      alert("Indirizzo non può essere vuoto");


    } else if($("#id_class_civico").val()==''){

      alert("Civico non può essere vuoto");


    }else if($("#id_class_cap").val()==''){

      alert("Cap non può essere vuoto");


    }else if($("#id_id_motivo_isee").val()==''){

      alert("Devi effettuare la scelta sul motivo dell'isee");


    }else if($("#id_id_stato_civile").val()==''){

      alert("Devi effettuare la scelta sullo stato civile");


    } else {

      alert("Per proseguire devi caricare almeno 1 file");
    }
    return false; // Keep the form from submitting
  });

</script>

The file not enter in 'FileUploaded'  .

How can i insert button to delete file and delete it client side ? (server side it's no problem)

Re: Add delete button to uploaded file

solved by :

pluploader_documenti_personali.on("uploaded", function(event, args) {
           
       //debug    
       //console.log(args);

       var id_file=args['file']['id'];
       var dati_file_to_explode = JSON.parse(args['result']['response']);
       //var nome_file = 'a';

       var nome_file  = dati_file_to_explode['name'];
       var id_tabella = dati_file_to_explode['id_tabella'];


       //debug    
       console.log(id_tabella);

       var button_elimina = '<a type="button" class="btn btn-danger xs" value="'+nome_file.trim() +'" onclick="remove_file(\''+id_file.trim()+'|'+nome_file.trim()+'\')" >X<a>';

       $("#"+id_file).append(button_elimina);



    });