ajax method: uploading

Showing posts with label uploading. Show all posts

Saturday, March 24, 2012

Uploading a file in a updatepanel

Basically, I am trying to do an upload inside the updatepanel. (Ajax, C#, Visual Studio 2005)

I don't think it's possible to do it without full page post back.. (If I am wrong, please let me know how!!)

So, I decided to put a not-visible button in master.master page. The code follows below.

<%@dotnet.itags.org. Master Language="C#"
AutoEventWireup="true"
CodeFile=" Master.master.cs"
Inherits="Master" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">

<link rel="stylesheet" href="http://links.10026.com/?link=css/gen_style.css" type="text/css" />
</head
<body style="border:0px; margin:0px;"
<form id="submitTicketForm" method="post" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="MainLoginPanel" runat="server">
<ContentTemplate

<div class="headerTop">
<div id="header">
<div class="logo"></div>
<div class="login">
<asp:Panel runat="server" ID="LogOutPanel">
<asp:Button OnClick="LogOut_Click" runat="server" ID="LogOut" Text="Click here to logout" Width="142" CssClass="myBtn" />
</asp:Panel>
</div>
</div>
</div

<asp:Panel runat="server" ID="Tab_Panel">
<div class="tabTop">
...
</div>
</asp:Panel>
<div class="contentplaceholder">
<asp:contentplaceholder id="mainContent" runat="Server"></asp:contentplaceholder>
</div>
<asp:Button id="UploadButton" Visible="false" runat="server" Text="Submit" CssClass="myBtn" OnClick="sendData" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="UploadButton" />
</Triggers>
</asp:UpdatePanel

<div class="footer">Footer</div>
</form>
</body>
</html
Then the below is the code for NewTicket.aspx. If I press the btn_sendData button, I need to trigger the UploadButton button in the master's page.

<%@dotnet.itags.org. Page Language="C#"
MasterPageFile="~/Master.master"
AutoEventWireup="true"
CodeFile="NewTicket.aspx.cs"
Inherits="NewTicket"
Title="SPN Ticketing System - Submit a New Ticket" %
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %
<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" Runat="Server">
<asp:FileUpload ID="fileChoose" runat="server" />
<asp:Button id="btn_sendData" runat="server" Text="Submit" CssClass="myBtn" OnClick="TriggerMasterUploadBtn" />
</asp:Content
Now, the below is the partial code from NewTicket.aspx.cs.

protected void TriggerMasterUploadBtn(object sender, EventArgs e)
{

Control btnControl = Page.Master.FindControl ( "UploadButton" );
Button btn = (Button)btnControl;
//I have the control but I don't know what to do!
}

I've been pulling my hair for hours for this thing.
Your help is GREATELY appreciated!
Thank you again.

It is not possible to do a file upload without doing a full post back. If you have the fileupload inside the update panel you will need to add a trigger to the button that will take care of the uploading. There have been many posts on this forum about this, and some have some good work arounds.

http://forums.asp.net/thread/1444713.aspx

There is alink on one of the threads that is to an MSDN page that listed all the controls that currently do not work with update panel but I can't seem to find it. If anyone does, please post it here.

Uploading file during onchange

I try to upload file in server during user select file:

<inputid="iupload"runat="server" type="file"style="width:1px"/>
<inputtype="hidden"id="hdName"runat="server"/>

<scriptlanguage="javascript">
function Doo(){
document.getElementById('hdName').value = document.getElementById('iupload').value;// to check path
WebForm_DoCallback('__Page',document.getElementById('iupload').value,CallbackFunction,'context',null,false);returnfalse;
}
</script>

and on server side:

protectedvoid Page_Load(object sender, EventArgs e)
{
string argClientFunction ="";
string cScript = ClientScript.GetCallbackEventReference(this, argClientFunction,"CallbackFunction","'context'","null",false);
string f=@dotnet.itags.org."
javascript:Doo();";
iupload.Attributes.Add("onchange", f);

string scr ="<script language=javascript>";
scr +="function CallbackFunction(result, context)";
scr +="{";
scr +="document.getElementById('spUploaded').innerText += 'Done';";
scr +=" return false;";
scr +="}";
scr +="</script>";
RegisterStartupScript("scr" +this.ClientID, scr);

}

publicvoid UploadFile(string fileName)
{
// try to upload file to server
}
publicstring GetCallbackResult()
{
UploadFile(evArg);

evArg = String.Empty;

return evArg;
}
publicvoid RaiseCallbackEvent(string eventArgument)
{
evArg = eventArgument;
}

Problem occur in UploadFile(...): When I try to get iupload.PostedFile for file uploading it's null. I can get file name only.

How can I upload file normally without postback with onchange ?

I need upload file to server as Gmail or Yahoo Mail!

File uploads require a full postback. There has been a lot of talk on here about sites such as gmail that appear to asynchronously load a file. At this point, the only way that I have heard of this successfully implemented is by using IFrames and have another page that does the full postback, but doesn't look like it.

Thank you! I have heard about Iftame to upload files. Have you any information about this?

Not really... we haven't got into handling file uploads very often, and if we do, we would probably use the telerik fileupload control since we have the suite and I believe it handles very large files much better that the built in fileupload for asp.net. When I tested both of them, I was able to crash IIS with the built in control by trying to upload a dvd image because it seemed to check for the file size only after it had been processed through IIS, but the telerik control seemed to do that in pieces which didn't cause it to lock up.

Uploading File doesnt work when using UpdatePanel!

Hi,

Uploading files works fine but when i tried to include everything inside the UpdatePanel then i can no longer upload. The reason is that on my PostBack, the input values(file1, file2, file3, file4) have empty values..

<tableborder="0"cellspacing="0"cellpadding="0"style="border-collapse: collapse;">

<trid="fileInput1"><tdalign="left"class="VerdanaXXSmallBlue">1) </td>

