1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'jQuery' started by PoPSiCLe, Oct 17, 2016.

  1. #1
    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.
    SEMrush
    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.
     
    PoPSiCLe, Oct 17, 2016 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,851
    Likes Received:
    1,084
    Best Answers:
    22
    Trophy Points:
    400
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #3
    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
     
    PoPSiCLe, Oct 18, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #4
    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.
     
    PoPSiCLe, Oct 18, 2016 IP
    qwikad.com likes this.