drag and drop folder upload JavaScript with php

Featured

October 19, 2022 in Tips and Tricks

drag and drop folder upload JavaScript with php

<!-- Drag Drop Upload Code -->

<p>Drag files and/or directories to the box below!</p>

<div id="dropzone">
  <div id="boxtitle">
    Drop Files Here
  </div>
</div>

<h2>Directory tree:</h2>

<ul id="listing"></ul>

<script>
var dropzone = document.getElementById("dropzone");
var listing = document.getElementById("listing");

function scanAndLogFiles(item, container) {
  var elem = document.createElement("li");
  elem.innerHTML = item.name;
  container.appendChild(elem);
  if (item.isDirectory) {
    console.log('DIR '+item.webkitRelativePath);
  }
  if (item.isFile) {
    console.log('FILE '+item.webkitRelativePath);
  }
  if (item.isDirectory) {
    var directoryReader = item.createReader();
    var directoryContainer = document.createElement("ul");
    container.appendChild(directoryContainer);

    directoryReader.readEntries(function(entries) {
      entries.forEach(function(entry) {
        scanAndLogFiles(entry, directoryContainer);
      });
    });
  }
}

dropzone.addEventListener(
  "dragover",
  function(event) {
    event.preventDefault();
  },
  false
);

dropzone.addEventListener(
  "drop",
  function(event) {
    var items = event.dataTransfer.items;

    event.preventDefault();
    listing.innerHTML = "";

    for (var i = 0; i < items.length; i++) {
      var item = items[i].webkitGetAsEntry();

      if (item) {
        scanAndLogFiles(item, listing);
      }
    }
  },
  false
);
</script>
<style>
#dropzone {
  text-align: center;
  width: 300px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 4px dashed red;
  border-radius: 10px;
}

#boxtitle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: black;
  font: bold 2em "Arial", sans-serif;
  width: 300px;
  height: 100px;
}
</style>

October 18, 2022 in Health Care and Wellness

Put the record count at the top of the table instead of the bottom

    <script>
         $(document).ready(function() {

$('#example').DataTable( {
/*  "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 0 ] }
   ]*/
   "columnDefs": [
    {"orderable": true, "targets": [1] },
    {'searchable' : true, 'targets' : [1] 
},
],
"dom": '<"wrapper"flipt>', //total on top of datatable jquery
});

});
$(document).ready(function(){
 //Date range picker
  $('#reservation').daterangepicker()
});
    </script>

October 18, 2022 in Tips and Tricks

DataTables Tricks

Example 1


 $(document).ready(function() {

  $( "#selectType" ).change(function() {
  $('#example_filter input[type="search"]').val($(this).val()).keyup();
});

$('#example').DataTable( {
/*  "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 0 ] }
   ]*/
   "columnDefs": [
    { "orderable": false, "targets": [1] },
    { 'searchable'  : false, 'targets' : [9] 
},
    
],
"order": [[ 1, "desc" ]],
//"dom": 'Plfrtip',
"dom": '<"wrapper"flipt>', //total on top of datatable jquery
//"dom": 'lrtip',
//"dom": '<lf<t>ip>',
//"dom": '<"top"i>rt<"bottom"flp><"clear">',
searchPanes: {
            viewTotal: true
        },
        "orderCellsTop": true,
        "fixedHeader": true,
});

});

Example 2

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        if(title == 'Status'){
        $(this).html( '<input type="text" size="5px" placeholder="'+title+'" />' );
        }
    });
 
    // DataTable
    var table = $('#example').DataTable({
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
 
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        },
        "columnDefs": [
        { "orderable": false, "targets": [1] },
        { 'searchable'  : false, 'targets' : [10] 
    },
        
    ],
    //"order": [[ 5, "asc" ]]
    });
 
} );