Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Customizing ASP.NET AJAX Control Toolkit AsyncFileUpload look

Posted by : Michael Narinsky on July 6, 2010 | 4 Comments

The standard HTML <input type=”file”> element does not work inside ASP.NET update panel due to security reasons and restrictions a browser implies (It is not allowed for JavaScript to directly access files in a user's system and it is not allowed to access the details of the selected file). ASP.NET AJAX Toolkit AsyncFileUpload control seems to be an easy way to solve this issue – it works out-of-box (well, after you add AjaxControlToolkit binaries to your project) and provides an excepted functionality to the end-user.

One problem I faced during my work with AsyncFileUpload was inability to customize the look of the control. This is a pretty common issue with a <input type=”file”> element in general and a pretty neat solution for this is described here. The basic idea of this solution is that you place <input type=”file”> element on top of another custom element (picture, button, etc.) and then set <input type=”file”> element’s opacity to 0, so it will be transparent and the user will only see the element underneath (picture, button, etc.), but clicking on that element will causes <input type=”file”> to fire off it’s click event.

This technique seems to work fine when working with regular <input type=”file”>, however AsyncFileUpload control does not allow to set its opacity…

So in order to solve this let’s take a look at how AsyncFileUpload control is being rendered.

Turns out that this code:

<div id="fileUploadDiv">
    <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" />
</div>

will be rendered as:

<div id="fileUploadDiv">    
    <span id="MainContent_AsyncFileUpload1">    
        <input type="hidden" name="ctl00$MainContent$AsyncFileUpload1$ctl00" id="MainContent_AsyncFileUpload1_ctl00" />    
        <div id="MainContent_AsyncFileUpload1_ctl01" name="MainContent_AsyncFileUpload1_ctl01">    
            <input name="ctl00$MainContent$AsyncFileUpload1$ctl02" type="file" id="MainContent_AsyncFileUpload1_ctl02" id="MainContent_AsyncFileUpload1_ctl02" onkeydown="return false;" onkeypress="return false;" onmousedown="return false;" style="width:355px;" />    
        </div>    
    </span>    
</div>

This means that using a CSS selector #fileUploadDiv input[type=file] you can modify the style (including opacity) of the AsyncFileUpload control the same way you do it with the regular <input type=”file”> control therefore you can still use this nice solution I mentioned before to give AsyncFileUpload control a custom look you want.

Labels: , , , , |  

Dynamically changing HTML form action using jQuery

Posted by : Michael Narinsky on July 21, 2009 | 0 Comments

In order to test a RESTful service I’m currently working on I’ve created a simple HTML page with a bunch of forms. These forms generate various POST/GET requests to my REST service API methods, so I can manually test the service during a development process. One issue I faced was that the action attribute of HTML form element is static while I need to modify it dynamically based on user’s input (i.e. so I can send a GET requests to a URL like http://www.myrestfulservice.com/item/{itemID} where itemID is entered to the form by a user). JavaScript comes to mind.

So here is how this could easily be done with jQuery:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#getForm :submit").click(function() {
                var item = $(":input#itemId").val();
                $("#getForm").attr("action", "http://www.myrestfulservice.com/" + item);
            });
        });
    </script>
</head>
<body>
    <p>
        Enter item ID get:
        <input type="text" size="50" id="itemId" />
    </p>
    <form id="getForm" method="get" action="">
        <input type="submit" value="Get Item" />
    </form>
</body>
</html>

Labels: , , |  

Subscribe to: Posts (Atom)