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.

• 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 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
  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 works in XMod Pro

Notes & Instructions