Przeglądanie załączników

Mechanizm przeglądania w aplikacji plików graficznych i pdf

Controller/FilesController.php

use Laminas\Diactoros\Stream;
....
class FilesController extends AppController
{
...
  public function view($id=null)
    {
        $file = $this->Files->get($id);
        if($file) {
            $path = $file->dir . DS . $file->filename;
            $stream = new Stream($path, 'rb');
            $response = $this->response;

            switch($file->ext)
            {
              case 'png':
              $response = $response->withType('png');
              break;
              case 'jpg':
              $response = $response->withType('jpg');
              break;
              case 'jpeg':
              $response = $response->withType('jpg');
              break;
              default:
              $response = $response->withType('pdf');
            }

            $response = $response->withHeader('Content-Disposition', 'inline');
            $response = $response->withBody($stream);
            return $response;
            exit;
        }
    } // view
}

Templates/Files/view.php

<div class="bg-white p-3 border rounded">
  <div class="row">
    <div class="bg-white col-md-6">
      <p class="text-dark mb-2"><b>Załączniki</b> - kliknij aby uzyskać podgląd załącznika</p>
      <?php foreach($files as $file): ?>
        <span class="btn btn-light ml-2 mb-2 text-primary pointer file-link" data-file-id="<?= $file->id ?>">
           <?= h($file->orygname) ?>
        </span>
      <?php endforeach; ?>
    </div>
    <div class="bg-white text-center col-md-6">
      <p class="text-dark mb-2"><b>Podgląd</b>
        <span class="ml-3 hidden pointer" title="Ukryj podgląd" data-toggle="tooltip" id="clear-viewer">
          <i class="fa fa-times text-warning"></i>
        </span>
      </p>
     <iframe src="" style="width: 100%; border: 1px solid lightgrey; height: 500px;" class="mx-auto hidden" id="file-viewer"></iframe>
    </div>
  </div>
</div>

<?= $this->Html->script('Files/preview-image', ['block' => true]) ?>

/js/Files/preview-image.js

$(".file-link").on('click', function(){
  var file_id = $(this).data('file-id');
  if(file_id) {
    var pathname = '/files/view/'+ file_id;
    $('#file-viewer').attr('src', pathname).removeClass("hidden");
    $('#clear-viewer').removeClass("hidden");
  }
});

// Ukryj widok
$('#clear-viewer').on('click', function(){
    $('#file-viewer').attr('src', '').addClass("hidden");
    $('#clear-viewer').addClass("hidden");
});