FileUpload "Insert Image" causing http/https problems

MasterOne

When you upload an image and click "Insert Image" it inserts

<img src="http://www.example.tld/uploads/FileUpload/..." />

or

<img src="https://www.example.tld/uploads/FileUpload/..." />

(depending if you are accessing the forum by http or https) into the text box, however it's better to have it insert only

<img src="/uploads/FileUpload/..." />

not not have is cause any issues afterwards when accessing the site either by http or https.

I thought there is an easy fix, I tracked it down to line 507+ of plugins/FileUpload/js/fileupload.js:

// Add "insert image" button
if (JResponse.MediaResponse.FinalImageLocation != '') {
  var ImageAnchor = jQuery(FileListing.find('a.InsertImage'));
  ImageAnchor.attr('href', JResponse.MediaResponse.FinalImageLocation);
  ImageAnchor.show();
  ImageAnchor.live('click', function() {
    var insertimg = '<img src="'+ImageAnchor.attr('href')+'" />';
    // Test if we're working with CLEditor
    var wysiwyg = jQuery(FileListing.parents('form').find('iframe'));
      if (wysiwyg) {
        // Insert into WYSIWYG iframe
        var editorbox = wysiwyg.contents().find('body');
        editorbox.html(function(index, oldhtml) { return oldhtml+insertimg });
      }
      else {
        // Normal textarea (no WYSIWYG)
        var txtbox = jQuery(FileListing.parents('form').find('textarea'));
        txtbox.val(txtbox.val()+insertimg);
      }
      return false;
   });
}

but me not knowing JavaScript couldn't solve that problem.

Anyone any idea for a quick patch?

hgtonight

Is this on 2.0.18 or 2.1b1?

MasterOne

@hgtonight said:
Is this on 2.0.18 or 2.1b1?

Sorry, I always forget to mention, it's on 2.1b1.

hgtonight

I don't mean to hassle you about it. I usually forget and like to see the number when I come back to threads.

It seems it adds the webroot by default, because this site is set up to use a CDN. I would straight up just truncate it in js.

// Add "insert image" button
if (JResponse.MediaResponse.FinalImageLocation != '') {
var ImageAnchor = jQuery(FileListing.find('a.InsertImage'));
var truncatedLocation = JResponse.MediaResponse.FinalImageLocation.split('/').slice(3).join('/')
ImageAnchor.attr('href', truncatedLocation);

I couldn't test it, but it should work.

peregrine

@hgtonight

I couldn't test it, but it should work.

I always enjoy these words . but its a good practice to provide the caveat.

I didn't test your solution - but I like it (who can argue with split.slice, join). .

MasterOne

@hgtonight

It's almost working, only the leading slash is missing:

<img src="uploads/FileUpload/..." />

I have played around and tried to insert the slash in the var insertimg line, but that didn't work for some reason:

// Add "insert image" button
if (JResponse.MediaResponse.FinalImageLocation != '') {
  var ImageAnchor = jQuery(FileListing.find('a.InsertImage'));
  var truncatedLocation = JResponse.MediaResponse.FinalImageLocation.split('/').slice(3).join('/');
  ImageAnchor.attr('href', truncatedLocation);
  ImageAnchor.show();
  ImageAnchor.live('click', function() {
    var insertimg = '<img src="/'+ImageAnchor.attr('href')+'" />';
    // Test if we're working with CLEditor
    var wysiwyg = jQuery(FileListing.parents('form').find('iframe'));
      if (wysiwyg) {
        // Insert into WYSIWYG iframe
        var editorbox = wysiwyg.contents().find('body');
        editorbox.html(function(index, oldhtml) { return oldhtml+insertimg });
      }
      else {
        // Normal textarea (no WYSIWYG)
        var txtbox = jQuery(FileListing.parents('form').find('textarea'));
        txtbox.val(txtbox.val()+insertimg);
      }
      return false;
   });
}

What's the proper way of inserting the slash in front of truncatedLocation?

hgtonight

Just concatenate it.

var truncatedLocation = '/' + JResponse.MediaResponse.FinalImageLocation.split('/').slice(3).join('/');

MasterOne

@hgtonight

It's working!