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

How to show preview on selection of image

3 Answers 270 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Puru
Top achievements
Rank 1
Puru asked on 07 Nov 2012, 06:00 PM
Hi,
I want to show the selected image as the preview, i have used below code but it is not working and tools.
i am using Visual Studio 2010 Premium,

<telerik:RadUpload ID="RadUpload1" runat="server" OnClientFileSelected="OnClientFileSelected" AllowedFileExtensions=".bmp,.jpeg,.jpg,.gif"  MaxFileSize="100000000"/>

<asp:Image id = "imgTheme"   runat="server" ClientIdMode = "Static"/>

<script type = "test/javascript">
function OnClientFileSelected(sender, args){
var image = document.getElementById("imgTheme");
image.src = args.get_fileInputField().value;
}
</script>

in java script i am able to get the image, i have shaw the image control in the alert. But when i saw image source in the alert it show the path "C:\\fakePath\imagefileName", and i am not uploading the image from the c drive.

Thanks

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 08 Nov 2012, 11:00 AM
Hi Puru,

Try the following code snippet to achieve your scenario.

ASPX:
<telerik:radupload id="RadUpload1" targetfolder="~/uploads/" allowedfileextensions=".jpg,.jpeg,.gif,.png" onclientfileselected="OnClientFileSelectedHandler" runat="server"></telerik:radupload>
<asp:Image ID="Image1" runat="server" Height="56px" Style="visibility: hidden" Width="236px" />

JS:
<script type="text/javascript">
 function OnClientFileSelectedHandler(sender, eventArgs) {
       var input = eventArgs.get_fileInputField();
       //check the extension   
       if (sender.isExtensionValid(input.value)) {
           var img = document.getElementById('<%= Image1.ClientID %>');
           if (img) {
               img.style.visibility = "";
               img.src = input.value;
           }
       }
   }
</script>

The code above will work correctly on IE browser only, since in Firefox the input.value returns the filename instead of the full path to the file.When using RadUpload such behavior is highly restricted for security reasons as it is explained in this article so you can consider using RadAsyncUpload as it is shown in this on-line demo.

Hope this helps.

Regards,
Princy.
0
Puru
Top achievements
Rank 1
answered on 12 Nov 2012, 10:32 AM
Hi Princy,

Thanks for your response. I Have tried as you have suggested but it did not worked for me. If i alert the image.src then it shows "file://C://FakePath//ImageName.png". Your second option is complicated so i just want to user RadUpload. 

Even i have no issue to save the image  at temporary location, but i did not find any event of radupload to do it. Please suggest me if you have any idea.

Thanks
 
0
Plamen
Telerik team
answered on 14 Nov 2012, 03:44 PM
Hello Puru,

 
I am attaching a sample web page that implements preview of the selected file after it selection with RadUpload. 

Hope this will be helpful.

Kind regards,
Plamen
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.
Tags
Upload (Obsolete)
Asked by
Puru
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Puru
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or