ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - File Upload - Inside DetailsView control

Here you can upload up to 10 MB of images on asynchronous postback.
Click 'Edit' to see FileUpload.

  Edit
Order:11077
Name:R00anyon Grocery
City:Albuquerquesdsd
Region:NM
Country:Portugal2
Postal Code:871101
 


The full source code of this example you can find in the downloaded Suite.
ASP.NET
<%@ Register Assembly="Obout.Ajax.UI" Namespace="Obout.Ajax.UI.FileUpload" TagPrefix="obout" %>
<script type="text/JavaScript">
  function onClientBeforeUpload(sender, args) {
      $get("<%= label.ClientID %>").innerHTML = "";
      return true;
  }
  function cancelFileUpload() {
      // find FileUpload
      var fileUpload = $find('<%= DetailsView1.FindControl("fileUpload1").ClientID %>');
      if (fileUpload && fileUpload._filesList) {
          // can not cancel already
          if (fileUpload.get_isInProgress()) {
              return false;
          }
          // reset files list
          fileUpload._filesList.clear(true);
      }
      return true;
  }
</script>
...
<asp:UpdatePanel runat="server" ID="UpdatePanel1"><ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="SqlDataSource1"
      OnItemUpdated="myItemUpdated" Width="350px" AutoGenerateRows="false" >
<Fields>
<asp:TemplateField>
<ItemTemplate>
<asp:linkbutton id="Edit" text="Edit" commandname="Edit" runat="server"/>
</ItemTemplate>
<EditItemTemplate>
<asp:linkbutton id="Update" text="Update" commandname="Update" runat="server"/>
<asp:linkbutton id="Cancel" OnClientClick="return cancelFileUpload();" text="Cancel"
      commandname="Cancel" runat="server"/>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="OrderID" HeaderText="Order:" />
...
<asp:BoundField DataField="ShipPostalCode" HeaderText="Postal Code:" />
<asp:TemplateField>
<ItemTemplate>
<%--We need invisible FileUpload here for correct work--%>
<obout:FileUpload Visible="false" runat="server" id="fileUpload1"
       ValidFileExtensions="jpeg;jpg;gif;tiff;png" MaximumTotalFileSize="10240" />
</ItemTemplate>
<EditItemTemplate>
<obout:FileUpload OnClientBeforeUpload="onClientBeforeUpload" Accept="image/*"
       ValidFileExtensions="jpeg;jpg;gif;tiff;png" MaximumTotalFileSize="10240"
       Width="250px" runat="server" id="fileUpload1" BrowseFieldDescription="Images" />
</EditItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView><br /><br />
<asp:Label runat="server" ID="label" Text="" />
</ContentTemplate></asp:UpdatePanel>

"I have been looking at your Flyout control and I am very impressed! I have been looking for a similar control for quite some time."

Steve Pietrek

Random testimonial   All testimonials