• Login

All options for standard mode and AWS S3 storage.

First, add the following property to your control:

Storage="s3" 

<rmg:xile
  Storage="s3"
  Id="Files"
  AWSAccessKey="AccessKey"
  AWSSecretKey="SecretKey"
  S3BucketName="UserUploads"
  S3BucketPath='[[Join("{0}", [[User:ID]])]]'
  SaveOriginal="True"
  S3SaveOriginalBucketName="Originals"
  S3SaveOriginalBucketPath='[[Join("{0}", [[User:ID]])]]'
  AWSRegion="oregon"
  DataField="Files"
  UploadMode="Multiple"
  AutoUpload="True"
  AcceptFileTypes="jpg,png"
  AllowedRoles="Registered Users">  
</rmg:xile>
S3 Example

The following table illustrates the property attributes that are required with the red border to the left as well as all extended options.

Property Usage
ID The Unique Identifier for your control.
Storage Must be set to Storage="s3"
DataField This is the name of your DataField/Column in SQL that the file names will be stored in. Files are stored in a PIPE delimited format.
AWSAccessKey This is your access key from AWS. This key is encrypted when utilized by Xile.
AWSSecretKey This is your secret key from AWS. This key is encrypted when utilized by Xile.
S3BucketName This is the name of your bucket. Remember to make your bucket public unless you have a unique use-case.
S3BucketPath Technically there are no folders within an S3 bucket, but Amazon does allow a key/naming convention that allows you to mimic a folder structure. For example:

S3BucketPath='[[Join("UserImages/{0}/", [[User:ID]])]]'
S3SaveOriginalBucketName This can be used in conjunction with SaveOriginal="True". When using ResizeVersions Xile will first save the original file to the specified bucket, prepending with "orig_".
UniqueFilename True|False This generates a GUID type filename to ensure no duplicate files.
AWSRegion When you create a bucket on S3, you first select a region. You must specify the appropriate region. The following regions are currently accepted by Xile and the default region is "US Standard":

  • us standard
  • oregon
  • northern california
  • ireland
  • singapore
  • tokyo
  • sydney
  • sao paulo

Example: AWSRegion="us standard"
Nullable True|False - Determines whether or not a null value can be inserted into the database for your Datafield/Column.
UploadMode Multiple|Single - Use this in conjunction with the MaxNumberOfFiles property. If set to Single, it will only allow a single file to be selected within the popup dialog. If you still wish to use single, be sure to also set your MaxNumberOfFiles to 1.
AutoUpload True|False - If set to true, files are uploaded immediate after selection. Otherwise, they remain in preview mode and the user must click Start Upload.
AcceptFileTypes This defaults to disallow all file types. Take care to set this to protect your site. This property doesn't inherit from DNN's allowed file types. You have to set it manually. Separate your extensions without the period, like this: jpg,jpeg,png,pdf
AllowedRoles This defaults to "Administrators". To enable anyone to access the control's functions, change this to "All Users" although this is probably a bad idea. You can add multiple roles by separated them with a comma: (Ie. AllowedRoles="Registered Users, Something Else, And Something Else")
AllowDownload True|False - After the user uploads a file, they can re-download the file by clicking the thumbnail or filename.
AutoCreateFolder True|False - If the folder designated in your FileUploadPath doesn't exist, it will be created automatically if set to True.
ResizeVersions Empty by default - Xile uses ImageResizer when resizing images. Use the following format to create resized versions of your image:

ResizeVersions="width=800;height=600;format=jpg;mode=max, sm_:width=400;height=400;format=jpg;mode=max, thm_:width=50;height=50;format=jpg;mode=max"

Each version is separated by a "," comma. To prepend an image with some text, Xile looks for anything to the left of the ":" colon. It's also important that when using versions you create one version without using the "sm_:" prepend addition. This is the filename that's saved to the database, allowing you to access all the others later within your templates. (Ie: src="images/sm_[[ImageFile]]")

Hats off to ImageResizing.net as they've provided you with a huge variety of formatting options. View The Docs

What if I'm allowing more than images you ask? We've got you covered. Xile will only perform Versioning on image files and save other files a single time into the upload path.

Also, if you create at least one "thm_" version Xile will use this rendered thumbnail to display image confirmation after upload, saving you bandwidth.

Warning If using ResizeVersions with S3, Xile will create a temporary folder on your server, perform resizing there, and then proceed by sending the files to S3. Afterwards the temporary folder is removed. This does affect performance some and we would suggest using ImageResizer via query parameters instead so that images are resized dynamically when requested.
SaveOriginal True|False - If you want to save the original file uploaded in the original format that it was uploaded, set this to True. Xile will prepend the filename with "orig_" and place it in the upload folder. This property is ignored if ResizeVersions is empty and is currently intended for the purpose of images. Also, be sure to designate the path in SaveOriginalFilePath. Original files will be automatically prepended with "orig_".

