This is a migrated thread and some comments may be shown as answers.

Creating Preview with RadUpload

8 Answers 162 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
James Bridgeford
Top achievements
Rank 1
James Bridgeford asked on 06 Jan 2012, 06:16 PM
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. 

8 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 06 Jan 2012, 08:15 PM
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!
0
James Bridgeford
Top achievements
Rank 1
answered on 06 Jan 2012, 10:39 PM
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.
0
Richard
Top achievements
Rank 1
answered on 09 Jan 2012, 06:53 PM
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
0
Danny
Top achievements
Rank 2
answered on 24 Mar 2012, 12:07 AM
See  http://caniuse.com/#search=filereader 

Unfortunately IE doesn't support the HTML5 FileReader yet.

www.BlueCanyonSoftware.com
0
Bozhidar
Telerik team
answered on 26 Mar 2012, 09:00 AM
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.
0
Danny
Top achievements
Rank 2
answered on 26 Mar 2012, 04:00 PM

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


0
Bozhidar
Telerik team
answered on 27 Mar 2012, 09:21 AM
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.
0
Danny
Top achievements
Rank 2
answered on 27 Mar 2012, 02:28 PM
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

Tags
Upload (Obsolete)
Asked by
James Bridgeford
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
James Bridgeford
Top achievements
Rank 1
Danny
Top achievements
Rank 2
Bozhidar
Telerik team
Share this question
or