RadAsyncUpload inside fancyBox popup or bluckUI popup

3 posts, 0 answers
  1. Martin
    Martin avatar
    11 posts
    Member since:
    May 2008

    Posted 25 Apr 2013 Link to this post

    Hello.

    When I put RadAsyncUpload inside div which will be used as popup for fancyBox or blockUi (jQuery plugin) after postback FileUploaded handler is not invoked. UploadedFiles collection is empty, although I see uploaded file in temp directory. OnClientFileUploaded is called properly. (case one and two)
    When I put identical control on a page (outside popup) everything works fine. (case three)

    I use ASP.NET 4.0, Telerik.Controls 2012.3.1308.45, fancyBox 2.0.4, blockUI (2.59.0), jQuery 1.8.2.
    Same behaviour appears in Firefox 20.0.1, Chrome 23, IE10.

    <h3>Async upload cases:</h3>
    <ol class="round">
        <li class="one">
            <h5>FancyBox</h5>
            <input type="button" value="Open" onclick="showFancyBox();"/>
        </li>
        <li class="two">
            <h5>BlockUI</h5>
            <input type="button" value="Open" onclick="showBlockUI();"/>
        </li>
        <li class="three">
            <h5>Direct</h5>
            <telerik:RadAsyncUpload ID="AsyncUpload3" InputSize="15" runat="server" DisableChunkUpload="true" MaxFileInputsCount="1" OnFileUploaded="HandleFileUploaded"
                    OnClientFileUploaded="HandleClientFileUploaded">
                <FileFilters>
                    <telerik:FileFilter Description="Images(jpeg;jpg;gif;png)" Extensions="jpeg,jpg,gif,png" />
                </FileFilters>
            </telerik:RadAsyncUpload>
            <br />
            <input value="Upload"  type="button" onclick="__doPostBack();" />
        </li>
    </ol>
     
    <div style="display: none;">
        <div id="Popup1" style="border: 4px solid blue; background: grey; width: 400px; height: 100px;">
            <telerik:RadAsyncUpload ID="AsyncUpload1" InputSize="15" runat="server" DisableChunkUpload="true" MaxFileInputsCount="1" OnFileUploaded="HandleFileUploaded"
                    OnClientFileUploaded="HandleClientFileUploaded">
                <FileFilters>
                    <telerik:FileFilter Description="Images(jpeg;jpg;gif;png)" Extensions="jpeg,jpg,gif,png" />
                </FileFilters>
            </telerik:RadAsyncUpload>
            <input value="Upload" type="button" onclick="__doPostBack();" />
        </div>
    </div>
     
    <div id="Popup2" style="display: none; border: 4px solid blue; background: grey; width: 400px; height: 100px;">
        <telerik:RadAsyncUpload ID="AsyncUpload2" InputSize="15" runat="server" DisableChunkUpload="true" MaxFileInputsCount="1" OnFileUploaded="HandleFileUploaded"
                OnClientFileUploaded="HandleClientFileUploaded">
            <FileFilters>
                <telerik:FileFilter Description="Images(jpeg;jpg;gif;png)" Extensions="jpeg,jpg,gif,png" />
            </FileFilters>
        </telerik:RadAsyncUpload>
        <input value="Upload"  type="button" onclick="__doPostBack();" />
    </div>

    <script type="text/javascript">
        function HandleClientFileUploaded(sender, e) {
            console.log("File uploaded: ", e.get_fileName());
        }
         
        function showBlockUI() {
            $.blockUI({
                message: $('#Popup2'),
                css: {
                    cursor: null,
                    border: 'none',
                    width: '10px',
                    height: '10px',
                    top: ($(window).height() - $('#Popup2').height()) / 2 + 'px',
                    left: ($(window).width() - $('#Popup2').width()) / 2 + 'px'
                },
                overlayCSS: { cursor: null },
                focusInput: false
            });
        }
     
        function showFancyBox() {
            $.fancybox({
                type: 'inline',
                content: $('#Popup1')
            });
        }
    </script>

    Any idea?
  2.
  3. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 30 Apr 2013 Link to this post

    Hi Martin,

    Both plugins are rendered outside of the page's form and when you click on the upload button the form is posted without RadAsyncUpload. To resolve this issue you will have to move the popup window with RadAsyncUpload back to the form before it is submitted. You could use jQuery to move popup window's div element inside the form in Upload's OnClick event:
    function Upload_OnClick() {     
        //Move popup window's element inside the form      
        $('.fancybox-wrap.fancybox-default').appendTo('#form1');
       __doPostBack();
    }


    Regards,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Martin
    Martin avatar
    11 posts
    Member since:
    May 2008

    Posted 06 May 2013 Link to this post

    Hello.

    Thanks for reply. This helped me a lot.

    BR,
    Martin
Back to Top