|
|
Rank: Advanced Member
Groups: Member
Joined: 11/16/2010
Posts: 48
|
My app currently uses the standard file upload, but my code-behind creates a variable number of "slots" on a page during initation - each with a fileUpload control and a related text box. A typical page may have 4 such slots, and an upload button.
Here's an example
td.ID = "EntryCell_" & ndx
Dim iptFile As FileUpload = New FileUpload
td.Controls.Add(iptFile)
With iptFile
.ID = "EntryFile_" & ndx
.Width = w + 145
.SkinID = "optionalData"
End With
Dim filePath As New TextBox
td.Controls.Add(filePath)
With filePath
.ID = "EntryPath_" & ndx
.CssClass = "hidden"
End With
Return td
Can I create mudltile AjaxUploader controls on a page in the same way?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Thanks for posting in the forum. You don't need multiple uploaders for multiple slows. You can set the uploader's Rows property so that the uploader displays multiple input boxes for you. Here is a working example: http://demo.essentialobjects.com/Demos/AJAX%20Uploader/Multi-Row%20Uploader/Demo.aspxHope this helps. Please feel free to let us know if you have any more questions. Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/16/2010
Posts: 48
|
I need to pair each uploader with a text box, so I need to create multiple uploaders on the page. Can I do this?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
I believe you can do that. However you won't be able to have them all uploading at the same time.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/16/2010
Posts: 48
|
OK, but can I upload them all serially with a single "Upload" button, as I do with the standard FileUpload?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Yes. You can do that but it will need a little additional code. Because each uploader is an independently control, they won't automatically fire one after another. You will need to handle the previous uploader's "Done" event and then start the next uploader with code. All these can be done on the client side with JavaScript. Let us know if you need sample code on that.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/16/2010
Posts: 48
|
Yes please
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Here is the sample code for you:
Code: JavaScript
function start_uploader(id)
{
//Get the uploader object
var uploader = eo_GetObject(id);
//Start the upload
uploader.upload();
}
function upload_done(uploader)
{
//Call eo_TriggerServerEvent to post back the page
//if all uploaders are done. Otherwise trigger the
//next uploader
if (uploader.getId() == "<%=Uploader1.ClientID%>")
start_uploader("<%=Uploader2.ClientID%>");
else if (uploader.getId() == "<%=Uploader2.ClientID%>")
start_uploader("<%=Uploader3.ClientID%>");
else
eo_TriggerServerEvent("<%=ScriptEvent1.ClientID%>");
}
function upload_done_handler(uploader)
{
//This function is called when an uploader is done. Here
//we merely delay for a 100ms and then pass the control to
//upload_done. The delay is necessary to allow the uploader
//to finishes updating its internal data before we post
//back the page or trigger the next upload
setTimeout(function()
{
upload_done(uploader);
}, 100);
}
Code: HTML/ASPX
<div>
<eo:AJAXUploader runat="server"
ID="Uploader1" TempFileLocation="~/eo_upload"
ClientSideOnDone="upload_done_handler"
OnFileUploaded="Uploader_FileUploaded">
</eo:AJAXUploader>
</div>
<div>
<eo:AJAXUploader runat="server"
ID="Uploader2" TempFileLocation="~/eo_upload"
ClientSideOnDone="upload_done_handler"
OnFileUploaded="Uploader_FileUploaded">
</eo:AJAXUploader>
</div>
<div>
<eo:AJAXUploader runat="server"
ID="Uploader3" TempFileLocation="~/eo_upload"
ClientSideOnDone="upload_done_handler"
OnFileUploaded="Uploader_FileUploaded">
</eo:AJAXUploader>
</div>
<div>
<eo:ScriptEvent runat="server" ID="ScriptEvent1"></eo:ScriptEvent>
</div>
<div>
<input type="button"
onclick="start_uploader('<%=Uploader1.ClientID%>');" value="Start" />
</div>
Code: C#
protected void Uploader_FileUploaded(object sender, EventArgs e)
{
//Get the uploaded files. Note this event is
//triggered once for every uploader, so the
//file list contains file uploaded by that
//uploader only. Array "files" should only have
//a single element if Rows is 1 (default value)
EO.Web.AJAXUploader uploader = (EO.Web.AJAXUploader)sender;
EO.Web.AJAXPostedFile[] files = uploader.PostedFiles;
//Now handle the uploaded files
}
The above sample has three uploader controls in one page and when user press "Start" button, they would start to upload one by one. The code handles every uploader's ClientSideOnDone event and triggers the next one inside the event handler. The code is for demonstration purpose only. In order to use the code in production, you may want to make the following changes: 1. Customize the uploader's LayoutTemplate. That allows you to remove the built-in "Upload" button and "Cancel" button since the code uses a separate upload button; 2. The above sample has no error handling code. In case user did not browse a file and click "Start" to upload, no upload will occur and ClientSideOnDone will not be called. To handle such situation you will also need to handle ClientSideOnError and ClientSideOnCancel; 3. The code uses a ScriptEvent control (this is a free control in the package) to post back the page when all uploaders are done. You can change it anything else as long as it also posts back the page. For example, you can set the last uploader's AutoPostBack to true; or call __doPostBack directly; 4. The code handles the uploader's OnFileUploaded event to examine the uploaded files. You can also examine each uploader's PostedFiles property directly; Hope this helps. Please let us know if you still have any questions. Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/16/2010
Posts: 48
|
Hi - this is now a post sales question!
To recap, am creating the AjaxUploader controls in code. My problem is in your example you have
<eo:AJAXUploader runat="server"
ID="Uploader2" TempFileLocation="~/eo_upload"
ClientSideOnDone="upload_done_handler"
OnFileUploaded="Uploader_FileUploaded">
</eo:AJAXUploader>
but the OnFileUploaded property is not exposed by the control
(see EO.Web Help.chm!/EO.Web.AJAXUploaderMembers.html)
How do I get this postback to happen?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
OnFileUploaded is the event handler for event FileUploaded. So you will need to use FileUploaded, not OnFileUploaded in your code.
Thanks!
|
|