Warning This has a small impact on performance. If you're saving the original and upload 5 files, it's just like uploading 10.
MaxNumberOfFiles Defaults to Unlimited - Enter a whole number value here to set the max files that can be added per instance.
MaxFileSize Max file size in bytes that can be uploaded. (Ie: 1048576 = 1MB)
MinFileSize Defaults to "1" byte - If you have a unique requirement that a file needs to be a certain size, you can enter it here in bytes.
AddFilesButtonText Setting this property will change the text for the Add Files button on the top button bar.
AddFilesButtonIcon Typical use would be to use a font/icon library but you can insert an image icon as well. (Ie: " ). We've included a link to FontAwesome in the demo form.
AddFilesButtonClass Setting this property will change the text for the Add Files button on the top button bar.
AddFilesButtonText You can override our default styles by adding your own class name here and styling accordingly. This is for the Add Files button on the top button bar.
StartUploadButtonText Setting this property will change the text for the Start Upload button on the top button bar.
StartUploadButtonIcon Typical use would be to use a font/icon library but you can insert an image icon as well. (Ie: " ). We've included a link to FontAwesome in the demo form.
StartUploadButtonClass You can override our default styles by adding your own class name here and styling accordingly. This is for the Start Upload button on the top button bar.
StartUploadButtonTextIndividual Setting this property will change the text for the Start Upload button for the individual files when using AutoUpload="False".
StartUploadButtonIconIndividual Typical use would be to use a font/icon library but you can insert an image icon as well. (Ie: " ). We've included a link to FontAwesome in the demo form.
StartUploadButtonClassIndividual You can override our default styles by adding your own class name here and styling accordingly. This is for the Start Upload button for individual files when using AutoUpload="False".
CancelUploadButtonText Setting this property will change the text for the Cancel Upload button on the top button bar.
CancelUploadButtonIcon Typical use would be to use a font/icon library but you can insert an image icon as well. We've included a link to FontAwesome in the demo form.
CancelUploadButtonClass You can override our default styles by adding your own class name here and styling accordingly. This is for the Cancel Upload button on the top button bar.
CancelUploadButtonTextIndividual Setting this property will change the text for the Cancel Upload button for the individual files when using AutoUpload="False".
CancelUploadButtonIconIndividual Typical use would be to use a font/icon library but you can insert an image icon as well. We've included a link to FontAwesome in the demo form.
CancelUploadButtonClassIndividual You can override our default styles by adding your own class name here and styling accordingly. This is for the Cancel Upload button for individual files when using AutoUpload="False".
DeleteButtonText Setting this property will change the text for the Delete button on the top button bar.
DeleteButtonIcon Typical use would be to use a font/icon library but you can insert an image icon as well. We've included a link to FontAwesome in the demo form.
DeleteButtonText Setting this property will change the text for the Delete button on the top button bar.
DeleteButtonClass You can override our default styles by adding your own class name here and styling accordingly. This is for the Delete button on the top button bar.
DeleteButtonTextIndividual Setting this property will change the text for the Delete button for the individual files after upload takes place.
DeleteButtonIconIndividual Typical use would be to use a font/icon library but you can insert an image icon as well. We've included a link to FontAwesome in the demo form.
DeleteButtonClassIndividual You can override our default styles by adding your own class name here and styling accordingly. This is for the Delete button for individual files after upload takes place.
ToggleCheckboxLabelText Setting this property will change the default text next to the checkbox on the top button bar.
WrapperClass You can change the class that the control is wrapped in, allowing you to style accordingly.
ErrorClass You can change the class that the control uses to display errors. This will affect how the text is displayed on error. (Ie. Max Files exceeded)
NonImageIcon When uploading non-image files, you can change the default icon that is displayed by setting the full path on this property.
ShowTopCancelButton True|False - Optionally hide the cancel button on the top button bar.
ShowTopDeleteButton True|False - Optionally hide the delete button on the top button bar.
ShowTopCheckBox True|False - Optionally hide the checkbox on the top button bar.
ShowTopProgressBar True|False - Optionally hide the animated progress bar beneath the top button bar.
Dropzone True|False - Optionally hide the Dropzone area.
DropzoneText Optionally change the default dropzone text.
PreviewMaxWidth Resize the preview image via client-side on upload. If you're setting the preview width in your CSS this may cause a flicker. Use one or the other for best results.
PreviewMaxHeight Resize the preview image via client-side on upload. If you're setting the preview width in your CSS this may cause a flicker. Use one or the other for best results.
SequentialUploads True|False - Defaults to True. Uploads files one at a time for better user experience on multiple uploads. Previously the default was asynchronous.
DeleteButtonText Setting this property will change the text for the Start Upload button for the individual files when using AutoUpload="False".
AcceptFileTypesError Optionally change error message on invalid file type.
MaxNumberOfFilesError Optionally change error message when max files have been exceeded.
MaxFileSizeError Optionally change error message when max file size has been exceeded.
MinFileSizeError Optionally change error message when min file size has not been met.
ZipMode standard|unarchive - If you allow zip files to be uploaded, you have two options. Defaulting to standard, xile will simply upload the compressed file. If set to unarchive, Xile will unarchive your file along with embedded zip files, and continue performing all other operations that you specify, including image resizing. Unarchive mode also obeys the AllowedExtensions property, but it does not currently obey the MaxNumberOfFiles property so use this feature with caution. A good way to protect your site is to limit the file size using the MaxFileSize property. Also, depending on the amount of files within the zip file, along with using Resized versions can take a while so if you encounter this delay we would encourage you to place a warning above the control letting the end user know to be patient. Warning Setting this to unarchive does affect performance. Xile will first create a temporary folder on your server, unarchive the files, and then proceed with image resizing or other settings that you've enabled. It's suggested that if you're allowing large zip files to be uploaded to place a warning or a be patient label next to the control.