Display Multiple Images from AsyncUploaded uploadedfiles.

13 posts, 2 answers
  1. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 17 Jan 2012 Link to this post

    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

  2. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 18 Jan 2012 Link to this post

    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
    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
  3. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 19 Jan 2012 Link to this post

    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.


  4. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 19 Jan 2012 Link to this post

    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
    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
  5. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 19 Jan 2012 Link to this post

    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
  6. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 20 Jan 2012 Link to this post

    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
    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
  7. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 22 Jan 2012 Link to this post

    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.

  8. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 22 Jan 2012 Link to this post

    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.

  9. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 23 Jan 2012 Link to this post

    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
    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
  10. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 23 Jan 2012 Link to this post

    That did the job.  Thanks you are a Champion.
  11. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 22 Feb 2012 Link to this post

    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

  12. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 23 Feb 2012 Link to this post

    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
    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. 
  13. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 23 Feb 2012 Link to this post

    Fixed.  Thanks.
Back to Top