1 Attachment(s)
[RESOLVED] Ajax upload confusion
Ok - I've got this HTML - and it's working - dumping the return results into target="upload_target". Originally it was causing my page to reload - or dump into a new tab of the browser - until I found the TARGET setting.
Code:
<form id="upload" action="Upload.ashx" method="post" enctype="multipart/form-data" target="upload_target">
<div>
<label>
<input type="file" name="file" multiple>
</label>
<br /><br />
<button type="submit" class="acs-upload-button ui-button ui-widget ui-state-highlight ui-corner-all ui-button-text-icon-acs-use ui-button-text-icon-primary" role="button" aria-disabled="false">Upload</button>
</div>
<iframe id="upload_targe" name="upload_target"></iframe>
</form>
I'm trying to switch it to this JavaScript.
Code:
function initFileUploader(strId) {
$("form").on("click", "button[type=submit]", function (evt) {
$.ajax("Upload.ashx", {
files: $(this).parent().find(":file"),
iframe: true
}).complete(function(data) {
var returnObj = $.parseJSON(data.responseText);
var updArr = returnObj.update || [];
var strData = "";
var wesAWC = [];
for (var i = 0; i < updArr.length; i = i + 2) {
strData = updArr[i + 1];
wesAWC = $("#" + strId + " .awc-" + updArr[i]).not(".acs-edit-view-hidden");
p_fillField(wesAWC, strData, strId, updArr[i], false);
}
if (returnObj.ok) {
errorMessage("Upload Complete", returnObj.message);
} else {
errorMessage("Upload DID NOT Complete", returnObj.message);
}
});
});
}
This function does work - properly processing the return results instead of dumping them into a single target. Problem is that this function tries to reload the page.
I can't even find jQuery docs that talk about the FILES: and IFRAME: options.
Very confused here...
1 Attachment(s)
Re: Ajax upload confusion
Ok - I found that the files: and iframe: options are not part of the standard jQuery .ajax api - it's something I found on the internet that needs another library to support it - so I abandoned that.
I did get this working nicely with the submit on the form with a iframe as the target. This is what I ended up with in case someone else wants to do an ajax-like upload (without refreshing the page).
Code:
<form id="form1" onsubmit="return false;" runat="server">
<div id="acs-edit-processnamesprocess" style="padding-left: 10px; padding-top: 10px;">
<div class="acs-edit-full">
<div class="acs-div-p acs-edit-view-1">
<span class="acs-span-large">Process Key</span>
<label class="awc-ProcessKey awc-ctrlval2 acs-edit-small-text acs-edit-important"></label>
<br /><br />
Step #1 - Browse for file to upload and click Upload button
<br />
<br />
<form id="upload" action="Upload.ashx" method="post" enctype="multipart/form-data" target="upload_target">
<div>
<label>
<input type="file" name="file" multiple>
</label>
<br /><br />
<button type="submit" class="ui-button ui-widget ui-state-highlight ui-corner-all ui-button-text-icon-acs-use ui-button-text-icon-primary" role="button" aria-disabled="false">Upload</button>
</div>
<iframe id="upload_target" name="upload_target">
<html>
<head></head>
<body id="#upload_results"></body>
</html>
</iframe>
</form>
<ul id="filelist">
</ul>
<br />
Last File and Date Uploaded:
<label class="awc-LastDate awc-ctrlval1 acs-sproc-wait acs-edit-xlarge-text"></label>
<br /><br />
<span class="acs-span-xlarge">Latest Status: </span>
<label class="awc-LatestStatus acs-sproc-wait acs-edit-xlarge-text"></label>
and I hooked onto the .LOAD event in JS (the LOAD does happen when the initial HTML gets into the browser - so I have more work to do with FLAGS and such. Probably make this go into a jQuery DIALOG box so I can be in a modal state with more control over the situation.
Code:
$("#upload_target").load(function() {
var strResult = $("#upload_target").contents().find("body").html();
uploadComplete(strEditPanel, strResult);
});
}
}
This function in JS handles the uploadComplete action and works up the screen. I will be hiding the IFRAME so I can do all the processing myself.
Code:
function uploadComplete(strId, strResult) {
var returnObj = $.parseJSON(strResult);
var updArr = returnObj.update || [];
var strData = "";
var wesAWC = [];
for (var i = 0; i < updArr.length; i = i + 2) {
strData = updArr[i + 1];
wesAWC = $(strId + " .awc-" + updArr[i]).not(".acs-edit-view-hidden");
p_fillField(wesAWC, strData, strId, updArr[i], false);
}
if (returnObj.ok) {
errorMessage("Upload Complete", returnObj.message);
} else {
errorMessage("Upload DID NOT Complete", returnObj.message);
}
}
I love jQuery!!!!!!!!!!!!
Re: Ajax upload confusion
Quote:
Originally Posted by
szlamany
I love jQuery!!!!!!!!!!!!
And i hate MVC!!!!!!!!!!!!
Re: [RESOLVED] Ajax upload confusion
You doing ASP.NET with MVC? And it's got you down??
Re: Ajax upload confusion
Quote:
Originally Posted by
sapator
And i hate MVC!!!!!!!!!!!!
If you want to go with a MVC framework and you dislike MVC.NET (and don't need all of its bells and whistles), you could try NancyFX.
My work has been using it for a little over a year, and using it with Razor views, it is like a dream. It handles everything we need so far, and is extremely easy to use. One downside, though, is that the only way it currently handles sessions is through a cookie.
Re: [RESOLVED] Ajax upload confusion
Thanks but i was actually forced to use this thing so i don't want to go with MVC but i am forced to.