ASPxUploadControl.AddUploadButtonsHorizontalPosition Property

Gets or sets the horizontal alignment of the add and upload buttons.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v18.2.dll

Declaration

C#

[DefaultValue(AddUploadButtonsHorizontalPosition.Left)]
public AddUploadButtonsHorizontalPosition AddUploadButtonsHorizontalPosition { get; set; }

VB.NET

<DefaultValue(AddUploadButtonsHorizontalPosition.Left)>
Public Property AddUploadButtonsHorizontalPosition As AddUploadButtonsHorizontalPosition

Property Value

Type	Default	Description
AddUploadButtonsHorizontalPosition	**Left**	One of the AddUploadButtonsHorizontalPosition enumeration values.

Available values:

Name	Description
Left	Aligns the buttons along the left edge of the file input element.
Right	Aligns the buttons along the right edge of the file input element.
InputRightSide	The buttons are displayed on the right side of the file input element.
Center	The buttons are displayed at the center of the file input element.

Remarks

The AddUploadButtonsHorizontalPosition property is in effect if the ASPxUploadControl.ShowUploadButton and the ASPxUploadControl.ShowAddRemoveButtons properties are set to true.

The vertical position of the upload button can be customized via the ASPxUploadControl.AddUploadButtonsSpacing property.

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