Iron Speed Technical Forums
Register Latest Topics
 
 
 


Reply
  Author   Comment  
Hansioli

Registered:
Posts: 9
Reply with quote  #1 

The newest Ajax Control Toolkit has an ajaxfileupload control with drag n drop capability for Chrome and Firefox browsers.  There is fallback for Safari and IE as well.  The control is new and the feature set still needs some work but the user interface is great!.  I'm kind of a hack and I'm sure someone out there would do a much better job documenting the use of this control, but here it goes.

 

First, get the binaries from codeplex for the newest ajax control toolkit and add to your bin and references to the project.  From VS 2010 (2008 Framework 3.5 may work too), drop the ajaxfileupload control to your aspx page in VS 2010.  Then copy and paste the control from the aspx into a cell in ISD.  Add an image control as the throbber (this is for fallback with IE and Safari).  Cell editor window in ISD should look something like this.

Code:

ThrobberID="MyThrobber"
Padding-Bottom="4px"
Padding-Left="2px"
Padding-Right="2px"
Padding-Top="4px"
AllowedFileTypes="pdf,tif,tiff,jpg,jpeg,gif,png,doc,docx"
MaximumNumberOfFiles="1"
Width="400px"
OnUploadComplete="ajaxUpload1_OnUploadComplete" />

 

Next, at the page level, you need to add the control to the page.

Code:
 Public WithEvents ajaxUpload1 As AjaxFileUpload

 

Also at the page level you need to add the OnUploadComplete Event for the AjaxFileUpload control.  Because I want to take the uploaded file and add it to the record in the database, I'm using session variables to store the filename and byte array off of the page.  I will grab this data from the session variables in a minute.  My event code looks like this:

Code:
Protected Sub ajaxUpload1_OnUploadComplete(sender As Object, e As AjaxControlToolkit.AjaxFileUploadEventArgs)

