Chrome Extension File Upload Browse Window Position Off Screen

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 an

Solution 1:

Unfortunately there isn't much you can do to make the dialog show in the main window. The user filesystem is sensitive so the browser has several security measures to prevent an scripted upload, that means no dirty tricks here.

So I'd recommend you to pick a different approach to be able to provide a good user experience for uploading a file even from the extension popup.

One possibility is to make use of the browserAction popup as a drag and drop zone for your files. It's pretty simple to achieve it, like I demonstrate in this fiddle:

http://jsfiddle.net/Lv1nj58p/1/

HTML

<div id="file-container">
    <b>DRAG YOUR FILES HERE</b>
    <input id="file"type="file"  multiple="multiple"/>
</div>

CSS

#file-container {
    border:2px dashed #aaa;
    background:#eee;
    position:relative;
    width:200px;
    text-align:center;
    padding:20px;
    border-radius:8px;
    font-family:sans-serif;
}

#file {
    position:absolute;
    opacity:0;
    background:magenta;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

This fiddle is very raw but if you throw that code in your index.html you'll see what I'm suggesting. One downside is, that to properly use the drag drop concept for file input, there is several events that needs to be handled in order to provide visual feedback when one or more files are selected. Fortunately, there are several libraries with that purpose; A good one is is Dropzone.js.

Sadly that's more an alternative than a straight answer. I hope that this solution fits well in your context!

Last but not least, the behavior that you described sounds like a bug to me (probably OS X specific). Feel free to file an issue to the chrome team so they can tell you if is that something buggy or ugly, i.e if it's something that they're going to fix or not.