Sir,
I want to get a preview on asp:image control of the files selected through rad upload.
i tried the below code,but still it is not working
<
script type="text/javascript">
function
myOnClientFileSelect(radUpload, eventArgs)
{
var img = document.getElementById('<%= Image1.ClientID %>');
img.src=eventArgs.FileInputField.value;}
</
script>
<
asp:Image ID="Image1" runat="server" Height="112px" Style="z-index: 103; left: 472px;
position: absolute; top: 208px"
Width="136px" />
<
telerik:RadUpload ID="RadUpload1" runat="server" Style="z-index: 100; left: 112px;
position: absolute; top: 136px"
OnClientFileSelected="myOnClientFileSelect" AllowedFileExtensions=".bmp,.jpeg,.jpg,.gif" ControlObjectsVisibility="All" InitialFileInputsCount="2" MaxFileInputsCount="1000" MaxFileSize="100000000" TargetFolder="~/File" OnFileExists="RadUpload1_FileExists" />
<telerik:RadProgressArea ID="RadProgressArea1" runat="server" Style="z-index: 101;
left: 120px; position: absolute; top: 232px">
</telerik:RadProgressArea>
<telerik:RadProgressManager ID="RadProgressManager1" runat="server" Style="z-index: 102;
left: 104px; position: absolute; top: 184px"
/>
Thank you
15 Answers, 1 is accepted
Please answer our questions in ticket #148295.
The correct code should be:
var img = document.getElementById('<%= Image1.ClientID %>'); |
img.src = eventArgs.get_fileInputField().value; |
Greetings,
Veskoni
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center

I tried the code.But didnot get the preview
<
script type="text/javascript">
function myOnClientFileSelect(radUpload, eventArgs)
{
var
img = document.getElementById('<%= Image1.ClientID %>');
img.src=eventArgs.get_fileInputField().value; originalAttribute="src" originalPath="eventArgs.get_fileInputField().value;"
}
</
script>
<
telerik:RadUpload ID="RadUpload1" runat="server" Style="z-index: 100; left: 128px;
position: absolute; top: 136px"
AllowedFileExtensions=".bmp,.jpeg,.jpg,.gif" ControlObjectsVisibility="All" InitialFileInputsCount="2" MaxFileInputsCount="1000" MaxFileSize="100000000" TargetFolder="~/File" OnClientFileSelected="myOnClientFileSelect" />
<
asp:Image ID="Image1" runat="server" Height="112px" Style="z-index: 104; left: 528px;
position: absolute; top: 192px"
Width="136px" />
Thank you
I have created a video which shows that the code I sent you is working fine. Unzip the file and run the Upload_PreviewImage.html file.
All the best,
Veskoni
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center

I seem to have the same problem, my ASP:Image control does not show the preview image eventhough i followed your exact examples and even compared my code to the code in the video you posted wich is identical. Any change it is related to something really obvious that i am missing ? i'm completely new to these controls and pretty new to javascript.
Greetings
Niels

i viewed the video and applied it.Below code is working
eventArgs.get_fileInputField().value;
but the problem is
var img = document.getElementById("<%= Image1.ClientID %>");
is not working.I am getting the error "null" is null or not an object"
I have another doubt too.
Is there any way to speed up telerik
help me plz..
thanks

Below code throws javascript error
image1.src = eventArgs.get_fileInputField().value;
Instead of that
image1.src = eventArgs.FileInputField.value;
This code works but the problem is, if I upload the image from different computer(\\computername\foldername\image.jpg), then i can able to see the preview image. If I upload the image from my local computer(C:\pictures\image.jpg), then i can't able to see the preview of the image.
Please provide me the solution.
Thanks in advance.
-Anees
It seems you are using the "classic" RadUpload and that is why you receive the error.
Please check the Limitations part of this help article.
Greetings,
Veselin Vasilev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

I could preview he image if it is .GIf format.
1.Is there any way to preview the uploaded file like al format, PDF,Mjpg,>docx,.and All types.
2. Even in grid view ..i hc set a Alink which inks with uploaded file accordingly.
2.1- I could view the image file IN Explorer but open other files is coming aong with blank Explorer and usual popup box.
how it can be handled

not sure that all browsers are able to handle javascript-created <object> elements correctly, but you can give it a try. You just need some client-side script.
Cheers,
Blaize

<script type="text/javascript">
function OnClientFileSelectedHandler(sender, eventArgs) {
var img = document.getElementById('<%= image1.ClientID %>');
img.src = eventArgs.get_fileInputField().value;
}
</script>
it is work in internet explorer only. i want to work on google chrome and firefox also
please give me reply
thanks
venu
You can refer to this help article where this issue have been explained in the limitation section under the javascript code.
Hope this will be helpful.
Plamen
the Telerik team

Let me know if you have any other suggestions.
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<telerik:RadUpload ID="uploadFront"
runat="server"
TargetFolder="~/uploads/"
allowedfileextensions=".jpg,.jpeg,.gif,.png"
OnClientFileSelected="OnClientFileSelectedHandler" />
<asp:Image ID="uploadFrontPreview" runat="server" Height="56px" Style="visibility: hidden" Width="236px"/>
</div>
</form>
</body>
</html>
<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('<%= uploadFrontPreview.ClientID %>');
if (img) {
img.style.visibility = "";
img.src = input.value;
}
}
}
</script>
I am attaching a sample project where similar issue have been achieved.
Hope this will be helpful.
Plamen
the Telerik team

Let me know if there is another way, using the Q2 2011 version.
thanks,
RMS
Unfortunately this scenario was recently added and before that it was not supported with the control. In such case I will recommend you to preview the image after it is uploaded as in this on-line demo.
Plamen
the Telerik team