Hi,

I can't seem to find an example of code required to achieve the following fairly basic steps so it would be great if you could give me a hand...

A user is presented with a form on our site with 3 fields: Name, Description, Ajax SlickUpload control (limited to allowing one file only).

When the user adds an image to the SlickUpload control:

1 - The file is validated to be either JPG or PNG (error message returned if neither)

2 - The file is saved to a folder as a GUID

3 - The file is uploaded and then resized to 300 x 300 if required.

4 - A second thumbnail of 150 x 150 is created from the original file.

5 - The thumbnail image is displayed on the form beside the upload control (and also a record of the created images will be stored somewhere so that once the form is submitted, file paths can be added to the database)

 

Steps 1 and 2 seem to be covered in the sample code, but I can't find any code on how to "catch" the uploaded image and resize to make 2 thumbnails.

My company are very interested in purchasing a licence if we find it works as we require so any assistance would be very appreciated!

 

Many thanks,

Peter

Hi Chris,

A few more issues. Unfortunately as I'm working under GMT I imagine I won't get a response to these until tomorrow (my time), although I'm here for another few hours :)

As mentioned in the first post, I want to limit the uploadable files to "PNG" and "JPEG/JPG".

I call the following javascript from the "OnClientFileAdded":

function onFileSelectionChanged(file) {
var slickUpload = kw("<%=slickUpload.ClientID %>");

document.getElementById("uploadButton").className = "button" + (slickUpload.get_Files().length > 0 ? "" : " disabled");

if (slickUpload.get_Files().length > 0) {

var myreg = /^([jJ][pP][gG]|[jJ][pP][eE][gG]|[pP][nN][gG])$/

if (!myreg.test(file.extension)) {

alert("Invalid file format. Only JPEG and PNG image files are allowed.");
slickUpload.remove_File(file.get_Id());
}
}
}

It seems to be failing on the "file.get_Id()" call saying that "Object doesn't support this property of method".


Incidentally, I'm using AJAX 1.0.61025 as our project is ASP.NET 2.0.

Is this an issue? Does SlickUpload require a later AJAX library?

Right now, I have a sample that pulls together everything except the actual display of the thumbnail. The validation, thumbnail generation, etc. are in place, but I've run into a snag -- the current SlickUpload version doesn't have support for passing information about a file back to the client, so there is no way to notify the page about which thumbnail url to use. *blush*

Can you give us a couple of days? This is a feature we have on the todo list for SlickUpload, we'll just bump it up to the front of the line -- we should have something for you by Friday, or Monday at the latest.

Here's the Thumbnail sample: http://krystalware.com/files/ThumbnailSample.zip. We'll be adding this across all of our supported environments eventually, but wanted to get it into your hands ASAP.

The functionality for this is in two places. On the server side, the actual thumbnailing occurs in the ThumbnailFileUploadStreamProvider. We used a dead simple implementation, which doesn't have logic to handle all of the edge cases -- feel free to swap in whatever you want to use.

The CloseWriteStream method gets called when a file has been uploaded. isComplete will be true if the file was completed or false if there was an error or disconnection. On completion, we open the file that was uploaded, thumbnail it, and save the thumbnail. We also dump the thumbUrl into the file.Data dictionary, so that information will be available client side.

The RemoveOutput method will be called if a file errors or is cancelled or removed. We override that too, to remove the thumbnail image.

Client side, we handle the onFileUploadEnded method. This gives us access to the file information, including the stuff we stuck into the file.Data dictionary. We pull out the thumbUrl and use it for the thumbnail <img />.

The theme is a bit rough, so feel free to tweak the template as you like to fit your site.

Let me know if you have any questions.

Hi Chris,

The Krystalware.SlickUpload.dll in the zip above doesn't seem to have CloseWriteStream() in the FileUploadStreamProvider class.

Could you repost when you get a chance please?

Thanks!
Peter

