FloatBackOfffice/application/views/upload/cardimages.php

<div class="row">

    <div class="col-lg-4">
        <div class="panel panel-flat" style="background-color:lightblue;">


            <form class="form-horizontal" action="?" method="POST" enctype="multipart/form-data">
                <fieldset class="content-group"><?= $message ?>
                    <legend class="text-bold">Basic inputs</legend>



                    <div class="form-group">
                        <label class="col-lg-4 control-label text-semibold"> Select File:</label>
                        <div class="col-lg-8">
                            <input type="file" name="cardimg[]" class="file-input" multiple>
                            <span class="help-block">Upload images for card systems </code>.</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Category</label>
                        <div class="col-lg-8">
                            <?= $catid ?>
                        </div>
                    </div>



                    <input type="submit" value="Upload">

                </fieldset>

            </form>



        </div>
        <div class="jumbotron" style="background-color:#F3DFE5; padding:10px;">
            <h3>Card Image Standard</h3>
            <p>The app is optimized for image 400X600px jpg files only. The image must be optimized for web use, the smaller the size the better</p>
        </div>

    </div>

    <div class="col-lg-8">


        <!-- Media library -->
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title text-semibold">Card Images</h6>

            </div>

            <div class="table-responsive">
                <div class="col-lg-12">
                    <form id="category_filter_form" class="search-block" name="category_filter_form" method="get" action="?" autocomplete="off">
                        <div class="form-group">
                            <label for="unique_id">Unique ID</label>
                            <input type="search" class="form-control" id="unique_id" name="unique_id" value='<?= isset($unique_id) ? $unique_id : '' ?>'>
                        </div>
                        <div class="form-group">
                            <?= $card_category ?>
                        </div>
                        <div class="form-group">
                            <label for="from_date">Date</label>
                            <div class="search-by-date">
                                <input type="search" class="form-control" id="from_date" name="from_date" value='<?= isset($from_date) ? $from_date : '' ?>'>
                                &nbsp;&nbsp;
                                <input type="search" class="form-control" id="to_date" name="to_date" value='<?= isset($to_date) ? $to_date : '' ?>'>
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary btn-search" type="submit">Search</button>
                        </div>
                    </form>
                </div>
                <div class="col-lg-8" style="float: right">
                    <div class="table-responsive" style="float: right"> <?= $link ?> </div>
                </div>
                <div class="col-lg-4" style="float: left">
                    <div class="table-responsive">
                        <button type="button" class="btn btn-primary" id="download-images">Download</button>
                    </div>
                </div>
                <table class="table table-striped media-library table-lg col-lg-12 ">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="check-all" class="styled"></th>
                            <th style="width:60px;">Preview</th>
                            <th>Category/Full Path</th>
                            <th style="width:150px;">File info</th>
                            <th class="text-center" style="width:40px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($images as $image) { ?>
                            <tr>
                                <td><input type="checkbox" class="styled checkbox-selected"></td>
                                <td style="padding:0px;">
                                    <a href="<?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?>" data-popup="lightbox">
                                        <img src="<?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?>?size=80x80" alt="" class="img-rounded img-preview">
                                    </a>
                                </td>
                                <td>
                                    <b>Category:</b> <?= $image['category_name'] ?> <br>
                                    <a href="<?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?>"><?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?></a><br>
                                    <b>Unique ID:</b> <?= $image['uniqueid'] ?> <br>
                                    <b>Date Added:</b> <?= $image['created'] ?> <br>
                                </td>
                                <td width="150px;">
                                    <ul class="list-condensed list-unstyled no-margin">
                                        <li><span class="text-semibold">Size: <?= $image['file_size'] ?></span></li>
                                        <li><span class="text-semibold">Format: <?= $image['format'] ?></span></li>
                                        <li><span class="text-semibold">Dim: <?= $image['dimensions'] ?>px</span></li>
                                    </ul>
                                </td>
                                <td class="text-center">

                                </td>
                            </tr>
                        <?php } ?>
                        <!-- tr>
                          <td><input type="checkbox" class="styled"></td>checkbox-selected
                              <a href="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed3.jpg" data-popup="lightbox">
                                  <img src="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed3.jpg" alt="" class="img-rounded img-preview">
                              </a>
                          </td>
                          <td>Category: General <br> <a href="#">https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed3.jpg</a></td>
                          <td><a href="#">UQ0003</a></td>
                          <td>Jun 10, 2015</td>
                          <td>
                              <ul class="list-condensed list-unstyled no-margin">					                        		
                                  <li><span class="text-semibold">Size:</span> 215 Kb</li>
                                  <li><span class="text-semibold">Format:</span> .jpg</li>
                                  <li><span class="text-semibold">Dim:</span> 300x500px</li>
                              </ul>
                          </td>
                          <td class="text-center">

                          </td>
                      </tr>


                      <tr>
                          <td><input type="checkbox" class="styled"></td>
                          <td>
                              <a href="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed2.jpg" data-popup="lightbox">
                                  <img src="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed2.jpg" alt="" class="img-rounded img-preview">
                              </a>
                          </td>
                          <td>Category: Data Collection <br> <a href="#">https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed2.jpg</a></td>
                          <td><a href="#">UQ0002</a></td>
                          <td>Jun 10, 2015</td>
                          <td>
                              <ul class="list-condensed list-unstyled no-margin">					                        		
                                  <li><span class="text-semibold">Size:</span> 215 Kb</li>
                                  <li><span class="text-semibold">Format:</span> .jpg</li>
                                  <li><span class="text-semibold">Dim:</span> 300x500px</li>
                              </ul>
                          </td>
                          <td class="text-center">

                          </td>
                      </tr>

                      <tr>
                          <td><input type="checkbox" class="styled"></td>
                          <td>
                              <a href="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed4.jpg" data-popup="lightbox">
                                  <img src="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed4.jpg" alt="" class="img-rounded img-preview">
                              </a>
                          </td>
                          <td>Category: Offers <br> <a href="#">https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed4.jpg</a></td>
                          <td><a href="#">UQ0004</a></td>
                          <td>Jun 10, 2015</td>
                          <td>
                              <ul class="list-condensed list-unstyled no-margin">					                        		
                                  <li><span class="text-semibold">Size:</span> 215 Kb</li>
                                  <li><span class="text-semibold">Format:</span> .jpg</li>
                                  <li><span class="text-semibold">Dim:</span> 300x500px</li>
                              </ul>
                          </td>
                          <td class="text-center">

                          </td>
                      </tr -->

                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('select[name="category_filter"]').on('change', (function(e) {
            e.preventDefault();
            $('#category_filter_form').attr('action', window.origin + '/uploads/cardimages').submit();
        }));

        $('#download-images').on('click', function() {

            let images = [];

            $.each($(".checkbox-selected:checked"), function() {
                images.push($(this).closest('tr').find('td:eq(2)').find('a').attr('href'));
            });

            if (!images) {
                return;
            }

            $(this).button('loading');

            Promise.all(images.map(image => {
                return get(image);
            })).then(values => {
                $('#download-images').button('reset');
            });
        });

        function get(image) {
            return new Promise(function(resolve, reject) {
                let xhr = new XMLHttpRequest();

                xhr.onerror = function() {
                    reject(Error("Network Error"));
                };

                xhr.open('GET', image);

                xhr.onload = function() {
                    if (xhr.status == 200) {
                        let img = document.getElementById('img');
                        let a = document.createElement('a');
                        let url = window.URL.createObjectURL(this.response);
                        let file_name = image.split('/')[4];
                        a.href = url;
                        a.download = file_name;
                        document.body.append(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(image);
                        resolve(xhr.response);
                    } else {
                        reject(Error(xhr.statusText));
                    }
                };

                xhr.responseType = 'blob';

                xhr.send();
            });
        }

        $("#check-all").click(function() {
            $('.checkbox-selected').prop('checked', this.checked);
        });

        $(".checkbox-selected").change(function() {
            if ($('.checkbox-selected:checked').length == $('.checkbox-selected').length) {
                $("#check-all").prop('checked', true);
            } else {
                $("#check-all").prop('checked', false);
            }
        });
    });

    $(document).ready(function() {
        // add library datepicker
        addDatePicker('#from_date, #to_date');
    })
</script>

<style>
    .search-block {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-end;
    }

    .search-by-date {
        display: flex;
        flex-direction: row;
    }

    .search-by-date input {
        width: 95px;
    }
</style>