Editor plug-in that uses FileManager

Vincent van Ederen

Vote:

Hello,

I'm trying to develop a small plug-in that enables the user to embed flash but I'm trying to avoid using swfObject.

My goal is to have the user pick an swf file from the document manager. When the user clicks the OK button on my form, the aspx file should insert an <object> tag that embeds the swf file into the page.

I have read the post from Mari Jørgensen regarding how to get the document browser into your aspx but I did not get it to run.

My code behind in my aspx:

if (!IsPostBack) {

ClientScript.RegisterClientScriptInclude("script1", EPiServer.UriSupport.ResolveUrlFromUtilBySettings("javascript/episerverscriptmanager.js"));

ClientScript.RegisterClientScriptInclude("script2", EPiServer.UriSupport.ResolveUrlFromUIBySettings("javascript/system.js")); ClientScript.RegisterClientScriptInclude("script3", EPiServer.UriSupport.ResolveUrlFromUIBySettings("javascript/system.aspx"));

btnOpenFileManager.OnClientClick = string.Format("SelectImageLink('{0}', '{1}', '{2}', '{3}')", CurrentPage.PageLink, CurrentPage.ParentLink, CurrentPage.GetPageDirectory(true).Name, string.Empty);

The next bit shows the client script:

// Pass the page or parent page id to the popup. Will be used in page browser dialog  // The file manager needs the folder id in order to show or create the "Page Files" directory.  function SelectImageLink(pageId, parentPageId, folderId, selectedFile) {  var url = '?id=' + pageId + '&parent=' + parentPageId + '&folderid=' + folderId;  url += '&selectedfile=' + selectedFile;  var linkAttributes = new Object();  var dialogArguments = linkAttributes;  var features = { width: 600, height: 412 };  var callbackArguments = new Object();  /* opens the filemanagerbrowser dialog */ EPi.CreateDialog( url, OnFileDialogClosed, callbackArguments, dialogArguments, features); }  function OnFileDialogClosed(returnValue, callbackArguments) {  if (returnValue != undefined && returnValue != 0)  {  //do your stuff here  }  }

</script>

What it does right now is point to my aspx page again (opens a second instance of it)

Can someone please point me in the right direction?

Thanks in advance!

Vincent

#25719

Nov 03, 2008 12:25

Vincent van Ederen

Vote:

For completeness, here is a link to download the files on my server.

#25721

Nov 03, 2008 12:29

marcus.schwartz@sogeti.se

Vote:

Hi,

I solved this problem using the code below:

JAVASCRIPT:

function LaunchFileManagerBrowser()
{
    var returnVal = new Object();     
    var dialogArguments = returnVal;
    var callbackArguments = new Object();
    callbackArguments.myControlId = "<%= flashFile.ClientID %>";
 
    var dialogUrl = '<%= EPiServer.UriSupport.ResolveUrlFromUIBySettings("edit/FileManagerBrowser.aspx")%>';
    EPi.CreateDialog(dialogUrl, OnFileDialogClosed, callbackArguments, returnVal, {width: 600});
}

/* function called after file browser dialog has returned and closed*/
function OnFileDialogClosed(returnValue, callbackArguments)
{
   if (returnValue != undefined && returnValue != 0)
   {      
      var myCtrl = document.getElementById(callbackArguments.myControlId);
      myCtrl.value = returnValue;
   }
}

and you should still include javascript/system.js and javascript/system.aspx using EPiServer.UriSupport.ResolveUrlFromUIBySettings("XXX");

HTML:

<asp:TextBox runat="server" ID="flashFile" />
<input runat="server" onclick="LaunchFileManagerBrowser();"
type="button" value="..." />

Hope it helps.

//Marcus

#25725

Edited, Nov 03, 2008 14:30

Vincent van Ederen

Vote:

Thanks Marcus I'll try this and let you know what happens.

#25729

Nov 03, 2008 15:06

Vincent van Ederen

Vote:

Hi Marcus,

It still won't work for me.

I used your code and pasted it, but still no go... Below is the code... (Sorry for the font size couldn't get it back to normal)

<form id="form1" runat="server">
<script language="javascript" type="text/javascript" src='<%= EPiServer.UriSupport.ResolveUrlFromUtilBySettings("javascript/episerverscriptmanager.js") %>'></script>
<script language="javascript" type="text/javascript" src='<%= EPiServer.UriSupport.ResolveUrlFromUIBySettings("javascript/system.js") %>'></script>
<script language="javascript" type="text/javascript" src='<%= EPiServer.UriSupport.ResolveUrlFromUIBySettings("javascript/system.aspx") %>'></script>
<script type="text/javascript" language="javascript">
 
// Pass the page or parent page id to the popup. Will be used in page browser dialog 
// The file manager needs the folder id in order to show or create the "Page Files" directory. 
function LaunchFileManagerBrowser() 
{
var returnVal = new Object(); 
var dialogArguments = returnVal;
var callbackArguments = new Object(); 
callbackArguments.myControlId = "<%= txtObjectToEmbed.ClientID %>";
var dialogUrl = '<%= EPiServer.UriSupport.ResolveUrlFromUIBySettings("edit/FileManagerBrowser.aspx")%>';EPi.CreateDialog(dialogUrl, OnFileDialogClosed, callbackArguments, returnVal, {width: 600}); 
}
 
/* function called after file browser dialog has returned and closed*/
function OnFileDialogClosed(returnValue, callbackArguments) 
{
if (returnValue != undefined && returnValue != 0) 
{ 
var ctl = document.getElementById(callbackArguments.ControlId); ctl.value = returnValue; 
}
}
</script>
<div>
<asp:TextBox ID="txtObjectToEmbed" runat="server"></asp:TextBox>
<asp:Button ID="btnOpenFileManager" OnClientClick="LaunchFileManagerBrowser()" runat="server"
Text="Bla" />
</div>
</form>

#25732

Edited, Nov 03, 2008 15:41

Vincent van Ederen

Vote:

OK Lesson learned:

Lay off the ASP.Net buttons when you use this!

Just use input type=button

#25733

Nov 03, 2008 15:51

Vote:

Hi.
Tried the same solution as you Vincent.
But when I have selected an Image from the FileManagerBrowser, and click OK, the TextBox do not get it's string, and I get an JavaScript error (null is null and not an object)

Yes, Im using input type=button

#28683

Mar 18, 2009 11:12

Debasish Banerjee

Vote:

HI guys need help,

(Who ever comes with a solution for this issue i will buy pack of 6 beers via ebay for him :))

I need to open filemanager dialog for my tiny mce editor plugin .

I used below code

-----

<head>
   <title>Build Image Plugin</title>
   <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
   <script type="text/javascript" src="js/dialog.js"></script>
    <script type="text/javascript" src="../../utils/form_utils.js"></script>
    <script type="text/javascript" src="js/image.js"></script>
    <script type="text/javascript" src="../../utils/editable_selects.js"></script>
    <script src="/Util/javascript/episerverscriptmanager.js" type="text/javascript"></script>
    <script src="/Util/javascript/system.js" type="text/javascript"></script>
    <script src="/Util/javascript/system.aspx" type="text/javascript"></script>
<script src="/util/javascript/episerverscriptmanager.js" type="text/javascript"></script>

    <script type="text/javascript">

        function LaunchFileManagerBrowser()
         {


            var features = { width: 400, height: 300 };

            var dialogUrl = '<%= EPiServer.UriSupport.ResolveUrlFromUIBySettings("edit/FileManagerBrowser.aspx")%>';

           var linkAttributes = new Object();

            var dialogArguments = linkAttributes;
            var features = {width: 600, height: 412};
            var callbackArguments = new Object();
            callbackArguments.postbackCtrlId = "<%= somearg.ClientID %>";
            /* callbackArguments.postbackCtrlId = postbackCtrlId;

             opens the filemanagerbrowser dialog */
            EPi.CreateDialog(
                    dialogUrl,
                    OnFileDialogClosed,
                    callbackArguments,
                    dialogArguments,
                    features);

        }

        /* function called after file browser dialog has returned and closed*/
        function OnFileDialogClosed(returnValue, callbackArguments) {
            if (returnValue != undefined && returnValue != 0) {
                var myCtrl = document.getElementById(callbackArguments.myControlId);
                myCtrl.value = returnValue;
            }
        }

    </script>

</head>
<body>

<form onsubmit="ExampleDialog.insert();return false;" action="#">

   <p>Select the image from file manager</p>
   <p>Image: <input id="someval" name="someval" type="text" class="text" /></p>
   <p>Author: <input id="somearg" name="somearg" type="text" class="text" /></p>
    <p><input runat="server" onclick="LaunchFileManagerBrowser();" type="button" value="..." /> </p>


   <div class="mceActionPanel">
       <input type="button" id="insert" name="insert" value="{#insert}" onclick="ExampleDialog.insert();" />
       <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />

   </div>
</form>

</body>

----------

However i am getting below shown error on click of button to open file manager dialog.

It says that EPi.CreateDialog is a invalid method

I have even checked in EPiServerScriptManager.js file located in C:\Program Files\EPiServer\CMS\6.1.379.0\Application\Util\javascript

and I also don’t see the implementation for CreateDialog().

Please note the dialog box for the plugin is of .HTM and not .aspx

#58356

Apr 20, 2012 13:45