Send uploadify submit/post to aspx code behind method instead of handler and close jQuery modal form

Question

We're using Telerik's Sitefinity community edition and we've been having a fun time deploying handlers and webservices with it. As such, I'm wondering if when using Uploadify instead of the script option heading to an ashx could we post it to a server side method that can take care of the uploading? If so, would someone please be very kind and post a quick and dirty example to get me started?

This leads to another question. On this particular page, we're using the jQuery.FormWizard which doesn't play nice with server side forms. When it comes to uploading files, what we're trying to do is open up a modal form, have the user upload their files where upon completion, we'd simply close that modal form for them. But that's not working and I'm pretty certain its because I'm not handling the OnComplete/OnAllComplete properly. Pointers on how to do this please?

Here's the uploadify in the js file:

$("#VisaHelpNeeded").click(function() {
    //This opens the modal form

    $dialog.dialog('open');

    //********** Uploadify stuff here ********************

    $('#fileInput').uploadify({
        'uploader': '../../App_Themes/ApRegistration/images/uploadify.swf',
        'script': 'WebForm1.aspx/Register',
        'scriptData': { 'society': $('#nationalSociety').val(), 'participant': $('participantName').val() },
        'cancelImg': '../../App_Themes/ApRegistration/images/cancel.png',
        'auto': true,
        'multi': true,
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.png;*.gif;*.jpeg;*.bmp',
        'sizeLimit': 4000000,
        onAllComplete: function(){$('#dialog-form').dialog('close');}
    });
});

Here's the modal form

var $dialog = $('<div></div>')
.html('<label>Please attach a scanned copy of your passport</label><input     id="fileInput" name="fileInput" type="file" />')
.dialog({
  autoOpen: false,
  height: 350,
  width: 485,
  modal: true,
  buttons: {
      Cancel: function() {
          $(this).dialog('close');
      }
  }
 });

And here's the attempted signature of the method call for saving it on the code behind (I read somewhere while researching this that the method ought to be a static web method, but I can't find the link now, sorry)

[WebMethod(true)]
public static void Register(HttpContext context)
{ 
    //do lots of cool code here 
}

Many thanks/

Answer 1

You might consider using Telerik's RadUpload and RadWindow to accomplish this. These products come with Sitefinity CMS and would be covered by Telerik support.

Beyond that, I don't have an example that shows how to use Uploadify with Page Code-Behind methods. It might help to test & troubleshoot this in a fresh ASP.NET web site (not a Sitefinity web site). This might help reduce the complexity while testing/exploring.

Then, once the code is working, Sitefinity support could help deploy the working prototype within Sitefinity. Sorry I don't have an example at my fingertips.

Answer 2

I'm not sure there is a simple way to use Uploadify with webforms. We've used it extensively, but with MVC, not webforms.

As for the jquery dialog issue, you're creating a dialog on the fly, with no ID, yet you are trying to reference '#dialog-form' to close it. I suspect that selector isn't matching, hence the dialog not closing. Since you've cached it in a local variable, $dialog, why not use

$dialog.dialog('close');

Answer 3

Nice post.Thank you for taking the time to publish this information very useful! I’m still waiting for some interesting thoughts from your side in your next post thanks