Basic File Upload

Basic AJAX File / Image Upload Custom Control For XMod Pro

Version 1.1.4

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.

This "light version" of the Moore Creative Upload Control is the earlier version of the Enhanced Upload Control. The newer version continues with additions and improvements, and relies on the newest in DNN versions and ASP.NET runtime environments. This version, however, works in older versions of DNN and XMP. It requires XMod Pro 3+ and works in DNN 5+ and under ASP.NET 3+.
  • 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.
  • 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 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
    1. dropdown
    2. upload
    3. dual

file select dropdown or upload

upload in progress

upload complete, thumbnail displayed, remove button ready!

Edit form view, field + thumbnail + remove

  This Kit & Code Are Made For XMod Pro

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 5+ - Compatible with all versions of DotNetNuke 5.0 and above
  • ASP.NET 3+ - Runs under any version of ASP.NET version 3 and above



Read The Blog!

Ideas, tips and information on what we're developing for XMod Pro!

Moore Creative's XMod Pro Blog »

Modules On Snowcovered

See all of the modules on, several are free DNN modules!

Custom DNN Development

Let us build custom DNN solutions for you! l

Need Support?

Want to see a demo? Need help setting up a module or XMod Pro custom control?
Contact Us