using NeatUpload with devexpress popupcontrol...

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

using NeatUpload with devexpress popupcontrol...

Guest-895

I am using the devexpress popup control to provide a modal window to handle the file upload process. The devexpress control is basically a server control with a content area into which you can add standard asp.net controls. this generates a hidden div which is shown when you call popup.show() in the client.

The probelm is that the asp.net button wrapped in the upload.multifile control doesn't render in the popup for some reason - it is there in the html but it doesnt display in the UI.

This is the code behind:

<dxpc:ASPxPopupControl ID="PopupUploadProgress" runat="server"

ClientInstanceName="PopupUploadProgress">

<ContentCollection>

<dxpc:PopupControlContentControl ID="PopupControlContentControl2" runat="server">

 

Attach File:<br />

<Upload:MultiFile id="uploadFile" runat="server" useFlashIfAvailable="false" flashFilterExtensions="*.jpg;*.gif;*.png">

<asp:Button runat="server" ID="btnAddFile" Text="Add File" />

</Upload:MultiFile>

...

 

</dxpc:PopupControlContentControl>

</ContentCollection>

</dxpc:ASPxPopupControl>

and this is the rendered html (shortened):

<div id="ctl00_content_PopupUploadProgress_PW-1">

Attach File:<br />
                  <div id="NeatUploadDiv_ctl00_content_PopupUploadProgress_uploadFile">
      <input id="ctl00_content_PopupUploadProgress_uploadFile" type="file" name="NeatUpload_171F25CA0A9789EB71905DD0983392B3-ctl00_content_PopupUploadProgress_uploadFile" />

...

</div>

 

and this is the javascript for neatupload:

 

<script type='text/javascript' language='javascript'>
<!--
if (typeof(NeatUploadPB_ctl00_content_PopupUploadProgress_progressBar_Triggers) == 'undefined') NeatUploadPB_ctl00_content_PopupUploadProgress_progressBar_Triggers = [];
NeatUploadPB_ctl00_content_PopupUploadProgress_progressBar_Triggers = NeatUploadPB_ctl00_content_PopupUploadProgress_progressBar_Triggers.concat(['ctl00_content_PopupUploadProgress_btnUploadFiles']);
NeatUploadPB.prototype.Bars['ctl00_content_PopupUploadProgress_progressBar']
 = new NeatUploadPB('ctl00_content_PopupUploadProgress_progressBar','171F25CA0A9789EB71905DD0983392B3','/NeatUpload/Progress.aspx?barID=ctl00_content_PopupUploadProgress_progressBar','500','100',NeatUploadPB_ctl00_content_PopupUploadProgress_progressBar_Triggers, 'IsFilesToUpload()');
if (!NeatUploadPB.prototype.FirstBarID)
 NeatUploadPB.prototype.FirstBarID = 'ctl00_content_PopupUploadProgress_progressBar';
// -->
</script><script type='text/javascript' language='javascript'>
<!--
NeatUploadPB.prototype.Bars['ctl00_content_PopupUploadProgress_progressBar'].DisplayUrl = function(progressUrl) {
 var pb = this;
    frames[pb.ClientID].document.body.innerHTML = '';
 setTimeout(function () { frames[pb.ClientID].location.href = progressUrl; }, 0);
};

NeatUploadPB.prototype.Bars['ctl00_content_PopupUploadProgress_progressBar'].EvalOnClose = null;

(function() {
 var pb = NeatUploadPB.prototype.Bars['ctl00_content_PopupUploadProgress_progressBar'];
 if (frames[pb.ClientID])
  frames[pb.ClientID].location.replace(pb.UploadProgressPath + '&postBackID=' + pb.UploadForm.GetPostBackID() + '&canScript=true&canCancel=' + NeatUploadPB.prototype.CanCancel());
})();
// -->
</script>

anyone got any ideas whats going wrong here?

thanks

Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Guest-895

sorry, the rendered HTML should have included the button wrapped in the multifile control (it is actually there):

 

Attach File:<br />
                  <div id="NeatUploadDiv_ctl00_content_PopupUploadProgress_uploadFile">
      <input id="ctl00_content_PopupUploadProgress_uploadFile" type="file" name="NeatUpload_5A50109A0698F5187191D00AFD0D72A9-ctl00_content_PopupUploadProgress_uploadFile" /           

