Basic Upload Control Examples

Example 1 - One Original

No ResizeVersions string is passed

Uploads original file

<mc:XModUploadControl           
    Id = "File"
    DataField = "File"
    UploadDirectory='[[Join("~/Portals/{0}/images/", [[Portal:ID]])]]'
    SaveFilePath="False"
    FilesizeLimit="2100000"  
    Extensions="*"
    IfFileExists="unique"
    View = "upload"
    ResizeEnabled="false"
    ResizeVersions = ""
    UseAjax = "true"                                
    RemoveAction="delete"
    UploadLabelMessage = "Upload a file"
    UploadSuccessText = "File Uploaded!!!!"
    RemoveSuccessText = "Its gone!"
/>

Original (Original.jpg)


Example 2 - One Original + one small thumbnail

ResizeVersions String - ?prepend=&append=_thumb_sm=&height=100&width=100&crop=auto

Uploads the original file and creates 1 small thumbnail. The thumbnail will be sized 100x100 and be named [filename]_thumb_sm.[ext]

<mc:XModUploadControl           
    Id = "File"
    DataField = "File"
    UploadDirectory='[[Join("~/Portals/{0}/images/", [[Portal:ID]])]]'
    SaveFilePath="False"
    FilesizeLimit="2100000"  
    Extensions="*"
    IfFileExists="unique"
    View = "upload"
    ResizeEnabled="true"
    ResizeVersions = "?prepend=&append=_thumb_sm=&height=100&width=100&crop=auto"
    UseAjax = "true"                                
    RemoveAction="delete"
    UploadLabelMessage = "Upload a file"
    UploadSuccessText = "File Uploaded!!!!"
    RemoveSuccessText = "Its gone!"
/>

Original (Original.jpg)

Small Thumbnail (Original_thumb_sm.jpg)


Example 3 - One Original + two thumbnails

ResizeVersions String - ?prepend=thumb_sm_&append=&height=100&width=100&crop=auto?prepend=thumb_md_&append=&height=200&width=200&crop=auto

Uploads the original file and creates 2 thumbnails. The small thumbnail will be sized 100x100 and be named thumb_sm_[filename].[ext]. The medium thumbnail will be sized 200x200 and be named thumb_md_[filename].[ext].

<mc:XModUploadControl           
    Id = "File"
    DataField = "File"
    UploadDirectory='[[Join("~/Portals/{0}/images/", [[Portal:ID]])]]'
    SaveFilePath="False"
    FilesizeLimit="2100000"  
    Extensions="*"
    IfFileExists="unique"
    View = "upload"
    ResizeEnabled="true"
    ResizeVersions = "?prepend=thumb_sm_&append=&height=100&width=100&crop=auto?prepend=thumb_md_&append=&height=200&width=200&crop=auto"
    UseAjax = "true"                                
    RemoveAction="delete"
    UploadLabelMessage = "Upload a file"
    UploadSuccessText = "File Uploaded!!!!"
    RemoveSuccessText = "Its gone!"
/>

Original (Original.jpg)

Medium Thumbnail (thumb_md_Original.jpg)

Small Thumbnail (thumb_sm_Original.jpg)


Example 4 - One Original + one cropped

ResizeVersions String - ?prepend=&append=_cropped&crop=(0,0,200,150)

Uploads the original file and creates 1 small cropped version. The cropped version 200x150 [filename]_cropped.[ext]

<mc:XModUploadControl           
    Id = "File"
    DataField = "File"
    UploadDirectory='[[Join("~/Portals/{0}/images/", [[Portal:ID]])]]'
    SaveFilePath="False"
    FilesizeLimit="2100000"  
    Extensions="*"
    IfFileExists="unique"
    View = "upload"
    ResizeEnabled="true"
    ResizeVersions = "?prepend=&append=_cropped&crop=(0,0,200,150)"
    UseAjax = "true"                                
    RemoveAction="delete"
    UploadLabelMessage = "Upload a file"
    UploadSuccessText = "File Uploaded!!!!"
    RemoveSuccessText = "Its gone!"
/>

Original (Original.jpg)

Cropped (Original_cropped.jpg)


Example 5 - One Original + 3px Black Border version

ResizeVersions String - ?prepend=black_bordered_&append=&borderWidth=3&borderColor=black

Uploads the original file and creates 1 bordered version. The bordered version will have the same dimensions as original image will have a 3px black border. The bordered version filename will be black_bordered_[filename].[ext]

<mc:XModUploadControl           
    Id = "File"
    DataField = "File"
    UploadDirectory='[[Join("~/Portals/{0}/images/", [[Portal:ID]])]]'
    SaveFilePath="False"
    FilesizeLimit="2100000"  
    Extensions="*"
    IfFileExists="unique"
    View = "upload"
    ResizeEnabled="true"
    ResizeVersions = "?prepend=black_bordered_&append=&borderWidth=3&borderColor=black"
    UseAjax = "true"                                
    RemoveAction="delete"
    UploadLabelMessage = "Upload a file"
    UploadSuccessText = "File Uploaded!!!!"
    RemoveSuccessText = "Its gone!"
/>

Original (Original.jpg)

Bordered (black_bordered_Original.jpg)


Example 6 - One Original + 10px white border version

ResizeVersions String - ?prepend=white_bordered_&append=&borderWidth=10&borderColor=white

Uploads the original file and creates 1 bordered version. The bordered version will have the same dimensions as original image will have a 10px white border. The bordered version filename will be white_bordered_[filename].[ext]

<mc:XModUploadControl           
    Id = "File"
    DataField = "File"
    UploadDirectory='[[Join("~/Portals/{0}/images/", [[Portal:ID]])]]'
    SaveFilePath="False"
    FilesizeLimit="2100000"  
    Extensions="*"
    IfFileExists="unique"
    View = "upload"
    ResizeEnabled="true"
    ResizeVersions = "?prepend=white_bordered_&append=&borderWidth=10&borderColor=white"
    UseAjax = "true"                                
    RemoveAction="delete"
    UploadLabelMessage = "Upload a file"
    UploadSuccessText = "File Uploaded!!!!"
    RemoveSuccessText = "Its gone!"
/>

Original (Original.jpg)

Bordered (white_bordered_Original.jpg)


Example 7 - One Original + Zoomed version

ResizeVersions String - ?prepend=&append=_zoomed&zoom=2&scale=both

Uploads the original file and creates 1 zoomed version. The zoomed version will have dimensions twice as big as the original image. The zoomeded version filename will be [filename]_zoomed.[ext]

<mc:XModUploadControl           
    Id = "File"
    DataField = "File"
    UploadDirectory='[[Join("~/Portals/{0}/images/", [[Portal:ID]])]]'
    SaveFilePath="False"
    FilesizeLimit="2100000"  
    Extensions="*"
    IfFileExists="unique"
    View = "upload"
    ResizeEnabled="true"
    ResizeVersions = "?prepend=&append=_zoomed&zoom=2&scale=both"
    UseAjax = "true"                                
    RemoveAction="delete"
    UploadLabelMessage = "Upload a file"
    UploadSuccessText = "File Uploaded!!!!"
    RemoveSuccessText = "Its gone!"
/>

Original (Original.jpg)

Zoomed (Original_zoomed.jpg)

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 store.DotNetNuke.com, 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