File Input in Chrome Extension popup - javascript

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.

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

Related

chrome extension setPopup is not propagated immediately

I'm working on chrome extension and I want to have 2 pages one main popup and then on click on specific button I want to replace it with other one(some settings page) so far I managed to change it using
chrome.action.setPopup({ popup: "settings.html" })
but problem is in fact that it's not immediately propagated, I have to click on extension to close it and click again to open it to be able to see settings page, did I missed something or what is the preferred way in such case?

How to add call back to Chrome Open External Application popup?

I have a piece of code that will open a desktop application through Chrome.
const openDesktopApp = () => {
const url = "path/to/desktopApp";
window.open(url,'_self','');
}
Every time this method is called, Chrome will show a popup if they want to proceed to open the desktop app. This popup is generated by Chrome, how do I add a button handler to the 2 buttons on there? I need to navigate to a different page when they click open and do nothing when they click cancel.
Just add this to your open tag button
href="link to your site that you want"

input type="file" not working in facebook in-app browser

In Facebook in-app browser (fb messanger 237.0 for android) not working file input
I've tried to trigger it with js
$('input').click();
$('input').on('change', function () {
alert(1)
})
And alert wouldn't show, "change" event not triggering
In my html I have:
<input type="file" id="fake-file-upload">
When load site via fb browser, and I click on this input, it triggers file manager, I choose the image I want to load, and then nothing happens, file wasn't chosen, there is no error in console and when I try to click on file input one more time it stops working, it's not opening file manager.

How to block clicks outside File Browser Window

I have some pages with file browser input.
Everything works fine, but to prevent the user to click the Add Files button many times or to click in some another link in the page I want to make only the file browser window clickable (Gmail have this feature when you want to attach some file in the email for example).
I don't want to use
e.preventDefault()
Because when the user choose the file or cancel the file browser I need to enable the button again.
So basically I just want to "block" clicks outside of File Browser Window.
Someone have some idea how to do it ?

Skip download dialog box in IE using javascript or jQuery

I need to open a document on click on a button.
For that I use window.open() method. All work well when a document type is JPEG, DOC, TIFF etc.
When document type is MSG file (Outlook mail) or any document that cannot be open in IE, the browser asks to download a file with Open, Save, Cancel options.
I need to skip this dialog box and directly start download and open a document in its native application (that happens when user clicks on Open button in download box, so I need to do it via javascript or jQuery).
I tried to use IFrame and its Source attribute, that also gives the same result.
Any Suggestions..?

Categories

Resources