I have a file upload button on a page now and it works as it should. But is it possible to trigger the file upload dialog programmaticaly (with a workflow) so the user does not have to click on the button?
yes but not natively,
Thanks!
It happens to be a bit more complicated than to just call a function on page load. Because it needs to be triggered within a code block that was the handler of a user-initiated event . https://blog.mariusschulz.com/2016/05/31/programmatically-opening-a-file-dialog-with-javascript
So I have to probably add a hidden file input in some kind of HTML file…
what do you mean code block? i think you just install toolbox plugin, that lets you do js stuff, set id on your input element you want to target with event listeners.
Citation from the article I referenced:
" That doesn’t seem to work, either. How come that in the first example, the file dialog was opened successfully? The reason that the first example worked is that the click event was triggered within a code block that was the handler of a user-initiated event"
It’s some weird security concern that makes this impossible according to a lot of people…
its the popup blocker problem, on stack overflow it says if you use event listeners instead of on.load it should work. theres some other topics in this forum about upload by javascript.
Im going to need it soon because i want workflow to be triggered when my fake input is clicked and thats the only way. So i will update you if i find a solution.
Ok thanks!
I have tried a lot of solutions now:
$(‘input[type=text]’).click(function() {
$(‘input[type=file]’).trigger(‘click’);
});
$(‘input[type=file]’).show();
$(‘input[type=file]’).focus();
$(‘input[type=file]’).click();
$(“input[type=file]”).focus().trigger(“click”);
$(“input[type=file]”).focus().click();
$(‘input[type=file]’).onclick();
I have checked that the script is run with a consol.log and also that there is no js errors.
I also read the sugestions here: Is there a way to trigger a picture upload through a button or icon instead of picture uploader?
But nothing works.
I don’t think it’s a simple popup blocker problem.
1 Like
This is probably the final nail in the coffin. At least with Google Chrome on OSX.
This click event from a fake button triggers a file upload dialog (I don’t have to bind the click to the button to have it work):
window.addEventListener(“click”, function(event) {
console.log(“Button clicked.”);
$(’#uppepuppe input’).click();
});
This load event does not trigger a file upload, but it will still run:
window.addEventListener(“load”, function(event) {
console.log(“Button clicked.”);
$(’#uppepuppe input’).click();
});
This will not run:
window.addEventListener(“DOMContentLoaded”, function(event) {
console.log(“DOM fully loaded and parsed”);
console.log(“Button clicked.”);
$(’#uppepuppe input’).click();
});
This will run:
document.addEventListener(“click”, function(event) {
console.log(“Button clicked.”);
$(’#uppepuppe input’).click();
});
This will not run:
document.addEventListener(“DOMContentLoaded”, function(event) {
console.log(“Button clicked.”);
$(’#uppepuppe input’).click();
});
This will run but does not trigger a file upload (tested both with Chrome in OSX and Android Chrome browser):
function doSomething() {
console.info(“DOM loaded”);
$(’#uppepuppe input’).click();
}
// DOMContentLoaded may fire before your script has a chance to run, so check before adding a listener
if (document.readyState === “loading”) {
document.addEventListener(“DOMContentLoaded”, doSomething);
} else { // DOMContentLoaded already fired
doSomething();
}
I also tried the last solution with blur and focus and it will trigger the function doSomething() but not open the file upload dialog.
There is two solutions to solve this problem:
- Buy a plugin that uses getUserMedia() to activate the camera
- Build your own plugin that use getUserMedia(), then you can trigger it from the workflow if you want.
1 Like