Preview of file selected through RadUpload

[Priya]

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

[Veselin Vasilev]

Hello Priya,

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

[Priya]

Thanks for your consideration

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

[Veselin Vasilev]

Hello Priya,

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

[Niels]

Hello vesconi,
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

[Priya]

Thanks alot for your reply

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

[Anees]

Hi,

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

[Veselin Vasilev]

Hello 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.

[Arni]

Hi..
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

[Blaize]

Hey Arny,

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

[Venu]

hello,

 <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

[Plamen]

Hello 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.

Kind regards,
Plamen
the Telerik team

[Kevin]

I have tried both examples here and the image does not display after the OnClientFileSelectedHandler is invoked.

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>

[Plamen]

Hello Kevin,

 
I am attaching a sample project where similar issue have been achieved.

Hope this will be helpful.

Kind regards,
Plamen
the Telerik team

[Kevin]

Thank you for your response.  However I can not use, since I am using RadControls from July 13, 2011 (Q2 2011) and your solution is using the latest version.

Let me know if there is another way, using the Q2 2011 version.

thanks,

RMS

[Plamen]

Hello,

 
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.

Regards,
Plamen
the Telerik team