Responsive filemanager callback function

Question

I use the standalone version of Responsive Filemanager 9 for image-selection on a < input> #image_link.

Where and how the responsive_filemanager_callback function should be used?

I'm trying to get it work as mentioned in the RFM documentation and the code below. This is needed to update the src attribute of the < img> #image_preview after selecting an image in RFM9.

This is my code:

<input id="image_link" name="link" type="text" value="">
<a class="btn iframe-btn" type="button" href="<?=FILEMANAGER_PATH;?>/dialog.php?type=1&field_id=image_link">Select</a>
<img id="image_preview" src="" />;

<script>
$('.iframe-btn').fancybox({ 
    'width'     : 900,
    'height'    : 600,
    'type'      : 'iframe',
    'autoScale' : false
});

$('#image_link').on('change',function(){
  alert('change triggered');
});

function responsive_filemanager_callback(field_id){ 
    console.log(field_id);
    var url=jQuery('#'+field_id).val();
    alert('update '+field_id+" with "+url); 
    //your code
} 
</script>

The $('#image_link')on.('change') function doesn't recognize the changes by RFM.

Thanks for your inputs!

Answer 1

Create a link:

<a href='Address_Of_dialog.php?type=0&field_id=name'>open_fancybox</a>

Notice the last part in the href attribute, the field_id parameter, that is the ID of an input field,

<input id='name'>

Now if you click the link the fancybox will open, you should write this code to open fancybox:

$('a').fancybox({
        type: 'iframe',
        minHeight: '600'
    });

Then if you click on any of the images in Responsive filemanager, the url of that image will be printed on the input field, and the fancybox will close automatically.

So, you don't need any function in order to get information out of Responsive filemanager, but if you want to do anything after that (like previewing the selected image), you can add the function:

function responsive_filemanager_callback(field_id){ 
   //write whatever you want
   //you can change the src of an <img> using the <input> value
}

This function will trigger as soon as the image selected and the fancybox closed, so it is pretty handy and easy to use.

If you want to have a clean address of your file you can add relative_url=1 to the href address, like this:

<a href='Address_Of_dialog.php?type=0&field_id=name&relative_url=1'>open_fancybox</a>

Answer 2

My solution was to modify the include.js file in filemanager/js directory.. (or include.min.js. it is defined in dialog.php 246 line )

So, in include.js file in the 500th line you can find a function apply_img(file,external)

add into the end of function the following lines:

 if (typeof **parent.**responsive_filemanager_callback == 'function')
    { parent.responsive_filemanager_callback(external);  } 

    }

The "parent." is the most important.. I guess, it is needed because of the iFrame.. So if you add a .responsive_filemanager_callback function to your html document, it will run it.