SlickUpload
Welcome Guest Search | Active Topics | Log In | Register

2 Pages 12>
asp.net mvc ajax upload without update panel Options
patricia
#1 Posted : Tuesday, October 12, 2010 2:17:53 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

 

Hello,

I am developing an application in asp.net mvc 2 and it uses a lot of ajax (jquery)

Is it possible to do teh following:

 

I'd like to have the upload control in a dialog, that sends the files to the server, and gets the results back ajaxly without having it over write my entire page? 

 

i've got it loading into a jquery ui dialog, and it seems to post, get to 100% then it re-directs the entire page to the result of the action instead of just return the result ajaxly.

 

does this make sense?

 

EDIT:  ok, i've got it uploading the file, and not posting away from the page right away.  now i just need to figure out how to get at the files when i do an ajax post from the add_OnUploadEnded function.

 

EDIT: 

I've posted a question on stack overflow with some more details:  http://stackoverflow.com...th-mvc-2-and-jquery-ajax

I also attempted to email your support email and it bounced back:

Your message did not reach some or all of the intended recipients.

 

      Subject:         Slick Upload with MVC2 JQuery and Ajax

      Sent:               10/15/2010 10:12 AM

 

The following recipient(s) cannot be reached:

 

      'support@krystalware.com' on 10/15/2010 10:13 AM

            Server error: '550 5.7.1 Unable to relay for

support@krystalware.com'

 

We really want to use your control and are going to buy it as soon as we know we can use it in this type of senario!

 

 

 

Axosoft
#2 Posted : Sunday, October 17, 2010 7:43:50 PM
Rank: Administration


Groups: Administrators

Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ

What do you mean by "get at the files"? Can you explain a bit more about your scenario?

Also, if you have a sample project you're working on, can you send it to me at chrish at krystalware dot com so I can take a look? 

patricia
#3 Posted : Monday, October 18, 2010 9:01:56 AM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

Hey Chris,

 

what i mean is, when i have it set to AutoPostBackAfterUpload = false   how do i mimic the post back that it does but ajaxly so that i can have an action like :

Public Overridable Function PostSlickTest(ByVal status As UploadStatus) As ActionResult

 

i tried serializing the form and submiting that, but the only thing that i get back at the server is the kw_uploadId.

 

i'll put together a sample app of what i'm trying to do.

patricia
#4 Posted : Monday, October 18, 2010 11:03:51 AM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

Hi Chris,

 

I tried to email you my sample but i got a bounce back saying:

Normal 0 false false false EN-US X-NONE X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;}

Your message did not reach some or all of the intended recipients.

 

      Subject:    RE:asp.net mvc ajax upload without update panel

      Sent: 10/18/2010 11:07 AM

 

The following recipient(s) cannot be reached:

 

      'chrish@krystalware.com' on 10/18/2010 11:07 AM

            Server error: '550 5.7.1 Unable to relay for chrish@krystalware.com'

 

Axosoft
#5 Posted : Monday, October 18, 2010 11:08:00 AM
Rank: Administration


Groups: Administrators

Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ

Hmm. Trying from several webmail accounts seems to work. Do you have a webmail account you can try emailing from? Or can you PM or attach the file to this message?

patricia
#6 Posted : Monday, October 18, 2010 2:41:55 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

ahh, there we go, very strange. set it from my gmail.    change the extension from .zipper to .zip.

patricia
#7 Posted : Wednesday, October 20, 2010 2:12:48 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

Hey Chris,

 

did you get the email i sent from my gmail account?  i haven't heard back about it?

Axosoft
#8 Posted : Wednesday, October 20, 2010 2:47:59 PM
Rank: Administration


Groups: Administrators

Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ

I have received it. I'm doing some testing to see if there is a way to do what you want. This will be built in to SlickUpload 6 but requires some contortions to do in SlickUpload 5. I should have an answer for you in the next day or two.

patricia
#9 Posted : Wednesday, October 20, 2010 5:18:14 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

great thanks :)

 

if it's not easily possible, is there some other solution that would work?

