title: Chrome extension file upload browse window position off screen
body: <p>I am having an issue with the file browse dialog window appearing off the screen on a Mac when attempting to upload a file within a Google Chrome extension I am developing. Does anyone have any ideas as to how to reposition the dialog window or append the file upload to the main window so it centers with that window? I followed <a href="https://stackoverflow.com/questions/21132971/upload-file-as-a-form-data-through-chrome-extension">this question</a> to do my uploads. Any help appreciated! Thank you!</p>
  
  <p>My manifest.json:</p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "Bookmark and Binder",
    "description": "example",
    "version": "1.0",
  
    "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "/index.html"
    },
    "permissions": [
     "activeTab",
      "cookies",
      "http://example.com/"
     ]
  }
  </code></pre>
  
  <p>A small part of index.html:</p>
  
  <pre><code>&lt;div class="form-group chooseFile" id="showUpload" style="display:none"&gt;
                      &lt;label&gt;File Upload: &lt;/label&gt;
                      &lt;button type="button" id="uploadButton" class="btn btn-primary"&gt;Browse and Upload&lt;/button&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>On dom ready:</p>
  
  <pre><code>$('#uploadButton').on('click', function(){
      chrome.runtime.sendMessage({ action: 'browseAndUpload' });
    });
  </code></pre>
  
  <p>The rest of the script:</p>
  
  <pre><code>//background script
  
  /* Creates an `input[type="file]` */
  var fileChooser = document.createElement('input');
  fileChooser.type = 'file';
  fileChooser.multiple = "multiple";
  
  fileChooser.addEventListener('change', function () {
      var files = fileChooser.files;
      var formData = new FormData();
      var inst = $.jstree.reference(newData.reference),
      obj = inst.get_node(newData.reference);
      var uploadURL = apiHost + '/binder/upload?location=' + obj.id;
  
      formData.append('location', obj.id);
      for (var i = 0; i &lt; files.length; i++) {
        var file = files[i];
        formData.append('uploads', file, file.name);
      }
  
      var xhr = new XMLHttpRequest();
      xhr.open('POST', uploadURL, true);
  
      $('#createModal').one('hidden.bs.modal', function(){
        $('body').width('auto');
      })
  
      xhr.onload = function () {
      if (xhr.status === 200) {
          // File(s) uploaded.
          //uploadButton.innerHTML = 'Upload';
          var inst = $.jstree.reference(newData.reference),
          obj = inst.get_node(newData.reference);
  
          $('#createModal').modal('hide');
          inst.refresh();
        } else {
          alertEvent("Failure","Please try again later.")
        }
      };
  
      xhr.addEventListener('readystatechange', function (evt) {
          console.log('ReadyState: ' + xhr.readyState,
                      'Status: ' + xhr.status);
      });
  
      xhr.send(formData);
      form.reset();   // &lt;-- Resets the input so we do get a `change` event,
                      //     even if the user chooses the same file
  });
  
  /* Wrap it in a form for resetting */
  var form = document.createElement('form');
  form.appendChild(fileChooser);
  
  /* Listen for messages from popup */
  chrome.runtime.onMessage.addListener(function (msg) {
      if (msg.action === 'browseAndUpload') {
          $('body').width('1000px'); //attempt to move the dialog window
          fileChooser.click();
      }
  });
  </code></pre>