Is it possible to allow end user to upload multiple images using AsyncUploaded to the temporyfolder and display those temporary file images via RadBinaryImage (IE in a repeater or listview etc) allowing user to preview those images before submitting the images to the filesystem or database.
Note that the end user might upload one image at a time or mutiple images at once to the form and even remove images before finally hitting the submit button to move the previewed uploaded files from the temporary location to the filesystem or database.
If so how and is there an example somewhere?
Thanks
12 Answers, 1 is accepted
0
Hi Glenn,
You can use the following demo as a reference:
http://demos.telerik.com/aspnet-ajax/upload/examples/async/imageuploader/defaultcs.aspx?product=asyncupload.
To make it show all the uploaded pictures, instead of just the last one, modify the fileUploaded javascript function, so that it looks like this:
If you want to show the images as thumbnails next to the file names, instead of them being placed inside one container, you just have to make the following modifications to the example:
- Modify the fileUploaded function in the following way:
- Remove the fileUploadRemoving javascript function, as it is not needed anymore.
Regards,
Bozhidar
the Telerik team
You can use the following demo as a reference:
http://demos.telerik.com/aspnet-ajax/upload/examples/async/imageuploader/defaultcs.aspx?product=asyncupload.
To make it show all the uploaded pictures, instead of just the last one, modify the fileUploaded javascript function, so that it looks like this:
function
fileUploaded(sender, args) {
var
id = args.get_fileInfo().ImageID;
$(
".imageContainer"
)
.append($(
"<img />"
).attr(
"src"
, getImageUrl(id)));
}
If you want to show the images as thumbnails next to the file names, instead of them being placed inside one container, you just have to make the following modifications to the example:
- Modify the fileUploaded function in the following way:
function
fileUploaded(sender, args) {
var
$row = $telerik.$(args.get_row());
var
id = args.get_fileInfo().ImageID;
$row.append($telerik.$(
"</br><img height='70px' width='100px' />"
)
.attr(
"src"
, getImageUrl(id)));
}
Regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Glenn
Top achievements
Rank 1
answered on 19 Jan 2012, 11:06 AM
Thanks I got that to work, but I was hoping there was a way to display the images before having to commit the image data to the database, similiar to how the single image is displayed in this example from the e.File.InputStream but instead with multiple images displayed http://demos.telerik.com/aspnet-ajax/upload/examples/async/ajaxprocessing/defaultvb.aspx?product=asyncupload. Presuming that there is no need to clean up unused data on the database if the user cancels/leaves form.
To explain further with example: User opens a new input page to enter a listing and enter various textfields and also selects several images by Asyncupload. Images are previewed as selected. When form saved the listing is saved to database and images are saved to a related database with a related listingID (or filesystem with reference from database).
Instead of saving the user may have chosen to leave the page before saving and as such the uploaded images are discarded.
To explain further with example: User opens a new input page to enter a listing and enter various textfields and also selects several images by Asyncupload. Images are previewed as selected. When form saved the listing is saved to database and images are saved to a related database with a related listingID (or filesystem with reference from database).
Instead of saving the user may have chosen to leave the page before saving and as such the uploaded images are discarded.
0
Hi Glenn,
In the example I've described, the AsyncUpload does exactly that. The file is first saved to a temporary folder with the handler. Then when a postback occurs, the file is transferred to the TargetFolder. If you want to save it to a database, you just have to remove the TargetFolder property of the AsyncUpload, and add a handler for the FileUploaded server event, which fires for every uploaded file upon postback. In this event you can take the file and save it in your database.
Don't confuse the file being saved to the temporary folder by the handler, with the actual saving of the file. When you don't use a custom handler, RadAsyncUpload does the same thing internally - first it saves the file to a Temporary folder, and then on postback it takes it from there.
All the best,
Bozhidar
the Telerik team
In the example I've described, the AsyncUpload does exactly that. The file is first saved to a temporary folder with the handler. Then when a postback occurs, the file is transferred to the TargetFolder. If you want to save it to a database, you just have to remove the TargetFolder property of the AsyncUpload, and add a handler for the FileUploaded server event, which fires for every uploaded file upon postback. In this event you can take the file and save it in your database.
Don't confuse the file being saved to the temporary folder by the handler, with the actual saving of the file. When you don't use a custom handler, RadAsyncUpload does the same thing internally - first it saves the file to a Temporary folder, and then on postback it takes it from there.
All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Glenn
Top achievements
Rank 1
answered on 19 Jan 2012, 11:22 PM
OK So how do I display the images given that the example uses the StreamImage Handler to stream the images from SQL for display after the Handler saved the images to SQL in the InsertImage Function?
So the images are first stored in the Temorary Folder of RadAsyncupload, how to I grab those files for display? (Which is back to my original question)
Sorry for my poor understanding.
Thanks
So the images are first stored in the Temorary Folder of RadAsyncupload, how to I grab those files for display? (Which is back to my original question)
Sorry for my poor understanding.
Thanks
0
Hi Glenn,
Bozhidar
the Telerik team
I've prepared a sample project, which implements the described functionality, Please preview it and tell me if it suits your needs.
Kind regards,Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Glenn
Top achievements
Rank 1
answered on 22 Jan 2012, 10:34 AM
Thanks for your trouble, that works very well, at least using Firefox. IE9 will not upload the images to the Temporary Folder. Trying to work out whether it relates to my setup, but if you have any hints to what it might be I would be very thankful.
0
Glenn
Top achievements
Rank 1
answered on 23 Jan 2012, 04:23 AM
No sorry using your example solution it doesn't display the image when using IE9. When debugging I get FileNotFoundException at this point of the GetImage function: FileStream fs = new FileStream(filePath, FileMode.Open, FileAccess.Read);
Works though in Firefox.
0
Accepted
Hello Glenn,
I failed to test the previous solution in IE. It does stop working there. However, there's a simple fix that solves that problem. Just modify the Process method of the CustomHandler, so that it calls the SaveToTempFolder method:
Regards,
Bozhidar
the Telerik team
I failed to test the previous solution in IE. It does stop working there. However, there's a simple fix that solves that problem. Just modify the Process method of the CustomHandler, so that it calls the SaveToTempFolder method:
protected
override
IAsyncUploadResult Process(UploadedFile file, HttpContext context,
IAsyncUploadConfiguration configuration,
string
tempFileName)
{
SampleAsyncUploadResult result = CreateDefaultUploadResult<SampleAsyncUploadResult>(file);
result.TempFileLocation = FullPath;
SaveToTempFolder(file, configuration, context, tempFileName);
return
result;
}
Regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Glenn
Top achievements
Rank 1
answered on 23 Jan 2012, 10:56 PM
That did the job. Thanks you are a Champion.
0
Glenn
Top achievements
Rank 1
answered on 23 Feb 2012, 12:23 AM
Just one more small issue to fix. It appears the following function only removes the last image in the imagecontainer and not the image that corresponds with the file that is removed:-
function fileUploadRemoving(sender, args) {
var index = args.get_rowIndex();
$(".imageContainer img:eq(" + index + ")").remove();
}
Note I am displaying multiple image in the container as they are uploaded by removing ".empty()" from the function fileUploaded in this demo: http://demos.telerik.com/aspnet-ajax/upload/examples/async/imageuploader/defaultcs.aspx?product=asyncupload
Can you help with how to fix this.
Thanks
function fileUploadRemoving(sender, args) {
var index = args.get_rowIndex();
$(".imageContainer img:eq(" + index + ")").remove();
}
Note I am displaying multiple image in the container as they are uploaded by removing ".empty()" from the function fileUploaded in this demo: http://demos.telerik.com/aspnet-ajax/upload/examples/async/imageuploader/defaultcs.aspx?product=asyncupload
Can you help with how to fix this.
Thanks
0
Accepted
Hello Glenn,
Are you using the following property of RadAsyncUpload:
If you have set this property to BelowFileInput, and you use append as (opposed to prepend) to add the images, than the indexes of the uploaded pictures in the container are inverted from the indexes in the upload. Go correct this, here's how your fileUploadRemoving function should look like:
Another solution is to use prepend when you add the image tags in fileUploaded, and then set the fileUploadRemoving like so:
Or there's a third way you can accomplish this - set the UploadedFilesRendering property to AboveFileInput.
Greetings,
Bozhidar
the Telerik team
Are you using the following property of RadAsyncUpload:
UploadedFilesRendering="BelowFileInput"
If you have set this property to BelowFileInput, and you use append as (opposed to prepend) to add the images, than the indexes of the uploaded pictures in the container are inverted from the indexes in the upload. Go correct this, here's how your fileUploadRemoving function should look like:
function
fileUploadRemoving(sender, args) {
var
index = args.get_rowIndex();
var
totalCount = $telerik.$(
".imageContainer img"
).size();
index = totalCount - index;
$telerik.$(
".imageContainer img:eq("
+ index +
")"
).remove();
}
Another solution is to use prepend when you add the image tags in fileUploaded, and then set the fileUploadRemoving like so:
function
fileUploadRemoving(sender, args) {
var
index = args.get_rowIndex() - 1;
$telerik.$(
".imageContainer img:eq("
+ index +
")"
).remove();
}
Or there's a third way you can accomplish this - set the UploadedFilesRendering property to AboveFileInput.
Greetings,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Glenn
Top achievements
Rank 1
answered on 23 Feb 2012, 11:36 PM
Fixed. Thanks.