ASPxUploadControl.AddUploadButtonsHorizontalPosition Property
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v19.2.dll
Declaration
[DefaultValue(AddUploadButtonsHorizontalPosition.Left)]
public AddUploadButtonsHorizontalPosition AddUploadButtonsHorizontalPosition { get; set; }
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.
<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>
...
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"));
}
}