1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Storing flash media in the document library - how to consume?

Storing flash media in the document library - how to consume?

12 posts, 0 answered
  1. clayman
    clayman avatar
    38 posts
    Registered:
    23 Sep 2009
    22 Jan 2010
    Link to this post
    Our site is different from the default sitefinity installation because we only want to consume content from the sitefinity db.

    Files that reside on the site are part of the site's look and feel, and of course there is code, but all of that is managed through source control and an automated build and deployment process.

    So we really want all CMS content to live in the db.  Hopefully that is clear. 

    This all works very well except for flash media.  I can upload the flash files to a library, but there isn't any way to drop them onto a page.  Do you have a control, or code that I could use to write a control, that would allow me to drop a "host" control on a page and then specify the flash file that should be rendered? 

    This seems a little tricky, but certainly do-able, and I think that having a clean separation between managed content (supported by content authors) and the website files that host that content on the web servers (supported by development) is a sensible strategy that should be enabled if not enforced within Sitefinity.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    24 Jan 2010
    Link to this post
    Hello clayman,

    You can customize the RadEditor FlashManager and make some relation between Images and Documents Module and Flash manager. You can observe our implementation for ImageManager shown below

    Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args)
    {
       var editorArgs = editor.getSelectedElement();
       if (!editorArgs.nodeName || typeof(editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
        
       var myCallbackFunction = function(sender, args)
       {
            if (typeof(editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                args.parentNode.replaceChild(editorArgs, args);
            else
            {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
       }
       editor.showExternalDialog(
       '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>',
       editorArgs,
       750,
       600,
       myCallbackFunction,
       null,
       'ImageLibraryDialog',
       true,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       true)
    };

    ImageEditorDialog

    <%@ Register Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls" TagPrefix="sfLib" %>
    <%@ Register TagPrefix="sfMsg" Namespace="Telerik.Cms.Web.UI" Assembly="Telerik.Cms.Web.UI" %>
     
    <script type="text/javascript">
        var currentElement = document.createElement("img");
     
        function getRadWindow() //mandatory for the RadWindow dialogs functionality
        {
            if (window.radWindow) {
                return window.radWindow;
            }
            if (window.frameElement && window.frameElement.radWindow) {
                return window.frameElement.radWindow;
            }
            return null;
        }
     
        function initDialog() //called when the dialog is initialized
        {
            var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
        }
     
        if (window.attachEvent) {
            window.attachEvent("onload", initDialog);
        }
        else if (window.addEventListener) {
            window.addEventListener("load", initDialog, false);
        }
     
        function insertLink() //fires when the Insert Link button is clicked
        {
            var closeArgument = currentElement;
            selValue = document.getElementById('<%= selectedValueField.ClientID %>')
            editHolder = document.getElementById('<%= editHolder.ClientID %>');
            var uplImg = document.getElementById('<%= uploadedImage.ClientID %>');
            if (editHolder.style.display == 'none') {
                if (selectedItem)
                    closeArgument.alt = selectedItem.altText;
                else
                    closeArgument.alt = '';
                closeArgument.src = selValue.value;
            }
            else {
                var altTextTxt = document.getElementById('<%= altTxt.ClientID %>');
                closeArgument.src = selValue.value;
                if (altTextTxt)
                    closeArgument.alt = altTextTxt.value;
            }
     
            if (selValue.value.indexOf("~/") == 0) {
                closeArgument.setAttribute("sfref", selValue.value);
            } else if (selectedItem != undefined && selectedItem.unresolved) {
                closeArgument.setAttribute("sfref", selectedItem.unresolved);
            } else if (uplImg != undefined && uplImg.attributes["sfref"] != undefined) {
                closeArgument.setAttribute("sfref", uplImg.attributes["sfref"].value);
                closeArgument.src = uplImg.src;
            } else {
                closeArgument.removeAttribute("sfref");
            }
            var radWindow = getRadWindow();
            radWindow.argument = closeArgument;
            radWindow.close(closeArgument); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
        }
     
        function beforeInsertLink(src, altText, title, width, height) {
           
            if (src != '') {
                editHolder = document.getElementById('<%= editHolder.ClientID %>');
                uploadHolder = document.getElementById('<%= uploadHolder.ClientID %>');
                if (editHolder && uploadHolder) {
                    editHolder.style.display = "block";
                    uploadHolder.style.display = "none";
     
                    altField = document.getElementById('<%= altTxt.ClientID %>');
                    if (altField)
                        altField.value = altText;
     
                    dimensionsLabel = document.getElementById('<%= dimensionsLabel.ClientID %>');
                    titleLabel = document.getElementById('<%= titleLabel.ClientID %>');
                    if (titleLabel)
                        titleLabel.innerHTML = title;
                    if (dimensionsLabel && width > 0 && height > 0)
                        dimensionsLabel.innerHTML = "(" + width + ", " + height + ")";
                }
            }
        }
     
        function toggleClass(toggleID, toggleClass) {
            var tDiv = document.getElementById(toggleID);
            tDiv.className = toggleClass;
        }
     
    </script>
    bla
    <telerik:RadProgressManager id="RadProgressManager1" runat="server" SuppressMissingHttpModuleError="true" />
    <telerik:RadProgressArea ID="ProgressArea1" runat="server"></telerik:RadProgressArea>
    <div class="ctrlProps" id="div1">
    <div class="ctrlContent">
        <asp:Panel runat="server" ID="uploadHolder">
            <div class="uploadPane">
                <sfMsg:MessageControl runat="server" ID="message">
                <ItemTemplate>
                    <asp:Label runat="server" ID="messageText"></asp:Label>
                </ItemTemplate>
                </sfMsg:MessageControl>
                <h2><asp:Literal ID="Literal1" runat="server" Text="<%$Resources:FromYourComputer %>"></asp:Literal></h2>
                <div id="uploadSelectedInLibrary">
                    <asp:Label ID="Label1" runat="server" AssociatedControlID="fileUpload">Select an image from your computer</asp:Label>
                    <telerik:RadUpload
                        OnClientFileSelected="enableUploadBtnValidation"
                        AllowedFileExtensions=".jpg,.jpeg,.gif,.png"
                        runat="server"
                        ID="fileUpload"
                        ControlObjectsVisibility="None" 
                        EnableEmbeddedSkins="false"
                        Skin="Sitefinity"                  
                    />
                    <p>
                        <asp:Literal ID="Literal2" runat="server" Text='<%$Resources:UploadIn %>'></asp:Literal>
                        <em id="uploadLibrary"><asp:Literal runat="server" ID="selectedValue"></asp:Literal></em><span id="uploadLocationType"> library</span>
                        <a href="javascript:toggleClass('uploadSelectedInLibrary','changeUploadDirection');" id="changeLink">(<asp:Literal ID="Literal3" runat="server" Text="<%$Resources:Change %>"></asp:Literal>)</a>
                    </p>
                    <div id="changeDiv">
                        <sfLib:LibrarySelector TemplatePath="~/Sitefinity/Admin/ControlTemplates/Libraries/Dialogs/BaseGuidSelectorTemplate.ascx" ID="GuidSelector" runat="server" SelectSpecificItemsText="<%$Resources:ChooseLibrary %>" />
                        <p class="closeArea"><a href="javascript:toggleClass('uploadSelectedInLibrary','');">Close</a></p>
                    </div>
                    <p class="button_area" id="uploadBtnEnabled" style="display: none; "><asp:LinkButton runat="server" ID="uploadBtn" CssClass="CmsButLeft upldark" Text="<%$Resources:UploadSelected %>"></asp:LinkButton></p>
                    <p class="button_area" id="uploadBtnDisabled"><span class="CmsButLeft upldark"><asp:Literal ID="Literal4" runat="server" Text="<%$Resources:UploadSelected %>" /></asp:Literal></span></p>
                    <div style="clear:both"><!-- --></div>
                </div>
                <script type="text/javascript">
                    function enableUploadBtnValidation() {
                        document.getElementById("uploadBtnEnabled").style.display = 'block';
                        document.getElementById("uploadBtnDisabled").style.display = 'none';
                    }
                </script>
                <div class="chooseFromUploaded">
                    <h2><asp:Literal ID="Literal5" runat="server" Text="<%$Resources:Or %>"></asp:Literal>
     
                    <sfLib:ButtonSelector AssociatedControls="viewOriginalLink, uploadedImage, selectedImage, selectedValueField" runat="server" ButtonText="<%$Resources:SelectExisting %>" /></h2>
                </div>
            </div>
            <p class="previewSelectedImage" style="display: none; " id="imgprev"><asp:Image runat="server" ID="selectedImage" /></p>
            <p runat="server" id="actionButtonsDisabled" class="button_area bottom">
                <span class="CmsButLeft disabled ok"><strong class="CmsButRight light">Insert</strong></span>
                <span class="cmsorlbl"> or </span>
                <a href="#" onclick="getRadWindow().close();" class="cmscclcmd">Cancel</a>
            </p>
        </asp:Panel>
        <asp:Panel runat="server" ID="editHolder">
             
            <div class="leftPane">
            <h2><asp:Literal ID="Literal6" runat="server" Text="<%$Resources:ImageProperties %>"></asp:Literal></h2>
                <div class="uploadedImageData">               
                        <asp:Label ID="Label2" runat="server" Text="<%$Resources:AlternativeText %>" AssociatedControlID="altTxt"></asp:Label>
                        <asp:TextBox runat="server" ID="altTxt"></asp:TextBox>
                        <p class="example"><asp:Literal ID="Literal7" runat="server" Text='<%$Resources:AlternativeExample %>'></asp:Literal></p>
                        <p class="example"><asp:Literal ID="Literal8" runat="server" Text='<%$Resources:AlternativeDesc %>'></asp:Literal></p>
                    
                </div>
                <p class="uploadedAnotherImage"><asp:LinkButton runat="server" ID="uploadAnother" Text="<%$Resources:UploadAnother %>"></asp:LinkButton></p>
            </div>
            <div class="rightPane">
                <div class="previewSelectedImage">
                    <asp:Image runat="server" ID="uploadedImage" /></div>
                    <p><asp:Literal ID="Literal9" runat="server" Text="<%$Resources:Preview %>"></asp:Literal> <em><asp:Label runat="server" ID="titleLabel"></asp:Label></em> <br /><asp:HyperLink NavigateUrl="#" runat="server" ID="viewOriginalLink" rel="external" ToolTip="<%$Resources:OpenWindow %>" class="newWind" Text="<%$Resources:ViewOriginal %>"></asp:HyperLink><asp:Label runat="server" ID="dimensionsLabel"></asp:Label></p>
                 
            </div>
            <p runat="server" id="actionButtons" class="button_area bottom">
                <a href="#" onclick="insertLink();" class="CmsButLeft ok"><strong class="CmsButRight light">Insert</strong></a>
                <span class="cmsorlbl"> or </span>
                <a href="#" onclick="getRadWindow().close();" class="cmscclcmd">Cancel</a>
            </p>
        </asp:Panel>
        <asp:HiddenField runat="server" ID="selectedValueField" />
    </div></div>

    Another option is creating a control which allow you to pick up an item from your flash library and insert it as a flash object. You need to create a template similar to this one shown below and change dynamically the src of the embedded element

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
       width="550" height="400" id="Untitled-1" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="mymovie.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
       height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
       type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>

    Third option is using js and SWFObject library.

    sample

    <script type="text/javascript" src="swfobject.js"></script>
     
    <div id="myflashobject">
    </div>
     
    <script type="text/javascript">
       var so = new SWFObject("movie.swf", "mymovie", "600", "400", "8", "#336699");
       so.write("myflashobject");
    </script>


    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. clayman
    clayman avatar
    38 posts
    Registered:
    23 Sep 2009
    17 Feb 2010
    Link to this post

    I liked the markup approach.  worked for a day or two.  Then Firefox 3.6 came out.  Now the streamed .swf is no longer viewed within firefox.  IE and Chrome are fine.  Very frustrating.  I also tried the latest swfobject.  Same result.  Here's a snippet for your amusement:

    <span id="ctl00_Content_FlashContainer1" class="prefix-1 splashFlash">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
       width="550" height="400" id="Untitled-1" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="http://www.claymoreinvestments.ca/Libraries/Flash/ETFpromo.sflb.ashx" quality="high" bgcolor="#ffffff"
     
    width="550"
       height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
       type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>
     
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
       width="550" height="400" id="Untitled-1" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="http://www.claymoreinvestments.ca/files/CAETFpromos.swf" quality="high" bgcolor="#ffffff" width="550"
       height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
       type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>
    </span>

    Short of using the httprequest object to pull in the 2 streams and try to do figure out what is missing from the streamed version, I'm about out of ideas. 

    I suppose I could also hack up a lazy-loaded solution, where the cms file is persisted to disk on request and then the control would refer to that version on the file system.   But what a hack that would be.  Maybe firefox has a bug?  Haven't seen any coherent explanation for this change of behavior on their side.  But I do have a pc running firefox 3.0 still and it still works there.

    Any suggestions?

    Thanks
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Feb 2010
    Link to this post
    Hello clayman,

    Thank you for getting back to us.

    You can take a look at the following blog post to see how to store items from libraries to file system: Save Images from the Images and Documents module back to the file system. You can implement it on your end. We are currently researching an implementation of a provider for images and documents which will store items on file system. We have plans to include it in one of future SP releases.

    As for the issues on your site, could you please provide us with a link where this is reproducible. I have tried taking a look at http://www.claymoreinvestments.ca/ with FireFox 3.6 however did not see anything wrong, may be I have been looking at wrong place. Attached is a screen shot of how it looks on my end.

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. clayman
    clayman avatar
    38 posts
    Registered:
    23 Sep 2009
    17 Feb 2010
    Link to this post
    The plot thickens...  That is the correct url.  Here is how it looks from my browser.  I just uninstalled and reinstalled firefox as a precaution - and it still still isn't rendering the swf...  I guess it's comforting that at least some of our firefox visitors are seeing the home page as intended.
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Feb 2010
    Link to this post
    Hi clayman,

    On the FF browser where you are not seeing the swf, can you please verify that you have the ShockWave plugin installed, refer to attached image. If on my browser I disable this the content disappears. We have also tried this on several other machines with the latest version of FF and there were not problems seeing the splash.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. clayman
    clayman avatar
    38 posts
    Registered:
    23 Sep 2009
    17 Feb 2010
    Link to this post
    Yes - I have FF plugin enabled and the latest version is installed (10.0.45.2).

    Remember I gave you the test snippet earlier today -- I am able to load swf in FF so long as the src tag refers to a physical location on the server's file system and not to an http handler/module that is dynamically serving the content.  What is in the response headers for that swf content?  None of that makes any sense though because it seems to be working for you just fine.

    As a further example, I am able to view the swf on our US site where the object/embed tag is used - this url refers to the an swf on the server's file system...


  8. clayman
    clayman avatar
    38 posts
    Registered:
    23 Sep 2009
    17 Feb 2010
    Link to this post
    this looks interesting. 

    http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes_print.html#head32

    Apparently this is the default value, so the Telerik handler must be setting content-disposition to attachment.

    ...is there a way I could wrap your Telerik.Cms.Engine.ContentHttpHandler to modify/replace the Content-Disposition response header...

    Response.AddHeader "Content-Disposition", "inline" ?

    Any snippets to share?


  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    17 Feb 2010
    Link to this post
    Hi clayman,

    You need to create a custom handler that inherits from ContentHttpHandler. Below is  a sample code

    public class ContentHttpHandlerCustom : Telerik.Cms.Engine.ContentHttpHandler
    {
        public ContentHttpHandlerCustom()
        {
        }
      
        public override void ProcessRequest(HttpContext context)
        {
            base.ProcessRequest(context);
        }
      
        protected override void SetResponseSettings(HttpContext context, Telerik.Caching.ResponseSettings settings)
        {
            HttpResponse response = context.Response;
            HttpRequest request = context.Request;
            Telerik.Cms.Engine.ContentResponseSettings contentSettings = settings as Telerik.Cms.Engine.ContentResponseSettings;
            if (("false".Equals(request.QueryString["download"], StringComparison.OrdinalIgnoreCase)
                    && (request.Browser.Browser == "Firefox") && contentSettings.MimeType == "application/x-shockwave-flash"))
            {
                
                response.ContentType = contentSettings.MimeType;
                response.StatusCode = 200;
                response.StatusDescription = "OK";
                response.Buffer = true;
                response.AddHeader("content-disposition", "inline; filename=" + contentSettings.FileName);
            }
            else
            {
                base.SetResponseSettings(context, settings);
            }
      
        }
    }

    You have to comment the the default httpHandler from <httpHandlers>. If you are working under IntegratedMode you have to register the custom handler in <handlers>


    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  10. Pierre
    Pierre avatar
    433 posts
    Registered:
    16 Feb 2006
    18 Feb 2010
    Link to this post
    Hi Ivan,

    This custom handler full registred and using liberies is no working in FF3.6 all others IE,S.v4,Chrome are working. Files are loading back side but is not playing in FF i use direct copy of object in my page linked to library item.
    Could you help us more to fix this issue.

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
               codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
               width="550" height="400" id="Untitled-1" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="http://localhost:52526/o/Libraries/Flash_Participa/exo_728x90_AXE4_1.sflb" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <embed src="http://localhost:52526/o/Libraries/Flash_Participa/exo_728x90_AXE4_1.sflb" quality="high" bgcolor="#ffffff" width="550"
               height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
               type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
            </object>


    regards.
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    18 Feb 2010
    Link to this post
    Hello Pierre,

    The code should work in all browsers if you remove this condition

    & (request.Browser.Browser == "Firefox")


    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  12. Pierre
    Pierre avatar
    433 posts
    Registered:
    16 Feb 2006
    18 Feb 2010
    Link to this post
    Hi Ivan, tested but always FF3.6 is not working other are working normal.
Register for webinar
12 posts, 0 answered