UniSharp / laravel-filemanager

Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.
https://unisharp.github.io/laravel-filemanager/
MIT License
2.08k stars 720 forks source link

Get relative path without the domain #1233

Open nasirkhan opened 5 months ago

nasirkhan commented 5 months ago

I am using the Standalone button integration on my project. When I select an image it returns the path.

The issue is the file path includes the domain name. My local, staging, and production have different domains, so when I try to use the production database on my local, none of the image paths work.

I believe this is a bug! if this behavior can be changed from the config please let me know. Without a relative path, I will not be able to use this package at all!

Expected Behavior

A relative path will be returned, without the domain name.

Actual Behavior

The package returns a filepath including the domain name.

streamtw commented 5 months ago

I believe this can be accomplished by changing stand-alone-button.js or codes in Javascript Integration document.

Take javascript integration document as example, the default integration looks like this (notice items.map):

var lfm = function(id, type, options) {
  let button = document.getElementById(id);

  button.addEventListener('click', function () {
    var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
    var target_input = document.getElementById(button.getAttribute('data-input'));
    var target_preview = document.getElementById(button.getAttribute('data-preview'));

    window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
    window.SetUrl = function (items) {
      var file_path = items.map(function (item) {
        return item.url;
      }).join(',');

      // set the value of the desired input to image url
      target_input.value = file_path;
      target_input.dispatchEvent(new Event('change'));

      // clear previous preview
      target_preview.innerHtml = '';

      // set or change the preview image src
      items.forEach(function (item) {
        let img = document.createElement('img')
        img.setAttribute('style', 'height: 5rem')
        img.setAttribute('src', item.thumb_url)
        target_preview.appendChild(img);
      });

      // trigger change event
      target_preview.dispatchEvent(new Event('change'));
    };
  });
};

By changing how urls are handled, we can remove the domains from image urls:

var file_path = items.map(function (item) {
  var file_url = new URL(item.url);
  return file_url.href.substring(file_url.origin.length);
}).join(',');

The reason why domain part is left in the url, is that I think it is simpler to use javascript to remove domain, rather than to append the domain afterward. If laravel-filemanager is served as a stand alone image server(uses a different domain other than the application server), the domain part is necessary.

Please let me know it this solves your issue.

nasirkhan commented 5 months ago
var file_path = items.map(function (item) {
  var file_url = new URL(item.url);
  return file_url.href.substring(file_url.origin.length);
}).join(',');

This works. Thank you. The issue was solved partially.

When i use the file laravel-filemanager with WYSIWYG Editor it includes the domain in the content.

Do you have any plan to control this via config? In my case, I am not using this filemanager for a standalone file server. So this is a big problem for me, as it impacts the development of the application in the local and products.

streamtw commented 5 months ago

Understood. Current solution is not valid with WYSIWYG editors.

In that case, the following workaround should do the trick: Around the line https://github.com/UniSharp/laravel-filemanager/blob/v2.9.0/public/js/script.js#L722 of script.js

Replace:

var url = items[0].url;

With:

var url_to_parse = new URL(items[0].url);
var url = url_to_parse.href.substring(url_to_parse.origin.length);

The previous workaround for stand-alone button should be discarded with this workaround.

Thanks for the notice of these two use cases. New configuration for relative path seems good. Since this package involves both frontend and backend, I will take some time thinking about how to organize the new configuration with older ones.

nasirkhan commented 5 months ago

Thank you for your response. I will try this new fix. But again changing the library file is not ideal and I might for. But it will fix the issue for now.

It would be great if you think about this scenario and try to implement via the config.

Nasir Khan Saikat https://nasirkhn.com

On Sat, Apr 27, 2024, 8:58 PM Stream @.***> wrote:

Understood. Current solution is not valid with WYSIWYG editors.

In that case, the following workaround should do the trick: Around the line https://github.com/UniSharp/laravel-filemanager/blob/master/public/js/script.js#L722 of script.js

Replace:

var url = items[0].url;

With:

var url_to_parse = new URL(items[0].url); var url = file_url.href.substring(file_url.origin.length);

The previous workaround for stand-alone button should be discarded with this workaround.

Thanks for the notice of these two use cases. New configuration for relative path seems good. Since this package involves both frontend and backend, I will take some time thinking about how to organize the new configuration with older ones.

— Reply to this email directly, view it on GitHub https://github.com/UniSharp/laravel-filemanager/issues/1233#issuecomment-2080845160, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADA5OZHSWZIPMP563EWU3DY7O4IJAVCNFSM6AAAAABGQ3777GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBQHA2DKMJWGA . You are receiving this because you authored the thread.Message ID: @.***>