Ahh. I'll get you a .NET 2.0 build tomorrow.

I apologize for the delay -- our forum post notifications appear to have flaked yesterday.

Hi Chris .. just looked there. The object browser still doesn't show the CloseWriteStream() function... would you mind checking the .net2 version please?
Thanks!

That was it, thanks .. will give it a thorough test today and let you know if any issues come up.

Hi Chris,

I've encountered an issue where I try to throw an Exception in the CloseWriteStream() function ...

If a file isn't an image, or there are issues resizing the files etc, I want to be able to throw an exception and output the error message by using the "status.errorMessage" javascript object.

My code for CloseWriteStream() is as follows...

Public Overrides Sub CloseWriteStream(ByVal file As UploadedFile, ByVal stream As Stream, ByVal bIsComplete As Boolean)

MyBase.CloseWriteStream(file, stream, bIsComplete)

'If file uploaded successfully...
If bIsComplete Then

'Declare variables
Dim objPhoto As New Photo
Dim sFolderPath As String = file.ServerLocation.Replace(System.IO.Path.GetFileName(file.ServerLocation), "")
Dim sFileExtension As String = System.IO.Path.GetExtension(file.ClientName) 'Get file extension of original image
Dim sFileName As String = System.IO.Path.GetFileNameWithoutExtension(file.ServerLocation) 'Get filename (without extension) of image stored on server
Dim sFileName_Thumb As String = String.Format("{0}_t", sFileName)
Dim sFileSrc As String = String.Format("{0}{1}", sFileName, sFileExtension)

'Throw an exception if file extension is invalid
If sFileExtension = "" Then Throw New Exception(String.Format("File name '{0}' is invalid. All files must have a valid extension. (e.g. '.jpg')", file.ClientName))

'Throw an exception if the file type is invalid
Select Case LCase(sFileExtension)
Case ".jpg", ".png", ".jpeg"
'do nothing as file is valid
Case Else
'Delete original file
FileUtil.Delete(file.ServerLocation)
Throw New Exception("File type is invalid. Valid file types include: jpg and png only")
End Select

'Rename file to add file extension if required
Try
FileUtil.Rename(file.ServerLocation, sFolderPath & sFileSrc)
Catch ex As Exception
'Delete original file
FileUtil.Delete(file.ServerLocation)
Throw New Exception(String.Format("Problem storing source image: {0}", ex.Message))
End Try

'Resize file if required
Try
objPhoto.ResizeImage(sFolderPath & sFileSrc, sFolderPath & sFileSrc, 350, 350, 85&, False)
Catch ex As Exception
'Delete original file
FileUtil.Delete(sFolderPath & sFileSrc)
Throw New Exception(String.Format("Problem resizing source image: {0}", ex.Message))
End Try

'Create thumbnail
Try
objPhoto.ResizeImage(sFolderPath & sFileSrc, String.Format("{0}{1}{2}", sFolderPath, sFileName_Thumb, sFileExtension), 80, 80, 75&, False)
Catch ex As Exception
'Delete original file and thumbnail file if there was an error saving thumbnail
FileUtil.Delete(sFolderPath & sFileSrc)
FileUtil.Delete(String.Format("{0}{1}{2}", sFolderPath, sFileName_Thumb, sFileExtension))
Throw New Exception(String.Format("Problem creating thumbnail: {0}", ex.Message))
End Try

'Pass file data back to SlickUpload
file.Data("imageFile") = sFileSrc
file.Data("thumbFile") = String.Format("{0}{1}", sFileName_Thumb, sFileExtension)
End If
End Sub


The odd thing is .. this works perfectly fine when I am in Debug mode, but doesn't work when running the site in standard mode. If I upload an invalid file in standard mode, the upload progress bar just remains static on screen at 0%.

Do you know are there any issues with throwing exceptions in CloseWriteStream() ? Or is there a better way to handle these errors in the function?

Thanks again