|
|
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!
|
|
|
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?
|
|
|
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.
|
|
|
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'
|
|
|
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?
|
|
|
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.
|
|
|
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?
|
|
|
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.
|
|
|
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?
|
|
|
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.
|
|
|
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?
|
|
|
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?
|
|
|
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.
|
|
|
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.
|
|
|
Rank: Advanced Member
Groups: Registered
Joined: 10/12/2010 Posts: 31
|
seems to be working! thanks !
|
|
|
Rank: Newbie
Groups: Registered
Joined: 2/7/2011 Posts: 1
|
|
|
|
Rank: Newbie
Groups: Registered
Joined: 12/13/2011 Posts: 3
|
How would you do something like this with SlickUpload 6?
|
|
|
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?
|
|
|
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.
|
|
|
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" });
});
|
|
|
|
Guest |