Custom Control - Enhanced File Upload

About The Enhanced File Upload Custom Control For XMod Pro

Enhanced File / Image Upload Custom Control For XMod Pro

Version 1.0.8

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.

  • The Control is similar in structure to the core Upload control with added features/tags
  • Standard features such as the ability to specify upload directory, rename to unique/overwrite choice, enforce specific file extension types allowed
  • Additional view types for initial display of the upload controls to the user include
    1. dropdown
    2. upload
    3. dual
  • 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)
  • Better previews for chosen image when form is in Edit view
  • IfFileExists - choose Skip, Overwrite or Unique for file saving/renaming actions
  • Remove button when in Edit view allows user to clear image/upload DataField record without the need to upload/select a new image
  • Remove button can delete the file from the folder location to remove it from the record and the site, no more stray/old files!
  • 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.

  • New In Version 1.0.8 - Now works with standard XMod Pro form validation to require a file upload for form submission. Validation message returns with standard core XMP validation messages.
  • New In Version 1.0.8 - UseAjax True/False Upload Option - If 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
  • New In 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.
  • New In Version 1.0.8 - Several new style options and classes to allow the developer to have more control over messages and formatting of the upload control and messaging. This includes SuccessText for Upload, Remove and field Label
  • New In Version 1.0.8 - Multiple Image File Saves & Image Thumbnail Resizing

    The upload control now 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.
    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.
  • 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.

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

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


Basic Sample List - Click EDIT To See Demo Upload Form

Click the EDIT link in this basic list to see a simple demo form that is using the MooreCreative File Upload Custom Control. See more documentation and instructions for the custom file upload and image thumbnail control at the Moore Creative Module site

  ID Title Subtitle Image File
1 Phoenix, Arizona Arizona DNN Users Group Phoenix, Arizona - Arizona DNN Users Group
2 Charlotte, North Carolina Queen City DNN User Group Charlotte, North Carolina - Queen City DNN User Group
3 Chicago, Illinois Chicago Area DotNetNuke User Group Chicago, Illinois - Chicago Area DotNetNuke User Group

Add State Test

**Note If the upload directory does not exist in the DNN folder structure, it will create an error, please be sure to create the folder first before use.

Add a picture

Enter Information about the file

Select a file to upload