[Solved] RadAsyncUpload inside fancyBox popup or bluckUI popup

[Martin]

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.

<script src="http://malsup.github.com/jquery.blockUI.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.0.4/jquery.fancybox.pack.js"></script>
<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?

[Hristo Valyavicharski]

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

[Martin]

Hello.

Thanks for reply. This helped me a lot.

BR,
Martin