Custom Client-side Implementation

[Pete]

Hello,
I have an MVC view where I want the functionality of presenting a dialog to upload a file. I was thinking about using a hidden RadAsyncUpload control, and customizing the UI. For example, i have a link with text '[Upload File'], and clicking this pops open the dialog, and I show the selected file path inside a div.
Is this possible? What relevant client-side methods would i need, e.g. to open the dialog?
Thanks!
Pete

[Genady Sergeev]

Hello Pete,

To approaches here.

The first one is to set EnableEmbeddedStyleSheets property of RadAsyncUpload to false and write your own skin with the desired view.

The second approach is to put the async upload inside an absolutely positioned div with opacity zero. Then position the div above the label [Upload File].

I hope that this helps.

Greetings,
Genady Sergeev
the Telerik team

[Pete]

Hi Genady,
Can you please give me a simple example of the second option? I'm not sure I understand
Thanks
Pete

[Genady Sergeev]

Hello Pete,

You can find a sample as an attachment. The sample can upload a single file only.

Sincerely yours,
Genady Sergeev
the Telerik team

[Pete]

Hi Genady,
I'm using MVC, and using almost identical code in my view that you've supplied, I'm having no luck. (can't get anything to happen)
Thanks
Pete

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register Assembly="Telerik.Web.UI" TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    CustomSkin
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">

<style type="text/css">
        .invisible
        {
            opacity:0;
            position:absolute;
            filter:alpha(opacity=100);
            top:0px;
            left:0px;
        }

    </style>

     <script type="text/javascript">
         var uploadsInProgress = 0;

         function uploading(sender, args) {
             uploadsInProgress++;
             $telerik.$(".container").html("uploading");
         }


         function uploaded(sender, args) {
             uploadsInProgress--;
             if (!uploadsInProgress) {
                 $telerik.$(".container").html("uploaded");
             }
         }
    </script>

</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
    <h2>Custom Skin</h2>
    <div>

        <span class="container">
            [Select file]
        </span>

        <div class="invisible">
        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientFileUploading="uploading"
            OnClientFileUploaded="uploaded">
        </telerik:RadAsyncUpload>
        </div>

    </div>
    </form>

</asp:Content>

[Genady Sergeev]

Hello Pete,

This is expected. The CSS I've given you is just a sample. Please take a look at the Top and Right declarations. You need to modify them in accordance to your scenario. For example, for a default ASP.NET MVC WebProject the correct  top value is 190px. Remeber that this values specify how much pixels should the container be place with respect to the upper left corner. The easiest way to fine tune this is to use FireBug and its layout tab.

Kind regards,
Genady Sergeev
the Telerik team

[Pete]

ok, i see what you're saying. I was hoping i could just call it's click method from another action, but i guess that's not possible? One more thing, i'm having trouble setting the width of the control. Because i want to overlay it directly over my other link, i want it to have the same dimensions. Can you suggest best way to do that? Setting width on the control and width on container div element is not working

[Genady Sergeev]

Hi Pete,

Please use the InputSize property of RadAsyncUpload. It accepts an integer value which specifies how much columns should the text box contain. The async upload's default is 22. You can increase it in order to make it match your layout better.

All the best,
Genady Sergeev
the Telerik team

[Pete]

Not working. Changing InputSize has no effect:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
  HttpHandlerUrl="~/Helpers/UploadHandler.ashx"
  AllowedFileExtensions= ".csv, .txt, .xml, .xls, .xlsx"
  OverwriteExistingFiles="true"
  InputSize="5"
  AllowedMimeTypes="text/plain, text/csv, application/vnd.ms-excel, text/xml, application/xml"
                    >
</telerik:RadAsyncUpload>

[Genady Sergeev]

Hello Pete,

This is strange, the property should be working. Which version of the controls do you use? Here is screenshot of InputSize 5 on a test project. It is visible that the width of the text box is significantly reduced.

Regards,
Genady Sergeev
the Telerik team

[Pete]

Eureka! 
I had a style applied to all text-type inputs: input[type="text"] 
This was overriding the InputSize
Problem solved
Thanks!

[Pete]

Hey Genady,
One more thing here. What's the best way to change the style to my [Upload File] text on a mouseover? I want to make it look like a real link, e.g. change cursor to a pointer on a hover, etc.

I can't seem to capture the hover event tho, tried this in jQuery which doesn't work:

$(".ruFakeInput").hover(function() {
          alert('hover1');
      });


      $(".ruButton").hover(function() {
          alert('hover2');
      });

       $(".ruFakeInput").mouseover(function() {
          alert('hover1');
      });


      $(".ruButton").mouseover(function() {
          alert('hover2');
      });

Any suggestions?
Thanks!
Pete

 $(".ruFakeInput").hover(function() {

            alert('hover1');

        });

        $(".ruButton").hover(function() {

            alert('hover2');

        });

         

         $(".ruFakeInput").mouseover(function() {

            alert('hover1');

        });

$(".ruFakeInput").hover(function() {
          alert('hover1');
      });


      $(".ruButton").hover(function() {
          alert('hover2');
      });

       $(".ruFakeInput").mouseover(function() {
          alert('hover1');
      });


      $(".ruButton").mouseover(function() {
          alert('hover2');
      });

  

  $(".ruFakeInput").hover(function() {

            alert('hover1');

        });

        $(".ruButton").hover(function() {

            alert('hover2');

        });

         

         $(".ruFakeInput").mouseover(function() {

            alert('hover1');

        });

        $(".ruButton").mouseover(function() {

            alert('hover2');

        });

     $(".ruButton").mouseover(function() {

            alert('hover2');

        });

  $(".ruFakeInput").hover(function() {

            alert('hover1');

        });

        $(".ruButton").hover(function() {

            alert('hover2');

        });

         

         $(".ruFakeInput").mouseover(function() {

            alert('hover1');

        });

        $(".ruButton").mouseover(function() {

            alert('hover2');

        }

[Genady Sergeev]

Hello Pete,

I suggest that you try the following JavaScript:

$(".ruFileWrap", $get("RadAsyncUpload1"))
               .live("hover", (function(e) { alert('mousein') }, function(e) { alert('mouseout') }));

Greetings,
Genady Sergeev
the Telerik team