Preview of file selected through RadUpload

Thread is closed for posting
16 posts, 0 answers
  1. Priya
    Priya avatar
    144 posts
    Member since:
    Jul 2008

    Posted 07 Jul 2008 Link to this post



    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

  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 09 Jul 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Priya
    Priya avatar
    144 posts
    Member since:
    Jul 2008

    Posted 11 Jul 2008 Link to this post

    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

  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 11 Jul 2008 Link to this post

    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
  6. Niels
    Niels avatar
    3 posts
    Member since:
    Jul 2008

    Posted 16 Jul 2008 Link to this post

    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
  7. Priya
    Priya avatar
    144 posts
    Member since:
    Jul 2008

    Posted 24 Jul 2008 Link to this post

    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

  8. Anees
    Anees avatar
    4 posts
    Member since:
    May 2007

    Posted 09 Nov 2008 Link to this post

    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

  9. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 10 Nov 2008 Link to this post

    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.
  10. Arni
    Arni avatar
    17 posts
    Member since:
    Oct 2008

    Posted 02 Dec 2008 Link to this post

    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
  11. Blaize
    Blaize avatar
    88 posts
    Member since:
    Oct 2006

    Posted 03 Dec 2008 Link to this post

    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
  12. Venu
    Venu avatar
    4 posts
    Member since:
    Sep 2012

    Posted 13 Sep 2012 Link to this post

    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
  13. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 13 Sep 2012 Link to this post

    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
    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.
  14. Kevin
    Kevin  avatar
    8 posts
    Member since:
    Nov 2010

    Posted 11 Jan 2013 Link to this post

    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>
  15. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 16 Jan 2013 Link to this post

    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
    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.
  16. Kevin
    Kevin  avatar
    8 posts
    Member since:
    Nov 2010

    Posted 01 Feb 2013 Link to this post

    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
  17. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 06 Feb 2013 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017