ASPxUploadControl.FileInputCount Property

Gets or sets the number of file input elements contained within an ASPxUploadControl.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v18.2.dll

Declaration

C#

[DefaultValue(1)]
public int FileInputCount { get; set; }

VB.NET

<DefaultValue(1)>
Public Property FileInputCount As Integer

Property Value

Type	Default	Description
Int32	1	An integer value that represents the total number of file input elements.

Remarks

The File Input Element counts can be changed by an end-user on the client side by using the add and the remove buttons. In this case, the ASPxUploadControl.FileInputCount property value is synchronized with actual number of file input elements after the most recent postback on the server.

ASPX

<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" FileInputCount="5" >
  ...
</dx:ASPxUploadControl>

The UploadedFile object is generated for each of the uploaded files. You can use the ASPxUploadControl.UploadedFiles property to get access to these objects. An individual UploadedFile object can be accessed via its index, which is associated with the visual index of corresponding file input elements within the ASPxUploadControl (note that the file input elements indexes represent a zero-based array).

Handle the ASPxClientUploadControl.FileInputCountChanged event to perform specific actions on the client side each time after the file input elements count is changed.

Example

The following part of the ASPxUploadControl Multi-File Upload online demo illustrates the ASPxUploadControl’s capability to upload more than one file at a time.

JS

var fieldSeparator = "|";
function FileUploadStart() {
    document.getElementById("uploadedListFiles").innerHTML = "";
}
function FileUploaded(s, e) {
    if(e.isValid) {
        var linkFile = document.createElement("a");
        var indexSeparator = e.callbackData.indexOf(fieldSeparator);
        var fileName = e.callbackData.substring(0, indexSeparator);
        var pictureUrl = e.callbackData.substring(indexSeparator + fieldSeparator.length);
        var date = new Date();
        var imgSrc = "UploadImages/" + pictureUrl + "?dx=" + date.getTime();
        linkFile.innerHTML = fileName;
        linkFile.setAttribute("href", imgSrc);
        linkFile.setAttribute("target", "_blank");
        var container = document.getElementById("uploadedListFiles");
        container.appendChild(linkFile);
        container.appendChild(document.createElement("br"));
    }
}

ASPX

<script runat="server">
 public partial class UploadControl_MultiFileUpload : BasePage
 {
     const string UploadDirectory = "~/UploadControl/UploadImages/";
     const int ThumbnailSize = 100;

     protected void Page_Load(object sender, EventArgs e) {
         if(IsPostBack)
             UploadControl.ShowProgressPanel = chbShowProgressPanel.Checked;
     }

     protected string SavePostedFiles(UploadedFile uploadedFile) {
         string ret = "";
         if(uploadedFile.IsValid) {
             FileInfo fileInfo = new FileInfo(uploadedFile.FileName);
             string resFileName = MapPath(UploadDirectory) + fileInfo.Name;
             uploadedFile.SaveAs(resFileName);

             string fileLabel = fileInfo.Name;
             string fileType = uploadedFile.PostedFile.ContentType.ToString();
             string fileLength = uploadedFile.PostedFile.ContentLength / 1024 + "K";
             ret = string.Format("{0} <i>({1})</i> {2}|{3}", 
                 fileLabel, fileType, fileLength, fileInfo.Name);
         }
         return ret;
     }
     protected void UploadControl_FileUploadComplete(object sender, 
      FileUploadCompleteEventArgs e) {
         try {
             e.CallbackData = SavePostedFiles(e.UploadedFile);
         }
         catch(Exception ex) {
             e.IsValid = false;
             e.ErrorText = ex.Message;
         }
     }
 }
</script>
...
         <dxuc:ASPxUploadControl ID="UploadControl" runat="server" 
             ShowAddRemoveButtons="True" Width="300px"
             ShowUploadButton="True" AddUploadButtonsHorizontalPosition="Left" 
             ShowProgressPanel="True" ClientInstanceName="UploadControl" 
             OnFileUploadComplete="UploadControl_FileUploadComplete" FileInputCount="3">
             <ValidationSettings MaxFileSize="4000000" 
             AllowedFileExtensions=".jpg,.jpe,.jpeg,.gif"></ValidationSettings>
             <ClientSideEvents
                 fileuploadcomplete="function(s, e) { FileUploaded(s, e) }"
                 fileuploadstart="function(s, e) { FileUploadStart(); }"
             />
         </dxuc:ASPxUploadControl>
...
         <dxrp:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" Width="300px" 
             ClientInstanceName="RoundPanel"
             HeaderText="Uploaded files (jpeg, gif)" Height="100%">
             <panelcollection>
                 <dxp:PanelContent runat="server">
                     <div id="uploadedListFiles" style="height: 150px; font-family: Arial;">
                     </div>
                 </dxp:PanelContent>
             </panelcollection>
         </dxrp:ASPxRoundPanel>
...