If e.StatusMessage = "Success" And HttpContext.Current.Session("ajaxFileID") Is Nothing Then
HttpContext.Current.Session("ajaxFileID") = e.FileId
HttpContext.Current.Session("ajaxFileName") = Convert.ToString(Right(e.FileName, Len(e.FileName) - InStrRev(e.FileName, "\")))
HttpContext.Current.Session("ajaxContentType") = e.ContentType
HttpContext.Current.Session("ajaxFileContents") = e.GetContents
ElseIf e.StatusMessage = "Failure" Then
MsgBox("There was a problem uploading the file", MsgBoxStyle.Exclamation)
ElseIf Not IsNothing(HttpContext.Current.Session("ajaxFileID")) Then
MsgBox("You may only upload one file at a time. Only first file will be uploaded", MsgBoxStyle.Exclamation)
Else
MsgBox("Unspecified Error", MsgBoxStyle.Exclamation)
End If
End Sub

 

ISD normally would have a fileupload control tied to the filestream or varbinary field you would store your file/image with and there would be an associated get for the field.  In this implementation, I overrode the save method to get the byte array and file name from the session variables.  This save method is triggered with the normal ISD save button on the page.  My save method looks like this:

 

Code:
Public Overrides Sub SaveData()

' Saves the associated record in the database.
' 1. Load the existing record from the database. Since we save the entire record, this ensures
' that fields that are not displayed are also properly initialized.
Me.LoadData()
' 2. Perform any custom validation.
Me.Validate()
' 3. Set the values in the record with data from UI controls.
' This calls the Get() method for each of the user interface controls.
Me.GetUIData()
' Get value of ajaxfileupload to store in documentimage and documentname
If Not IsNothing(HttpContext.Current.Session("ajaxFileContents")) AndAlso Not IsNothing(HttpContext.Current.Session("ajaxFileID")) Then
' Retrieve the file contents and store them in DocumentImage field.
Me.DataSource.DocumentImage = CType(HttpContext.Current.Session("ajaxFileContents"), Byte())
Dim path As String = Me.EntityID.SelectedValue + CStr(HttpContext.Current.Session("ajaxFileName"))
Dim LastIndex As Integer = path.LastIndexOf("\")
Me.DataSource.DocumentName = path.Substring(LastIndex + 1).Replace("'", "_")
Else
MsgBox("No File Uploaded. Error on Save", MsgBoxStyle.Exclamation)
End If
If Me.DataSource.IsAnyValueChanged And Not IsNothing(HttpContext.Current.Session("ajaxFileID")) Then
' Save record to database but do not commit yet.
' Auto generated ids are available after saving for use by child (dependent) records.
Me.DataSource.Save()
End If
' update session or cookie by formula
HttpContext.Current.Session("ajaxFileID") = Nothing
HttpContext.Current.Session("ajaxContentType") = Nothing
HttpContext.Current.Session("ajaxFileName") = Nothing
HttpContext.Current.Session("ajaxFileContents") = Nothing
' Setting the DataChanged to True results in the page being refreshed with
' the most recent data from the database. This happens in PreRender event
' based on the current sort, search and filter criteria.
Me.DataChanged = True
Me.ResetData = True
' For Master-Detail relationships, save data on the Detail table(s)
End Sub

 

I really liked the look of the new Zinfandel theme so I added a stylesheet to match the Zinfandel theme for the ajaxfileupload control.  To add the stylesheet, just add it to the page directive.

Code:

 

The stylesheet for the control looks like this:

Code:
.ajax__fileupload {

background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
box-shadow: inset 0px 1px 2px #dddddd;
padding: 4px;
overflow: auto;
}
.ajax__fileupload_selectFileContainer {
display: inline-block;
overflow: hidden;
position: relative;
width: 100px;
float: left;
height: 28px;
padding: 3px 3px 3px 3px;
line-height: 20px;
}
.ajax__fileupload_selectFileContainer > input[type=file] {
border: medium none;
cursor: pointer;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.ajax__fileupload_selectFileButton {
-moz-border-radius: 3px;
-moz-box-shadow: inset 0px -1px 0px 0px #ffffff;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0px -1px 0px 0px #ffffff;
background: -moz-linear-gradient( center top, #fbfbfb 5%, #ececec 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fbfbfb), color-stop(1, #ececec) );
box-shadow: inset 0px -1px 0px #ffffff;
border: 1px solid #d1d1d1;
border-radius: 3px;
display: inline-block;
filter: progidXImageTransform.Microsoft.Gradient(startColorStr='#fbfbfb', endColorStr='#ececec');
font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 11px;
font-weight: bold;
padding: 3px 3px 3px 3px;
text-decoration: none;
color: #5e829b;
text-shadow: 1px 1px 0px #ffffff;
white-space: nowrap;
height: 20px;
}
.ajax__fileupload_selectFileButton:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ececec), color-stop(1, #fbfbfb) );
background: -moz-linear-gradient( center top, #ececec 5%, #fbfbfb 100% );
background-color: #ececec;
color: #5e829b;
filter: progidXImageTransform.Microsoft.Gradient(startColorStr='#ececec', endColorStr='#fbfbfb');
white-space: nowrap;
}
.ajax__fileupload_topFileStatus {
color: rgb(127, 126, 126);
}
.ajax__fileupload_uploadbutton {
-moz-border-radius: 3px;
-moz-box-shadow: inset 0px -1px 0px 0px #ffffff;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0px -1px 0px 0px #ffffff;
background: -moz-linear-gradient( center top, #fbfbfb 5%, #ececec 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fbfbfb), color-stop(1, #ececec) );
box-shadow: inset 0px -1px 0px #ffffff;
border: 1px solid #d1d1d1;
border-radius: 3px;
display: inline-block;
filter: progidXImageTransform.Microsoft.Gradient(startColorStr='#fbfbfb', endColorStr='#ececec');
font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 10px;
font-weight: bold;
padding: 1px;
text-decoration: none;
color: #5e829b;
text-shadow: 1px 1px 0px #ffffff;
white-space: nowrap;
}
.ajax_fileupload_cancelbutton {
-moz-border-radius: 3px;
-moz-box-shadow: inset 0px -1px 0px 0px #ffffff;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0px -1px 0px 0px #ffffff;
background: -moz-linear-gradient( center top, #fbfbfb 5%, #ececec 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fbfbfb), color-stop(1, #ececec) );
box-shadow: inset 0px -1px 0px #ffffff;
border: 1px solid #d1d1d1;
border-radius: 3px;
display: inline-block;
filter: progidXImageTransform.Microsoft.Gradient(startColorStr='#fbfbfb', endColorStr='#ececec');
font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 11px;
font-weight: bold;
padding: 3px 3px 3px 3px;
text-decoration: none;
color: #990033;
text-shadow: 1px 1px 0px #ffffff;
white-space: nowrap;
}
.ajax__fileupload_dropzone {
background-color: #eeeeee;
background: -moz-linear-gradient( center top, #fbfbfb 40%, #eeeeee 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.4, #fbfbfb), color-stop(1, #eeeeee) );
border-style: dotted;
border-width: 1px;
border-radius: 4px;
line-height: 100px;
text-align:center;
margin-bottom:2px;
font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 13px;
color: #990033;
}
.ajax__fileupload_queueContainer
{
border: #A9A9A9 1px solid;
border-width: 1px;
margin-top:2px;
padding:4px;
clear: both;
}
.ajax__fileupload_progressBar {
padding-left:4px;
background-color: #CCFFCC;
}
.ajax__fileupload_footer {
margin-top: 2px;
line-height: 20px;
height: 24px;
width: 384px;
padding: 3px 3px 3px 3px;
}
.ajax__fileupload_fileItemInfo {
line-height: 18px;
height: 24px;
vertical-align: center;
overflow: hidden;
}
.ajax__fileupload_fileItemInfo .filename {
font-weight: bold;
}
.ajax__fileupload_fileItemInfo .uploadstatus {
font-style: italic;
}
.ajax__fileupload_fileItemInfo .removeButton {
cursor: pointer;
width: 55px;
line-height: 16px;
-moz-border-radius: 3px;
-moz-box-shadow: inset 0px -1px 0px 0px #ffffff;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0px -1px 0px 0px #ffffff;
background: -moz-linear-gradient( center top, #fbfbfb 5%, #ececec 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fbfbfb), color-stop(1, #ececec) );
box-shadow: inset 0px -1px 0px #ffffff;
border: 1px solid #d1d1d1;
border-radius: 3px;
display: inline-block;
filter: progidXImageTransform.Microsoft.Gradient(startColorStr='#fbfbfb', endColorStr='#ececec');
font-family: Arial, Verdana, Georgia, sans-serif;
font-size: 11px;
font-weight: bold;
padding: 2px 3px 0px 3px;
text-decoration: none;
color: #900;
text-shadow: 1px 1px 0px #ffffff;
white-space: nowrap;
}
.ajax__fileupload_fileItemInfo .uploadedState {
color: #060;
background-color: #fff;
}
.ajax__fileupload_fileItemInfo .uploadingState {
color: #FF9900;
background-color: #fff;
}
.ajax__fileupload_fileItemInfo .pendingState {
color: #009;
background-color: #fff;
}
.ajax__fileupload_fileItemInfo .errorState {
color: #ffffff;
background-color: #ff0000;
}
.ajax__fileupload_fileItemInfo .cancelledState {
color: #900;
background-color: #fff;
}

 

I really like the UI for the new ajaxfileupload control and I'm sure someone with more knowledge than me can do a more complete job of documenting its use.  I have used so many great things from so many people who have contributed to this forum over the last six years and wanted to share what I think is a really cool control that is easily implemented in ISD.  Thanks again, and enjoy!

Attached Images
Click image for larger version - Name: SelectFile.png, Views: 290, Size: 152.07 KB  Click image for larger version - Name: ReadyToUploadFile.png, Views: 269, Size: 58.21 KB  Click image for larger version - Name: FileUploaded.png, Views: 236, Size: 65.05 KB  Click image for larger version - Name: DragNDrop.png, Views: 221, Size: 56.82 KB  Click image for larger version - Name: MultiFileWDragNDropFirefox.png, Views: 254, Size: 55.52 KB 

__________________
The oxen are slow but the earth is patient.

miles

Avatar / Picture

MVP Consultant
Registered:
Posts: 1,655
Reply with quote  #2 

Thanks for sharing, I am sure we will check it out!


__________________
Miles Gibson, MScIS
Iron Speed MVP
Senior Consultant, Principal
Milestone Software Inc.

http://www.ironspeedmvp.com\localizer 
Email: miles@milestone.ca
Milestone Localizer: Full Localization for your Iron Speed applications!
culater

Registered:
Posts: 4
Reply with quote  #3 
Thanks for sharing!
From the image attachments,I can see that
this new upload control support multiple file uploads...

how to handle multiple file uploads in ISD?
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Download Iron Speed Designer

Terms of Service Privacy Statement