ASPxUploadControl.ShowAddRemoveButtons Property

Gets or sets a value that specifies whether the add and remove buttons are displayed within the ASPxUploadControl.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v20.2.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue(false)]
public bool ShowAddRemoveButtons { get; set; }

VB.NET

<DefaultValue(False)>
Public Property ShowAddRemoveButtons As Boolean

Property Value

Type	Default	Description
Boolean	**false**	true, if the buttons are visible, otherwise, false.

Remarks

Use the ShowAddRemoveButtons property to specify whether the Add and Remove buttons are visible within the ASPxUploadControl.

ASPX

<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" ShowAddRemoveButtons="True">
    ...
</dx:ASPxUploadControl>

The appearance of these buttons are customized by using the ASPxUploadControl.ButtonStyle property. The image and text for the Add and Remove buttons are defined via the ASPxUploadControl.AddButton and the ASPxUploadControl.RemoveButton properties.

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.

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>
...

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"));
    }
}