Support forums - Using AjaxUploader with a DetailsView (upload/insert at same time)

Support forums » Products » Ajax Uploader » Re: Using AjaxUploader with a DetailsView (upload/insert at same time)

Using AjaxUploader with a DetailsView (upload/insert at same time)

Last post 08-20-2009, 1:13 AM by cutechat. 1 replies.


	Sort Posts: Previous Next

08-14-2009, 10:33 AM 54697

msu.falcon
Joined on 08-14-2009
Posts 2

Using AjaxUploader with a DetailsView (upload/insert at same time)

Reply Quote

Hi!

I need to use an AjaxUploader as part of a DetailsView. Users need to enter information and choose the file they want to upload (I have ManualStartUpload set to true) before trying to insert the new record.

I have a couple of problems, though.

1) I need to be able to validate that they have selected a file. I haven't been able to find any members or properties on the Uploader that would let me do this. The validation really needs to happen server side, so a JavaScript-only solution isn't a fix (although JavaScript for a client-side check would be fine).

2) I'm not sure how to manually start the upload once they've entered all of the information.

I had 2 different ideas on how to set up my form:

The first was to hook the OnClick event for the button I'm using as the upload (InsertButton) button on the uploader. Unfortunately, all OnClick events seem to be ignored, and I wouldn't know how to stop the Browse file dialog from starting while I validate (stopping the browse file dialog from opening if they hadn't filled in all info), then manually start that dialog later after validating.

My second idea (which is probably a better idea than the first anyway) was to set ManualStartUpload to false and use the Insert button (or really, a generic button with a command works too) for the DetailsView. The problems I have with this way are: I need a way to validate that they have selected a file (with the proper extension) using the upload control, and then I need to be able to call a method to start the upload. I'll probably have to use the FileUploaded event to insert the rest of the information into the database since I'm not sure how the insert command would interact with the Uploader (I would suspect that the insert command wouldn't wait for the uploader to finish, thus causing a partially uploaded file).

I really need for this information to be entered to the database and the file to be uploaded at the "same time" for the user, meaning all information should be correct on the form and they should have the file they want uploaded picked. If there's a better way of doing this, I'd be open to hearing that as well.

Thanks!

08-20-2009, 1:13 AM 54837 in reply to 54697

cutechat
Joined on 07-22-2004
Posts 2,332

Re: Using AjaxUploader with a DetailsView (upload/insert at same time)

Reply Quote

Hi,

Please check this sample:

<%@ Page Language="C#" %>
<%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
<%@ Import Namespace="CuteWebUI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!IsPostBack)
{
BindDetails();
}
}
private void BindDetails()
{
DetailsView1.DataSource = new DateTime[] { DateTime.Now };
DetailsView1.DataBind();
}
protected void DetailsView1_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
UploadPersistedFile pf=(UploadPersistedFile)DetailsView1.FindControl("uploader1");
if (pf.File != null)
{
this.Title = "PageIndexChaging, saving " + pf.File.FileName;
}
DetailsView1.PageIndex = e.NewPageIndex;
BindDetails();
}
protected void uploader1_FileValidating(object sender, UploaderEventArgs args)
{
if (args.FileSize>1000000)
throw (new Exception(args.FileName+" is to big"));
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
UploadPersistedFile pf = (UploadPersistedFile)DetailsView1.FindControl("uploader1");
if (pf.File != null)
{
//pf.File.CopyTo("NewFolder/"+pf.File.FileName);//MoveTo
labelMsg.Text = "File saved : " + pf.File.FileName;
}
else
{
labelMsg.Text = "No file!";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var uploader;
function CuteWebUI_AjaxUploader_OnInitialize()
{
uploader=this;
}
function CuteWebUI_AjaxUploader_OnPostback()
{
document.getElementById('<%=btnSubmit.ClientID %>').click();
return false;
}
function StartUpload()
{
if(uploader.getqueuecount()>0)
uploader.startupload();
else
alert("please select a file");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DetailsView runat="server" ID="DetailsView1" AllowPaging="True" OnPageIndexChanging="DetailsView1_PageIndexChanging">
<Fields>
<asp:TemplateField HeaderText="Attachment">
<ItemTemplate>
<CuteWebUI:UploadPersistedFile id="uploader1" ManualStartUpload="True" runat="server" ItemTextTemplate="{0} {1} " OnFileValidating="uploader1_FileValidating" />
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
<asp:Button runat=server id="btnSubmit" Text="Submit" Style="display:none;" OnClick="btnSubmit_Click" />
<button onclick="StartUpload();return false;">save profile</button>
<asp:Label runat=server ID="labelMsg" />
</div>
</form>
</body>
</html>

<%@ Page Language="C#" %>

<%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
<%@ Import Namespace="CuteWebUI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

if (!IsPostBack)
		{
			BindDetails();
		}
	}

private void BindDetails()
	{
		DetailsView1.DataSource = new DateTime[] { DateTime.Now };
		DetailsView1.DataBind();
	}

protected void DetailsView1_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
	{
		UploadPersistedFile pf=(UploadPersistedFile)DetailsView1.FindControl("uploader1");
		if (pf.File != null)
		{
			this.Title = "PageIndexChaging, saving " + pf.File.FileName;
		}
		
		DetailsView1.PageIndex = e.NewPageIndex;
		BindDetails();
	}

protected void uploader1_FileValidating(object sender, UploaderEventArgs args)
	{
		if (args.FileSize>1000000)
			throw (new Exception(args.FileName+" is to big"));
	}

protected void btnSubmit_Click(object sender, EventArgs e)
	{
		UploadPersistedFile pf = (UploadPersistedFile)DetailsView1.FindControl("uploader1");
		if (pf.File != null)
		{
			//pf.File.CopyTo("NewFolder/"+pf.File.FileName);//MoveTo
			labelMsg.Text = "File saved : " + pf.File.FileName;
		}
		else
		{
			labelMsg.Text = "No file!";
		}
	}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Untitled Page</title>
	<script type="text/javascript">
	var uploader;
	function CuteWebUI_AjaxUploader_OnInitialize()
	{
		uploader=this;
	}
	function CuteWebUI_AjaxUploader_OnPostback()
	{
		document.getElementById('<%=btnSubmit.ClientID %>').click();
		return false;
	}
	function StartUpload()
	{
		if(uploader.getqueuecount()>0)
			uploader.startupload();
		else
			alert("please select a file");
	}
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div>
			<asp:DetailsView runat="server" ID="DetailsView1" AllowPaging="True" OnPageIndexChanging="DetailsView1_PageIndexChanging">
				<Fields>
					<asp:TemplateField HeaderText="Attachment">
						<ItemTemplate>
							<CuteWebUI:UploadPersistedFile id="uploader1" ManualStartUpload="True" runat="server" ItemTextTemplate="{0} {1} " OnFileValidating="uploader1_FileValidating" />
						</ItemTemplate>
					</asp:TemplateField>
				</Fields>
			</asp:DetailsView>
			<asp:Button runat=server id="btnSubmit" Text="Submit" Style="display:none;" OnClick="btnSubmit_Click" />
			<button onclick="StartUpload();return false;">save profile</button>
			<asp:Label runat=server ID="labelMsg" />
		</div>
	</form>
</body>
</html>

Regards,

Terry