<input type="submit" name="ctl00$content$PopupUploadProgress$btnAddFile" value="Add File" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$content$PopupUploadProgress$btnAddFile&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_content_PopupUploadProgress_btnAddFile" />
 

Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Dean Brettle
Administrator
Hmm.  Can you try this?

1. Find the following chunk of code in NeatUpload/NeatUpload.js:

        if (replacementDiv.offsetHeight)
            MoveAndResizeDivAndAddFlash();

and change it to:

        numf.RefreshDisplay = MoveAndResizeDivAndAddFlash;
        if (replacementDiv.offsetHeight)
            MoveAndResizeDivAndAddFlash();

2. Add the following call immediately after you show the popup:

NeatUploadPB.prototype.Bars['ctl00_content_PopupUploadProgress_progressBar'].RefreshDisplay();

Does that help?

--Dean
Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Guest-895

Ok, firstly, many thanks for your help - it is much appreciated.

Yes that has done the trick, although there are two things im slightly puzzled by:

- The actual 'add file' button in my code doesn't appear in the popup, rather, I get a standard asp.net FileUpload control, which isn't a massive issue but it does mean I can't style it - the rest of my site's buttons are themed. Unless i'm being daft and overlooking something simple?

- When the upload finishes the postback completes and the page reloads, which in itself isn't an issue, but I haven't had the opportunity to close the popup window so the page reloads with it open, which is an issue. Ideally I could hook into the client side completion event of the upload and add a line to kill the popup window, or even better, allow the user to do it via the OK button in the popup - though im not sure this is possible. Do you have any suggestions?

 

 

Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Dean Brettle
Administrator
Sorry, there was a typo in my last post.  For step 2, it should be:

NeatUploadMultiFile.prototype.Controls['ctl00_content_PopupUploadProgress_uploadFile'].RefreshDisplay();

Does that fix the first issue?

The second issue is inherent in using this sort of psuedo-popup.  It isn't a separate browser window.  It is actually just a div positioned over the existing page content.  So, when the upload completes and the server sends the response, the response replaces the contents of the browser window.  Does that actually cause functional problems for you, or does it just seem weird to have the popup disappear?  If you add System.Threading.Thread.Sleep(2000) in your Page_Load() handler, that would probably give the progress display time to display the "Completed" message and do the EvalOnClose callback which you could use to close the popup.

--Dean

Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Guest-895

hi dean,

the typo change hasn't made any difference, however, on closer inspection of the code, this is what i (now) have:

 

numf.RefreshDisplay = MoveAndResizeDivAndAddFlash;

if (replacementDiv.offsetHeight)

MoveAndResizeDiv();

 

Which isn't exactly what you specified. From what i can tell, there doesn't appear to be a function called 'MoveAndResizeDivAndAddFlash' - do i need a newer version? assigning MoveAndResizeDiv to the delegate just causes a double page refresh and leaves the popup looking exactly the same as before (i.e. no button)...

The second issue im not sure i can work around in a nice way. The response causing the popup to re-open when the page reloads, seems to prevent the rest of the page loading fully, not to mention the fact that the popup is appearing in a strange place. I may just have to revert to handling it all inline within the page. It's a shame because the modal popup forces the user to either upload the files or cancel, whilst where it's inline unsavvy users might think the file had been uploaded simply through the action of selecting it.... is there no way catching/preventing the response at all? my guess is there isn't anything i can do?

 

Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Guest-895
on the second issue, is there anyway just to refresh the inline iframe and not the entire page? if so, that would probably nail the issue..
Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Dean Brettle
Administrator
MoveAndResizeDivAndAddFlash is in the latest stable version (1.3.8).  You must have an older version.

The issue of the popup not going away doesn't sound specific to NeatUpload.  If you used a standard ASP.NET FileUpload control instead of the MultiFile control, I think you'd run into the same problem.  If not, please let me know.

You can refresh just an iframe by just doing the postback in the iframe instead of the whole page.  I'm not sure how that relates to your popup though.

If you want to make sure that the user doesn't accidentally interrupt the upload, see Preventing Accidental Upload Interruptions.


Reply | Threaded
Open this post in threaded view
|

Re: using NeatUpload with devexpress popupcontrol...

Dean Brettle
Administrator
Fixed in NeatUpload-1.3.16 which was just released.