To integrate Roxy Fileman into your CMS or any other web application edit javascript file located in fileman/js/custom.js and fill the function «FileSelected()». This function has one argument – object containing following properties:
fullPath – path to the file – absolute from your site root.
path – directory in which the file is located – absolute from your site root.
size – size of the file in bytes.
time – timestamp of last modification.
name – file name.
ext – file extension.
width – if the file is image, this will be the width of the original image, 0 otherwise.
height – if the file is image, this will be the height of the original image, 0 otherwise.
Example:
function FileSelected(file){
// Set the value of field sent to Fileman via URL param "field".
opener.document.getElementById(RoxyUtils.GetUrlParam('field')).value = file.fullPath;
// Set the source of an image which id is sent to Fileman via URL param "img".
opener.document.getElementById(RoxyUtils.GetUrlParam('img')).src = file.fullPath;
// Close file manager if it's opened in separate window.
self.close();
// Close file manager if it's opened in JQuery dialog.
$(opener.document).find('#dialog_element_id').dialog('close');
}
Working example
You need JQuery and JQuery UI libraries to run this example! See http://jqueryui.com for usage details.
Click the image below to select another one. View source
This is the changed content of fileman/js/custom.js
function FileSelected(file){
/**
* file is an object containing following properties:
*
* fullPath - path to the file - absolute from your site root
* path - directory in which the file is located - absolute from your site root
* size - size of the file in bytes
* time - timestamo of last modification
* name - file name
* ext - file extension
* width - if the file is image, this will be the width of the original image, 0 otherwise
* height - if the file is image, this will be the height of the original image, 0 otherwise
*
*/
$(window.parent.document).find('#customRoxyImage').attr('src', file.fullPath);
window.parent.closeCustomRoxy();
}
This is the changed content of fileman/js/custom.js
function FileSelected(file){
/**
* file is an object containing following properties:
*
* fullPath - path to the file - absolute from your site root
* path - directory in which the file is located - absolute from your site root
* size - size of the file in bytes
* time - timestamo of last modification
* name - file name
* ext - file extension
* width - if the file is image, this will be the width of the original image, 0 otherwise
* height - if the file is image, this will be the height of the original image, 0 otherwise
*
*/
// Get the ID of the input to fill
var fieldId = RoxyUtils.GetUrlParam('txtFieldId');
$(window.parent.document).find('#' + fieldId).attr('value', file.fullPath);
window.parent.closeCustomRoxy2();
}
This is the code in your HTML page.
<script>
function openCustomRoxy2(){
$('#roxyCustomPanel2').dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy2(){
$('#roxyCustomPanel2').dialog('close');
}
</script>
<input type="text" id="txtSelectedFile" style="border:1px solid #ccc;cursor:pointer;padding:4px;width:80%;" value="Click here to select a file" onclick="openCustomRoxy2()">
<div id="roxyCustomPanel2" style="display: none;">
<iframe src="/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile" style="width:100%;height:100%" frameborder="0">
</iframe>
</div>