Axosoft
#10 Posted : Monday, October 25, 2010 7:43:26 AM
Rank: Administration


Groups: Administrators

Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ

Here's a solution. Basically, we'll create a second server side handler that the client side code on your upload page can call to get the upload status after an upload is complete. This will retrieve the uploaded file information. You can also add any server side code you might want to use to record or manipulate the files here.

Add an UploadComplete.aspx to your project (the handler name doesn't matter, but I'll be referring to it as "UploadComplete.aspx" here). Add the following content:

<%@ Page Language="C#" %>
<%@ Import Namespace="Krystalware.SlickUpload" %>
<%@ Import Namespace="Krystalware.SlickUpload.Controls" %>
<%@ Import Namespace="Krystalware.SlickUpload.Status" %>

<%
    UploadStatus status = UploadConnector.GetUploadStatus();

    Response.ContentType = "text/plain";
%>

<status>
    <% if (status != null) { %>
    <state><%=status.State.ToString() %></state>
    <reason><%=status.Reason.ToString() %></reason>
    <files>
        <% foreach (UploadedFile file in status.GetUploadedFiles()) { %>
        <file>
            <name><%=file.ClientName %></name>
        </file>
        <% } %>
    </files>
    <% } %>
</status>

You can add whatever other information you need here. Also, you'll probably want to change the content-type to "text/xml" -- I used "text/plain" so it pops up easily when accessed.

Then, in your page, set AutoPostBackAfterUpload=false, set OnClientUploadEnded="onUploadEnded", and add an OnUploadEnded handler like the following:

        function onUploadEnded(data)
        {
            kw.get("<%=SlickUpload1.ClientID %>").clear();

            $.post("<%=ResolveUrl("~/UploadComplete.aspx") %>",
                {
                    kw_uploadId : document.getElementById("kw_uploadId").value,
                    kw_uploadExecution : (data.isSuccessful ? "Attempted" : "Cancelled")
                },

                function(data, textStatus)
                {
                    alert(data);

    // TODO: actually do something with the data here
                });
        }

This grabs the current upload id and status and POSTs to the handler we created above, which retrieves the data and returns it. This example uses jQuery AJAX, but you could use any AJAX library to POST.

I apologize for all the contortions you have to go through here -- SlickUpload 6 will make this process much more straightforward.

Let me know if you have any questions.

patricia
#11 Posted : Monday, October 25, 2010 12:12:08 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31
Hey Chris,

what should my controller action look like to go with this view?
patricia
#12 Posted : Monday, October 25, 2010 12:35:25 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

I think i figured it out:

 

I have an action like this:

Function UploadResult(ByVal kw_uploadId As String, ByVal kw_uploadExecution As String) As ActionResult
       
        Dim status As UploadStatus = UploadConnector.GetUploadStatus
        Dim files = status.GetUploadedFiles
        Dim returnList As IList(Of String) = New List(Of String)
        For Each thing In files
            returnList.Add(thing.ClientName)
        Next
        Return (Json(returnList))
    End Function

and it seems to be returning the right files. 

 

will this work if i have multi users uploading files at the same time?

 

 

Axosoft
#13 Posted : Monday, October 25, 2010 12:48:18 PM
Rank: Administration


Groups: Administrators

Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ

Yup, exactly -- I sent a .aspx that did it, but you could use an action method just as well. The only requirement is to include the kw_uploadId and kw_uploadExecution parameters as values in the POST - the GetUploadStatus method uses these internally to determine the correct upload status. You don't actually need them as parameters to your action method, though.

