PHP / Javascript mod_xsendfile (not entirely sure what's causing the problem)

Okay. I'm posting in the general programming forum, since I'm not entirely sure what's causing the issue.

I have a an ajax-call which is submitting to a php-file, which returns a file via header (X-sendfile) - this works fine on FIRST call, and every subsequent calls - IF I "start over", ie close the image file that is returned, and click a new image-thumbnail. However, I added some "next" and "prev" buttons, which for some reason do NOT work - I get an error returned (which is a javascript error, but it's because of the return data):
TypeError: Argument 1 is not valid for any of the 2-argument overloads of URL.createObjectURL.

The reason for this, I believe, is that for that first call, the return value is "null" (which it should be) - on the second one, when pressing "prev image"-button, I get a base64-encoded dataset back (I think - it might be something else entirely).

First, the PHP file returning the data:

[/COLOR][/COLOR]
[COLOR=#ff0000][COLOR=#000000]<?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'].'');
     exit;
  }
}
?>

PHP:

I'm calling this via jQuery ajax:

$('.lightbox').click(function(e) {
     e.preventDefault();
     var $this = $(this);
     var linkName = $(this).attr('href').split('=')[1];
       $.ajax({
  url: 'showfile.php',
  type: 'GET',
  dataType: 'binary',
  data: 'file='+linkName+'',
  responseType: 'blob',
  // headers:{'Content-Type':'image/jpeg','X-Requested-With':'XMLHttpRequest'},
  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');
       $('.nextbutton,.prevbutton').click(function(e) {
         if ($(e.target).hasClass('prevbutton')) {
           var linkName = $this.parent('.pictures').prev('li.pictures').find('a').attr('href').split('=')[1];
           $.ajax({
             url: 'showfile.php',
             type: 'GET',
             datatype: 'binary',
             data: 'file='+linkName+'',
             responseType: 'blob',
             processData: false,
             success: function(result2) {
               // var image = new Image();
               image.src = URL.createObjectURL(result2);
               $('#lightbox_container img').remove();
               $('#lightbox_container').append(image);
               image.onload = function() { var imageWidth = image.width/2; $('#lightbox_container').css({'margin-left':'-'+imageWidth+'px'}) };
             }
           })
         }
       })
  }
     });
  })

Code (markup):

The first ajax-call works, and returns the image, populates the correct element, and shows the image. When I click the .prevbutton, and activate the second ajax-call (within the success-call for the first one), for some reason it doesn't return the correct data. I'm not sure why. If I close the image (zeroing out the element), and click another image, it loads fine (again).

So, I'm wondering if there is an issue running a second ajax-call within the success-call of the first one, or if there is some issue with the PHP-file, a connection not being closed, or something else entirely.

I also use a helper-function for the ajax-call, I'm posting that as well, since that might have something to do with it, of course:

$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){
  // check for conditions and support for blob / arraybuffer response type
  if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
  return {
    // create new XMLHttpRequest
    send: function(headers, callback){
         // setup all variables
      var xhr = new XMLHttpRequest(),
         url = options.url,
         type = options.type,
         async = options.async || true,
         // blob or arraybuffer. Default is blob
         dataType = options.responseType || 'blob',
         data = options.data || null,
         username = options.username || null,
         password = options.password || null;
               
      xhr.addEventListener('load', function(){
           var data = {};
           data[options.dataType] = xhr.response;
           // make callback and send data
           callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
      });
      xhr.open(type, url, async, username, password);
             
         // setup custom headers
         for (var i in headers ) {
           xhr.setRequestHeader(i, headers[i] );
         }
             
      xhr.responseType = dataType;
      xhr.send(data);
      },
    abort: function(){
    jqXHR.abort();
    }
  }
  }
});

Code (markup):

 

Jeezus X christ. I feel stupid now. It's a stupid, stupid error. In the second ajax-call, datatype should be dataType. That fixes the problem.

 

No, you are *not* stupid. You are highly competent and *that* is why you found the error.

 

Haha. Well... yes. If it hadn't been for the fact that I was the one that TYPED IN the ajax-call, instead of just copy/pasting the one that was already working, with minor changes...