jQuery AJAX + binary/blob - return and show image/other files

Okay, I'm in the process of creating a non-database based gallery-app, and while doing so, I was pondering a way to load full version of images (and other files) without revealing the actual link for the image.

While I can do that using PHP:

<?php
require_once('conf/config.php');
if (!session_id()) { session_start(); };
   if ($isloggedin) {
     if (isset($_GET['filename'])) {
//       $getFile = readfile($_SERVER['DOCUMENT_ROOT'].'/'.$userpath.$username.'pictures/'.$_GET['filename']);
       header("X-Sendfile: ".$_SERVER['DOCUMENT_ROOT']."/users/admin/pictures/".$_GET['file']."");
       exit();
    }
    echo $getFile;
 }
?>

PHP:

it shows the image separately, on a "blank" page - which is fine, sorta, but not what I'm after.

So, I was thinking of getting the information back (hence the commented out readfile() in the above code) and displaying it in a "lightbox"-type div on the page. However, I'm having trouble actually returning the data, and showing it. So I was hoping someone had any experience either using jQuery or regular javascript to fetch and pull data and display it on the site itself, using ajax (or similar) to fetch the data.

 

Could be totally amiss, but is that what you're kinda looking for?

https://davidwalsh.name/convert-image-data-uri-javascript
https://www.npmjs.com/package/gulp-image-data-uri
https://github.com/ahomu/grunt-data-uri

 

No. The whole point of this is to send the name of the image (something like: /showfile?=picture.jpg) to the backend, and then return the raw image data and parse that data and render it. Hence not showing the raw url to the image to anyone (that will be parsed in the backend-bit only).

So, I currently tried something like this:

$('.lightbox').click(function(e) {
    e.preventDefault();
     var linkName = $(this).attr('href').split('=')[1];
    var xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function(){
       if (this.readyState == 4 && this.status == 200){
       //this.response is what you're looking for
       // handler(this.response);
       console.log(this.response, typeof this.response);
       var img = document.getElementById('lightbox_image');
       var url = window.URL || window.webkitURL;
       img.src = url.createObjectURL(this.response);
       console.log(img.src);
         }
     }
     xhr.open('GET', 'http://uploadr.loc/users/admin/pictures/'+linkName+'');
     xhr.responseType = 'blob';
     xhr.send();
  })

Code (markup):

This seems to return something, but not what I'm after - I get back something that looks like a blob, but there doesn't seem to be any real information in the return values. So I'm a bit stuck. The examples you provided sends the image-URL in javascript, which sort of goes against the whole purpose

 

Okay, seems I'm yet again solving my own problem:
Current jQuery code:

$.ajax({
  url: 'showfile.php',
  type: 'GET',
  dataType: 'binary',
  data: 'file='+linkName+'',
  responseType: 'blob',
  processData: false,
  success: function(result){
     var image = new Image();
       image.src = URL.createObjectURL(result);
       $('#lightbox_container').append(image).removeClass('hidden').addClass('visible');
       image.onload = function() { var imageWidth = image.width/2; $('#lightbox_container').css({'margin-left':'-'+imageWidth+'px'}) };
       $('#overlay').removeClass('hidden').addClass('visible');
  }
}); 

Code (markup):

The code for the showfile.php is as follows:

<?php
require_once('conf/config.php');
if (!session_id()) { session_start(); };
if ($isloggedin) {
   if (isset($_GET['file'])) {
     header('Content-type: image/jpeg');
     header('X-Sendfile: '.$_SERVER['DOCUMENT_ROOT'].'/'.$userpath.$username.'pictures/'.$_GET['file'].''); # make sure $file is the full path, not relative
  }
}
?>

PHP:

Seems like this is working fine for images, now I just need to fix it for other file-types.