Menu for uploading from a web URL or from ones computer

Menu for uploading from a web URL or from ones computer

 I am trying to reproduce on my homemade site a feature that I have seen on many forums, namely
a pop-up menu that allows the user to upload a file either from a URL or from the user's computer.

  (thus, what I am looking for is exactly like what happens when the portrait icon is clicked at
http://math.stackexchange.com/questions/ask for example).

  The nearest I could reach so far is the very incorrect and very ineffective code below. Any help appreciated.

  1. <!doctype html>
  2. <html lang="en">
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>jQuery UI Dialog functionality</title>
  6.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  7.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  8.   <!-- CSS -->
  9.       <style>
  10.          .ui-widget-header,.ui-state-default, ui-button{
  11.             background:#b9cd6d;
  12.             border: 1px solid #b9cd6d;
  13.             color: #FFFFFF;
  14.             font-weight: bold;
  15.          }
  16.       </style>
  17.       <!-- Javascript -->
  18.       <script>
  19.          $(function() {
  20.             $( "#mydialog" ).dialog({
  21.                autoOpen: false,
  22.                modal: true,
  23.                buttons: {
  24.                   "_File": function() {
  25.                           $( this ).dialog( "close" );
  26.                   },
  27.                   "_Web": function() {
  28.                           $( this ).dialog( "close" );
  29.                   },
  30.                },
  31.                title: "Upload File",
  32.                position: {
  33.                   my: "left center",
  34.                   at: "left center"
  35.                }
  36.             });
  37.             $( "#myopener" ).click(function() {
  38.                $( "#mydialog" ).dialog( "open" );
  39.             });
  40.            
  41.         $('#uploadWeb').hide();
  42.         $('#uploadFile').hide();
  43.            
  44.         // apply onclick handler to radio buttons
  45.         $('#upload_file_button').click(function() {
  46.         $('#uploadWeb').show();
  47.        
  48.         }
  49.          $('#upload_web_button').click(function() {
  50.         $('#uploadFile').show();
  51.        
  52.         }
  53.     });
  54.          });
  55.       </script>
  56.    </head>
  57.    <body>
  58.       <!-- HTML -->
  59.       <div id="mydialog" title="Dialog Title goes here...">
  60.       This my first jQuery UI Dialog!</div>
  61.       <button id="myopener">Open Dialog</button>
  62.      
  63.       <form method="post">
  64.     <div id="uploadType">
  65.         <input type="radio" name="upload_file_button" value="file" /> Computer<br />
  66.         <input type="radio" name="upload_web_button" value="web" /> Web<br />
  67.     </div>
  68.     <div id="uploadFile">
  69.         <input type="file" name="upload_file" />
  70.     </div>
  71.    
  72.      <div id="uploadWeb">
  73.         <input type="text" name="upload_web" placeholder="Enter URL to file" />
  74.     </div>
  75.    
  76. </form>
  77.    </body>
  78. </html>