15

I want the user to be able to upload text files as input through the browserAction popup for my extension, but I've run into a bit of a problem.

I've been using a hidden input tag, which I trigger with click() when the user clicks on the file upload button. The file browser dialog opens and all seems to work well, until the popup itself closes. And because of the 'webpage' containing the input tag closing, the change event never fires.

Since the extension already has a background script for populating the popup with persistent data, I figured that I could create the input in the background script and trigger that with .click() when user clicks on the file upload button in the popup.

But, even though the click event fires for the input in the background script, the file browser dialog does not open.

I figure that reason for this is that Chrome does not allow the file input to be triggered programatically unless it's through a user action, but I'm not sure. This is how I tried;

popup.js

//Button in popup which should open file broswer dialog
//when clicked
browseBtn.addEventListener('click', function() {
    chrome.runtime.sendMessage({msg: 'file_input'});
}

background.js

var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'text/*';

fileInput.addEventListener('click', function(e) {
    console.log('fileInput clicked');
}, false);

fileInput.addEventListener('change', function(e) {
    console.log('fileInput changed');
    console.log(this.files);
}, false);

chrome.runtime.onMessage.addListener(function(e) {
    if(e.msg === 'file_input')
        fileInput.click();
});

I know that the click event is triggered because fileInput clicked is logged. But, the file browser dialog does not open.

I also tried a variation of this code using chrome.extension.getBackgroundPage() to directly call fileInput.click(). Again, click event was fired but the dialog did not open.

My question is; is there a way to allow the background script to trigger the file input to open the file browser dialog? That would be the best solution, because it would allow the extension to extract the data from the specified file even if the popup closed somehow.

If not, is there a way to avoid the popup from being closed when the file browser dialog opens? From what I found, using the hidden input tag was supposed to be a work around, and it does work for some cases, but not for all users.

For example, I was able to upload files without popup being closed on Chrome, Windows 7. But, on Chromium, Ubuntu 14.04, the popup closes the instant the file browser dialog opens.

Any help is appreciated.

Rikonator
  • 1,830
  • 16
  • 27
  • Did youmanage to solve this ? What platform are you on ? – gkalpak Jun 27 '14 at 13:56
  • @ExpertSystem No, I was forced to use a popup window for the file input. I'm on Windows 7, still looking for a possible solution other than having to use a popup window. – Rikonator Jun 27 '14 at 14:40
  • Previously, your approach with tha background-page used to work, but not in the latest versions of Chrome. But why can't you use the extension's browser-action popup ? It seems to work on Windows. – gkalpak Jun 27 '14 at 14:57
  • 1
    @ExpertSystem Because while it works on Windows, testing it elsewhere, like on Ubuntu, didn't work since the popup closed. Also, there's the fact that the popup **can** close while the file browser dialog is open. In cases like that, the browser action popup approach can leave users wondering why their file wasn't loaded. – Rikonator Jun 27 '14 at 15:06
  • You are right ! I usually write extensions for personal use, so I forget normally extensions are meant to have users :) I wonder why Chrome broke the background-page approach. It could be a bug... – gkalpak Jun 27 '14 at 15:16
  • Do you know a workaround for ubuntu? I run into the same issue. Popup window closed when I select a file, so I can't submit it. – Lishu Sep 11 '14 at 19:55
  • 1
    @Lishu The only workaround that I've found that works consistently on every platform is using a new window or tab to handle the file input, instead of the browser-action popup. Not very clean, but it works for now. – Rikonator Sep 13 '14 at 07:45
  • @Rikonator Yes, that's what I did in the end. Thanks for your reply. – Lishu Sep 15 '14 at 15:25
  • This solution might be helpful https://stackoverflow.com/questions/26884140/open-import-file-in-a-chrome-extension – alijandro Dec 25 '20 at 11:58

1 Answers1

1

It looks like this might have just been fixed, I'm waiting for it to be available as well!

Abdullah Jibaly
  • 53,220
  • 42
  • 124
  • 197
  • 2
    The bug seems to only concern OS X, and the original question is about Ubuntu. This might still be an open problem there. – Xan Sep 28 '14 at 18:09