If you have the UploadStatusModelBinder in your project (see http://krystalware.com/blog/archive/2010/02/27/modelbinder-asp.net-mvc-uploadstatus-controller-action-method.aspx), you could change your method signature to:

Function UploadResult(status As UploadStatus) As ActionResult

and skip the GetUploadStatus call.

You won't have problems when multiple users upload simultaneously, as you are passing the uploadId in the kw_uploadId field -- this is the unique identifier for the upload.

patricia
#14 Posted : Monday, October 25, 2010 2:03:46 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31
wonderful! so really all i was missing was having kw_uploadExecution : (data.isSuccessful ? "Attempted" : "Cancelled") in my post!

i'm going to try this out right now and see how it goes.
patricia
#15 Posted : Monday, October 25, 2010 3:13:21 PM
Rank: Advanced Member

Groups: Registered

Joined: 10/12/2010
Posts: 31

seems to be working! thanks !

simoness
#16 Posted : Monday, February 07, 2011 12:53:54 PM
Rank: Newbie

Groups: Registered

Joined: 2/7/2011
Posts: 1
Nuky
#17 Posted : Tuesday, December 13, 2011 8:33:09 AM
Rank: Newbie

Groups: Registered

Joined: 12/13/2011
Posts: 3

How would you do something like this with SlickUpload 6?

Axosoft
#18 Posted : Tuesday, December 13, 2011 8:49:16 AM
Rank: Administration


Groups: Administrators

Joined: 7/7/2005
Posts: 1,586
Location: Scottsdale, AZ

I can put together a sample for you.

Which view technology are you using? WebForms? MVC? Razor?

Nuky
#19 Posted : Tuesday, December 13, 2011 8:52:44 AM
Rank: Newbie

Groups: Registered

Joined: 12/13/2011
Posts: 3

WebForms but i would like to use an ashx-handler.

I use the client side API of SlickUpload if thats important.

Nuky
#20 Posted : Tuesday, December 13, 2011 9:25:36 AM
Rank: Newbie

Groups: Registered

Joined: 12/13/2011
Posts: 3

So it now basically works on the first upload (i only allow one upload in a session and close the jquery-popup after it).

If the user reopenes the popup, the next upload doesnt start. Logging with kw.debug = true says:

state=complete, status=error, errorType=ServerUnavailable, percentComplete=100, timeRemaining=0, ...

 

The first file is uploaded correctly and the ajax-callback works fine.

The code:

function onSessionEnd(data) {
                        DoAjaxPostRequest('<%=WebTools.GetAjaxPostUrl( EAjaxPostRequestType.SaveAttachment ) %>',
                            { "<%=Constants.AJAX_UPLOAD_DESCRIPTION %>": $('#<%= tb_PopUp_Description_Upload.ClientID %>').val()},
                                function(data){
                                    kw("attachmentFileSelector").clear();
                                    ClosePopup('#<%= AttachmentPopup.ClientID %>');
                                    $('#attachmentUploadPanel').html(data.ControlHtml);
                            });
                    }

kw(function () {
                        var uploadConnector = new kw.UploadConnector(
                        {
                            id: "attachmentUploadConnector",
                            uploadHandlerUrl: "<%=ResolveUrl("~/SlickUpload.axd") %>",
                            completeHandlerUrl: "<%= WebTools.GetAjaxUploadHandlerUrl( EUploadType.Attachment ) %>",
                            uploadProfile: "wcfUpload",
                            autoUploadOnSubmit: false,
                            autoCompleteAfterLastFile: true,
                            onUploadSessionEnded: onSessionEnd,
                            onUploadSessionStarted: onSessionStarted,
                            onClientUploadSessionProgress: onUploadSessionProgress
                        });

                        var fileSelector = new kw.FileSelector(
                        {
                            id: "attachmentFileSelector",
                            uploadConnector: "attachmentUploadConnector",
                            onFileAdded: onFileSelectionChanged,
                            onFileRemoved: onFileSelectionChanged,
                            maxFileSize: 256000,
                            maxFiles: 1,
                            showDropZoneOnDocumentDragOver: false
                        });

                        var fileList = new kw.FileList(
                        {
                            id: "attachmentFileList",
                            templateElement: "attachmentFileList_template",
                            fileSelector: "attachmentFileSelector"
                        });

                        var progressDisplay = new kw.UploadProgressDisplay(
                        {
                            id: "attachmentProgressDisplay",
                            uploadConnector: "attachmentUploadConnector"
                        });


                    });

Users browsing this topic
Guest
2 Pages 12>
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.