<tdalign="left"class="VerdanaXXSmallBlue">2) </td>

</td><td><inputid="file4"type="file"style="width: 464px"class="VerdanaXSmallBlue"runat="server"/></td></tr></table>

Hi Kiril,

The Ajaxdocumentation states that theFileUpload control is not compatible with partial-page updates and is therefore not supported inside an UpdatePanel. To use aFileUpload control inside anUpdatePanel control, set the postback control that submits the file to be aPostBackTrigger for the panel.

HTH

cool. thanks

Uploading file in chunks using AJAX (or asynchronous call)

Hiya guys,

Just done some work with FileUpload in my AJAX-enabled web application, unfortunately using full-postback, so want to change it using AJAX.

Got some ideas, but not if that way will work, so need some bright ideas maybe from someone who already done something similar. Basically I want to achieve partial postback on uploading files in chunks, so not using the server's memory which can lead to server restart... Just saw some very interesting code snippets, but those were using ActiveXObject, which I would like to avoid.Is it possible to use a ScriptManager in some way to achieve similar results?
I guess it would be using XMLHTTP, as I already did some digging, but I mainly seen this using ActiveXObject.

Anyone with such an experience?

Thanks

Ben

hello.

old ajax code that needs to be ported to the asp.net ajax version, but it might still point you in the right direction:

http://msmvps.com/blogs/luisabreu/archive/2006/12/14/uploading-files-without-a-full-postback.aspx

Hi,

Here is a sample:

PageA.aspx:
<%@. Page Language="C#" %>
<%@. Register src="http://pics.10026.com/?src=Gallery.ascx" TagName="Gallery" TagPrefix="uc1" %>
<%@. Register src="http://pics.10026.com/?src=Upload.ascx" TagName="Upload" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Upload1.Button1clientID = Gallery1.Button1clientID;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<uc1:Gallery ID="Gallery1" runat="server" />
<uc2:Upload ID="Upload1" runat="server" />
</form>
</body>
</html>
Gallery.ascx:
<%@. Control Language="C#" ClassName="Gallery" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
}
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
public string Button1clientID
{
get
{
return Button1.ClientID;
}
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<div style="visibility:hidden"><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" UseSubmitBehavior="false" Text="Button" /></div>
</ContentTemplate>
</asp:UpdatePanel>
Upload.ascx:
<%@. Control Language="C#" ClassName="Upload" %>
<script runat="server">
private string buttonclientID = "";
public string Button1clientID
{
set
{
buttonclientID = value;
}
}
</script>
<script type="text/javascript">
function submitForm(frameName,upload){
document.forms[0].action="PageA.aspx"
document.forms[0].target=frameName;
window.setTimeout(function(){
var uploadE=document.getElementById(upload);
uploadE.parentElement.appendChild(document.createTextNode(uploadE.value));
uploadE.parentElement.replaceChild(uploadE.cloneNode(true),uploadE);
},100);
document.forms[0].submit();
document.getElementById("<%=buttonclientID %>").click();
}
</script>
<div id="Div1">
<input type="file" name="upload" id="upload" />
<button onclick="javascript:submitForm('hiddenFrame','upload')">Upload</button>
<iframe name="hiddenFrame" src="http://pics.10026.com/?src=blank.htm" id="hiddenFrame" style="display: none">
</iframe>
</div>

An Ajax Alternative for FileUpload:

We've all embraced Ajax as a revolutionary technology, but many of us forget (or are not aware) of asynchronous posts in the times before XmlHttp requests. Our good old friend the IFrame used to be the preferred option for asynchronous http communications. Because an iframe is in essence it's own browser window, it can be used to fire off asynchronous requests (both POST and GET). However, even more important is an IFrame's ability to be a 'target' of a form POST. By adding an IFrame to the page and setting it as the target of the form post, you can in essence create an asynchronous file transfer.

For more help about Ajax Alternative for FileUpload, Please check: http://blogs.infragistics.com/blogs/tony_lombardo/archive/2007/04/09/file-uploads-where-s-the-ajax.aspx

NOTE:This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you.

Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations

regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet,

and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

Best Regards,

hello.

well, simple code, but i still prefer my code since it'll return the response for the upload.

Uploading files

I am using ajax 1.0, when i am uploading files, it does not working properly, it is not uploading any images. I heared that file upload will not work in ajax, is it true? help appreciated

Hi sreejithpkrishnan,

I don't know if you want to uploadfiles in combination wioth an update panel if so check the summary below:

Controls that are not compatible with updatepanel controls

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside anUpdatePanel control:

TreeView andMenu controls.

Hi,

the FileUpload, and several other controls, don't play nicely together with the UpdatePanel control. You can however use inside it but must set it to be a PostBackTrigger for the UpdatePanel. Read more about ithere andhere. The last link provides a sample for the FileUpload control that works together with the UpdatePanel control.

Grz, Kris.

hello.

In the past, I've written an extender which lets you upload files without performing a postback. it was written for the beta 2 or rc version (really can't recall it), but you should be able to update it to the current release without having much problems.

http://msmvps.com/blogs/luisabreu/archive/2006/12/14/uploading-files-without-a-full-postback.aspx

Saturday, March 24, 2012

Uploading a file in a updatepanel

Uploading file during onchange

Uploading File doesnt work when using UpdatePanel!

Uploading file in chunks using AJAX (or asynchronous call)

An Ajax Alternative for FileUpload:

Uploading files

ajax method

Blog Archive

About Me