Display Multiple Images from AsyncUploaded uploadedfiles.

[Glenn]

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

[Bozhidar]

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:

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)));
}

 - Remove the fileUploadRemoving javascript function, as it is not needed anymore.
 
Regards,
Bozhidar
the Telerik team

[Glenn]

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.

[Bozhidar]

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

[Glenn]

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

[Bozhidar]

Hi Glenn,

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

[Glenn]

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.

[Glenn]

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.

[Bozhidar]

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:

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

[Glenn]

That did the job.  Thanks you are a Champion.

[Glenn]

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

[Bozhidar]

Hello Glenn,

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

[Glenn]

Fixed.  Thanks.