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 ?
Related
i am developing a website, in our website we have a Video player, and a Download button. When user click to it, it will download the video to user machine.
Usually this can be done if user right click and choose Save Video as. Then a native browser dialog open, where user can choose destination and file name, then click save. After that in the bottom of the browser there will be a widget to show progress, and user can click to open after it finishes downloading
Now my question is it possible if we create a similiar functional widget but in the website. So basically after user clicking Download. This modal will appear in the bottom left of the page
Then after downloading is finished, it will change to
So to sum up the requirement for this
1/ Trigger download automatically by JS without right click and choose Save video as
2/ Showing a custom progress of downloading
3/ When downloading is finished, there is a custom button, where user can click to Open
4/ [Optional] Hide the native progress/click to open widget of the browser
So these requirement i still not sure which one is possible and which one is not, so hopefully if someone can give me a direction, thanks
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!
What I want to do is: when a user clicks on a button, a folder browser should pop up almost the same way when <input type="file"> is used. The only difference is that I don't want that "Open" button, I want a button with "Save" as text. See that I'm not looking for a file saver in javascript, I just want a dialog that user can navigate inside folders, insert a file name and click on a button called "Save", so that I can make the file saving server-side.
Thanks in advance.
The file browser is part of the operating system, not the web page. Sorry.
I want to have a message displayed automatically, whenever my pageaction icon is displayed.
How can I make that to be displayed, I want to alert the user that " You can click this button to perform so on....".
If you want a popup appear programmatically, this cannot be done, it can only be initiated by a user click.
It would be nice if you could use infobars API, but it is still experimental.
Therefore, your only choice seems to be to inject a script into the page that would create some sort of overlay on the page roughly pointing to the page action area.
Note that you will need permission to access that page, as activeTab permission is not enabled until user clicks on your page action.
In javascript, how can I detect when the browser brings up the open/save/cancel prompt when loading a file?
If possible, is it the same for all browsers?
I'm trying to fix a problem with users clicking a download button, being impatient and clicking it again, and again which is taxing our servers. I tried just hiding the button while the file is processed, but the icon will come back before the open/save/cancel prompt shows up.
The code goes something like this:
...
users clicks button,
button hides,
external process gets the file,
button appears ...
You can't.
How the browser deals with a requested resource - open it, start an external application, offer a "save" dialog - is outside of what you can control using JavaScript.
You can't! No way, that's it!