Creating Preview with RadUpload

Thread is closed for posting
9 posts, 0 answers
  1. James Bridgeford
    James Bridgeford avatar
    8 posts
    Member since:
    Jun 2012

    Posted 06 Jan 2012 Link to this post

    I have installed Q3 2011 Ajax controls, and am using the RadUpload in my website.  The control itself works great, but I cannot seem to preview the images.  I have tried doing it serverside, which is ok, but the radupload loses it's selected file on the postback, so I cannot then do an Upload on the image.  I then tried doing it with a client click of a preview button, but I cannot find where the filename is stored in the control.  I am accessing it with jquery by using the following:  $telerik.$('.ruImageUploader').  

    I guess what my question is, how do I access the Files in the Upload control from jquery. 
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 06 Jan 2012 Link to this post

    Jim:

    Have you referenced this forum thread, yet?

    Preview of file selected through RadUpload

    Telerik has provided insights and a working project to implement a similar requirement.

    Hope this helps!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James Bridgeford
    James Bridgeford avatar
    8 posts
    Member since:
    Jun 2012

    Posted 06 Jan 2012 Link to this post

    I looked it over and to do an automatic preview it would work, but my requirement is to do it on a button click. When I try and expose the upload control via jquery, I do not see a public property that gives me the name/path of the file that was chosen. Maybe I need to try and convince the client to change the requirements, but it seems like the contol at the very least should have someway of persisting through post back, or at least has an exposed property for the file.
  5. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 09 Jan 2012 Link to this post

    James:

    Is it possible to change the flow of things so that you provide a file selector that allows for the Preview of the image, and then, if satisfactory passes the 'src' property to the RadUpload control for uploading?

    Also, I found this rather clever Image Preview demo online. It may be of use to you. But, it seems to use HTML5 functionality.

    This online demo works for me in Firefox but not in IE9:
     
    http://jsbin.com/uboqu3/edit#source
  6. Danny
    Danny avatar
    7 posts
    Member since:
    Jan 2012

    Posted 23 Mar 2012 Link to this post

    See  http://caniuse.com/#search=filereader 

    Unfortunately IE doesn't support the HTML5 FileReader yet.

    www.BlueCanyonSoftware.com
  7. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 26 Mar 2012 Link to this post

    Hi James,

    To get the uploaded file, you must obtain a reference to the client object of the RadUpload control. You can do that with the following line:
    var upload = $find("<%= RadUpload1.ClientID %>");

    After you have this reference, you can get the selected files:
    var file = upload.getFileInputs()[0]

     
    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.
  8. Danny
    Danny avatar
    7 posts
    Member since:
    Jan 2012

    Posted 26 Mar 2012 Link to this post


     
    upload.getFileInputs()[0]
                  \\returns the HTMLInputElement object. 
    upload.getFileInputs()[0].value \\returns "C:\fakepath\<thefilename>"


  9. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 27 Mar 2012 Link to this post

    Hi Danny,

    I was just showing how you can get the values of the selected file outside of the client events, as demonstrated in the link Richard provided in his first reply. Since this is RadUpload, until you postback the page, you only have a reference to the input tag and the name of the file, as it hasn't been uploaded yet.

    If you want to get the file itself, I would suggest using RadAsyncUpload. Please take a look at the following demos, demonstrating how it can be used in a similar scenario:
    http://demos.telerik.com/aspnet-ajax/upload/examples/async/imageuploader/defaultcs.aspx?product=asyncupload 
    http://demos.telerik.com/aspnet-ajax/upload/examples/async/persistuploadedfiles/defaultcs.aspx?product=asyncupload 
    http://demos.telerik.com/aspnet-ajax/imagegallery/uploadpage.aspx 

    You can easily modify the logic of these demos so that the preview happens on a button click, instead of automatically on fileupload.
     
    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.
  10. Danny
    Danny avatar
    7 posts
    Member since:
    Jan 2012

    Posted 27 Mar 2012 Link to this post

    Bozhidar,
    Thanks for the excellent post.  I am implementing the image preview with the RadAsyncUpload.  Your links with code examples are helpful. 

    ~Danny
    www.BlueCanyonSoftware.com

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017