title: Limiting size of fineuploader upload element
body: <p>I am using a file upload plugin available from <a href="http://fineuploader.com/" rel="nofollow">http://fineuploader.com/</a> and downloadable from <a href="https://github.com/valums/file-uploader/wiki/Releases" rel="nofollow">https://github.com/valums/file-uploader/wiki/Releases</a>.  The plugin does fancy drag-and-drop stuff, but I just want a very basic uploader and am using the FineUploaderBasic option.</p>
  
  <p>I wish to add an upload button on each row of a table.  My code is below, and a live demo is at <a href="http://tapmeister.com/test/fineuploader-3.0/test1.html" rel="nofollow">http://tapmeister.com/test/fineuploader-3.0/test1.html</a>.  The upload button is the second icon on each row.</p>
  
  <p>I got it working, however, the upload clickable area is much larger than just the area taken up by the upload icon. In fact, if you click to the left or below the upload icon, it will trigger an upload.  Looking at the DOM using FireBug, I see that <code>&lt;input type="file" multiple="multiple" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"&gt;</code> is added inside the targeted div element, and right after the icon.</p>
  
  <p>How can I limit the size of the input to just the size and position of the original upload div and/or icon?  Thank you</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Fine Uploader - Basic&lt;/title&gt;
          &lt;style&gt;
              #myTable td {width:50px;}
              #myTable div {display:inline;}
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script src="fineuploader-3.0.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
  
              var uploader={
                  request: {endpoint: 'server.php'},
                  validation: {
                      allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                      sizeLimit: 204800 // 200 kB = 200 * 1024 bytes
                  },
                  callbacks: {
                      onSubmit: function(id, fileName) {},
                      onUpload: function(id, fileName) {},
                      onProgress: function(id, fileName, loaded, total) {},
                      onComplete: function(id, fileName, responseJSON) {}
                  },
                  debug: true
              };
  
              $('#myTable div.upload').each(function(){
                  uploader.button=(this);
                  new qq.FineUploaderBasic(uploader);
              })
  
          });
      &lt;/script&gt;
  
      &lt;body&gt;
          &lt;table id="myTable"&gt;
              &lt;tr&gt;&lt;td&gt;Col1&lt;/td&gt;&lt;td&gt;&lt;img src="folder.png" alt="folder"&gt;&lt;div class="upload" title="upload"&gt;&lt;img src="upload.png" alt="upload"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;Col3&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Col1&lt;/td&gt;&lt;td&gt;&lt;img src="folder.png" alt="folder"&gt;&lt;div class="upload" title="upload"&gt;&lt;img src="upload.png" alt="upload"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;Col3&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Col1&lt;/td&gt;&lt;td&gt;&lt;img src="folder.png" alt="folder"&gt;&lt;div class="upload" title="upload"&gt;&lt;img src="upload.png" alt="upload"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;Col3&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>