Enhanced File / Image Upload Custom Control For XMod Pro
Version 2.1.0
This Custom Control for XMod Pro Forms improves upon the core upload control and adds several important items for user and administrator benefits!
Benefits & Features: We developed this Custom Control for project situations where we needed to allow users to upload images to the website through an XMod Pro form, however we needed the ability to further enforce file size restrictions, work with image resizers and more.
- Easy to Use - The Control is similar in structure to the core XMP Upload control with added features/tags. All standard XMP features such as the ability to specify upload directory, rename to unique/overwrite choice, enforce specific file extension types allowed
Drag & Drop
One of the most requested new features, Drag & Drop functionality is more user-friendly and matches the modern style and function of newer DNN instances.
(feature added version 2.1.0)
- Multi-File Upload - Allows for multiple file upload through one form control. Decide whether to save one file name or an array of file names in the data field when saving to the database. In this manner, it operates with the same array style of other XMP multi-select fields that can be parsed by your SQL or Stored Procedure as needed.
(feature added version 2.1.0)
Cloud Storage - Upload to Amazon S3
Expand your server's storage options to have large files stored in the cloud! Use XMod Pro forms to seamlessly integrate Amazon S3 cloud storage for your DotNetNuke site. Because you set and control, this allows for multiple Amazon S3 Accounts/Bucket connections per DNN Instance/Portal. Simply specify your Amazon S3 AccessKey, SecretKey and BucketName and your files are uploaded to your Amazon S3 account!
(feature added version 2.0.0)
- Dynamically Create Folders - Create folders based on XMP Tokens and database values set as directory or folder path. This allows you to create folders and organize user file uploads by custom items such as UserID, UserName, Company, Role or RoleGroup, etc.
(feature added version 1.1.0)
- UnZip On Upload - Similar to DNN core File Manager Upload, user can upload a ZIP file and choose to unzip on upload.
(feature added version 1.1.0)
-
Save Multiple Image Files & Image Thumbnails With Image Resizing Too!
The upload control allows you to specify the number of file copies that you wish to generate on upload AND to resize them to specific dimensions when creating the files on the server. These additional thumbnails/copies can have customized image file name prefixes and suffixes. You can also set whether to save the original file or not!
For example, use this to create one original image upload and also a thumbnail with a suffix of "_thumb" and size it to 50px x 50px. Use this to create 3 or more files from the original all at different sizes. You have complete control to specify the file name prefix, suffix, height, width and crop/shrink/zoom settings as well as a list of settings that are supported by the image resizer process.
(feature added version 1.0.8)
- Make Upload Required - Option available to use standard XMod Pro form validation to require a file upload for form submission. Validation message returns within standard core XMP validation messages.
(feature added version 1.0.8)
- One-Step AJAX Uploads This means no post-backs or page refresh for faster, easier, user-friendly uploads! If parameter UseAjax is True, The user clicks to "choose file" and then selects and the file automatically uploads. This removes the standard third step (which users sometimes miss) of needing to click the "upload" button to upload the selected file. An AJAX process starts upload as soon as the file is selected. Setting UseAjax to False performs in the traditional manner.
(feature added version 1.0.8)
- Upload In Progress - The form field "grays out" and displays a spinning icon to display to the user that an action is occurring and upload is in progress.
(feature added version 1.0.8)
- Image Preview On Upload - Display improved image preview for the selected image when user is uploading (form is in Edit view).
- Remove File Button - Option for a Remove Button which allows user to clear image/upload DataField database record and can delete the file from the server (if desired). No more stray/old files!
- Control File Size Limit - File Size Limit can be specified to enforce maximum upload file size (separate from DNN asp.net limit set in web.config and individual per form/instance you create)
- Custom Messages & Styling! - With control over messages/alerts & formatting control over classes & styles, and included style css examples the upload can be designed and styled completely.
- With parameter IfFileExists, choose Skip, Overwrite or Unique for file saving/renaming actions.
- Save File Path tag specifies whether to save simply the file name in the DataField or whether to save the full file path in the string data.
- Supports international language character support for file names and text values.
- Additional view types for initial display of the upload controls to the user include
- dropdown
- upload
- dual
drag & drop multiple files, completely customizable
multi file previews & removes
file select dropdown or upload
displays upload in progress
upload complete, thumbnail displayed, remove button ready!
Edit form view, field + thumbnail + remove
- XMod Pro Add-On
- Requires XMod Pro 3+
- Improved File Upload
- Enhanced Image Upload
- Upload File Size Restriction
- Image Previews
- Image Resize
- Image Thubmnails
- Remove Selection Button
- Enhanced XMod Pro Form
This Kit / Code works in XMod Pro
and is a collection of Forms, Templates and Feeds that together create a solution or module for DNN. This code will not work without XMod Pro 3+ installed in your DNN instance. If you do not already have a licensed copy of XMod Pro, go get one!
Get XMod Pro now from The DotNetNuke Store »
Notes & Instructions
Remember, we are continuing to update and enhance the control with new features from your requests and from our ongoing use of the control in client projects. Be sure to let us know your suggestions and requests!
To use this custom control within your XMod Pro forms, simply add the REGISTER tag to your form for the moorecreative xmodcontrols, then follow instructions for customization and options within the control.
The Module Kit installer will setup an XMod Pro form example using countries/states as a starter example for you to work from.
You have two options on how to install and begin using the module kit:
- Option 1. Install Manually
With the provided .ZIP file of contents, you will find the necessary XMod Pro custom control and example form code that you can copy and paste into new forms that you create within the XMod Pro Control Panel. Additionally, if there are associated images and JavaScript files you will find these in the .ZIP as well.
- Option 2. Use the Kit Module Installer
The kit module installer allows you to use the standard DotNetNuke module install process to install the XMod Pro forms and template files as well as create the example database table necessary.
- To use the kit installer, simply install it in the same manner as a standard module.
- Then, place the module on a page
- follow the instructions displayed on the module and click a button to complete installation
- the completion of the installation process will remove the temporary kit installer module from the page and your DNN instance
- you are now ready to specify the template, forms, etc within a module of XMod Pro like normal
Prerequisites & Requirements
This XMod Pro Custom Control requires the following run-time environment:
- XMod Pro 3+ - Compatible with all versions of XMP 3.0 and above
- DNN 6+ - Compatible with all versions of DotNetNuke 6.0 and above
- ASP.NET 3+ - Runs under any version of ASP.NET version 3 and above