I have the following dialog box in my application:
When the user presses the Add logo button, following things should happen:
A file selectio dialog should pop up.
After the user has selected the file, a function should be called (which will update the image).
I have the following code for this. The markup for file selection looks like this:
<button class="btn" ng-click="$ctrl.addLogo()">Add logo</button>
$ctrl.addLogo() is defined as (source)
$ctrl.addLogo = function() {
console.log("'Add logo' button clicked");
var uploadForm = document.createElement('form');
var fileInput = uploadForm.appendChild(document.createElement('input'));
fileInput.type = 'file';
fileInput.name = 'images';
fileInput.multiple = true;
fileInput.click(function() {
console.log("Click callback called");
});
};
When I press the Add logo button, the file selection dialog does open, but the Click callback called message does not appear in the console. This means that I cannot detect, when the user has selected a file (or closed the dialog box with "Cancel").
How can I implement a reaction to the user selecting a file (or cancelling the dialog)?
When the user selects a file in an input with type="file", it is the change event that is fired.
If you replace your click listener by a change listener, it should work :)
fileInput.click(function() {
console.log("Click callback called");
});
must become:
fileInput.change(function() {
console.log("Click callback called");
});
Related
I have this code. What it does is that when I click the Save button user gets registered. I want to automate this button. I want to auto click this button. So when the page loads. Users don't have to click the save button. User get register automatically. I have already hardcoded the user information.
var buttons = [];
buttons.push({
text: lang.save,
action: function(){
You could do something like this :
When DOM (html page) is loaded, click the button.
// As soon as the page is loaded, auto save.
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM loaded');
const saveButton = document.getElementById("button-id");
saveButton.click();
});
When user clicks an input[type="file"] it shows them a popup to choose a file
User may choose one and click OK or click cancel
When they click OK - it's onChange event, great
When cancel - there is no event or I don't know about it
So the question is:
What event is fired when user clicks cancel or how to determine differently that no files have been chosen AFTER clicking cancel?
When the user initiates the file upload by clicking on the file input, you can add an event listener to the browser window to see when it re-gains focus. Since the system dialog is blocking/modal, the window will only re-gain focus when the dialog is dismissed.
In the event handler function, you can check to see if the value of the input changed. At the end, remove the focus event handler so it doesn't trigger from normal alt-tab or window focus events:
file.addEventListener("click", function () {
window.onfocus = function () {
console.log("The window was re-focused from the file input dialog");
if (file.files.length === 0) {
console.log("NO files were added");
} else {
console.log("Files were added");
}
// Remove the handler
window.onfocus = null;
};
});
<input id="file" type="file">
Just check the length of the files property of the file selector node:
const input = document.querySelector ('input[type="file"]')
if(input.files.length === 0){
//The user hasn't selected any files...
}
To detect changes, just add an event listener to the change event:
const input = document.querySelector ('input[type="file"]')
input.addEventListener('change', ()=>{
if(input.files.length === 0){
//Cancel clicked
} else {
//The user selected some files just now
}
})
I want to have infinite file-upload buttons. Right after I send a file, a new button appears.
How can I do something like:
You can add an event listener to the element to listen for changes and set up createUploadButton function to trigger whenever the event is delivered.
element.addEventListener('change', createUploadButton);
The exact answer to your question is bellow:
function makeNewButton() {
//create an upload button:
let uploadbtn = document.createElement('input');
uploadbtn.setAttribute('type', 'file');
//append it to your document:
document.body.appendChild(uploadbtn);
//add an event listener that fires the function again:
uploadbtn.addEventListener('change', makeNewButton);
//make delete element:
let deletetext = document.createElement('p');
deletetext.textContent = 'Delete';
//append it to your document:
document.body.appendChild(deletetext);
//Add an event listener to remove the original button and the delete link on click:
deletetext.addEventListener('click', function() {
uploadbtn.remove();
deletetext.remove();
});
}
makeNewButton();
Full documentation to the document interface can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Document
Handling the files and sending them to the server is a different mater.
I want to call the same action whenever the button is clicked, or the hash changed event occurred. Even if the hash changed event means just loading the page for the first time and redirecting to something like #something.
What I had so far, is basically duplicated code. The same code for a hashchange event, and for button clicked. I am looking for a solution not to have the code duplicated, but to call the hashchange event from a button clicked event. Here is my code so far.
main.js
$(window).bind('hashchange', function() {
// get User from the URL
var user = window.location.hash.substr(1);
// update the value in a text input with new ASIN
document.getElementById('asin_input').value = asin;
$.getJSON("/api/user/"+user, function (data) {
// ...
});
}).trigger('hashchange');
/*
* Whenever a button "Search!" is clicked, this function gets called.
*/
element.addEventListener('click', function () {
var user = $('#user_input').val();
$.getJSON("/api/user/"+user, function (data) {
// ...
});
});
Now the entire thing inside getJSON, and including the getJSON is duplicated, so I would want just the onClick calling/triggering the hashchange, which triggers getJSON. How to do this?
We are using .net and fineuploader. If the users session has timed out and they click the fineuploader button, we need to be able to redirect them to a login page instead of showing them the file selection dialog.
We have been able to sort-of do it in the "submit" event of fineuploader but the user still sees the file selection dialog before they do our redirect.
$("#fine-uploader").fineUploader().on("submit", function (event, id, name)
{
if (noSession){
cancelUploads();
window.onbeforeunload = function () { return; }
location.href = "/login";
}
}
I did not see any events that fire before the file selection dialog, unless I missed it (http://docs.fineuploader.com/api/events.html).
Is there a way to do something before the file selection dialog is shown?
The solution is probably as simple as attaching a click handler to the underlying file input element, preventing the browser's default action on click (which normally shows the file chooser), and then redirect the user to the page of your choice:
document.querySelector('input[type="file"]')
.addEventListener('click', function(event) {
event.preventDefault()
location.href = "/login"
})
Add this event handler when you want to redirect, and remove it when you don't. Or, you can add it after the uploader has been created, and add some logic to the click handler function that only prevents the default action and redirects if the user must re-login.
Warning: I have not tested this cross-browser (only Chrome).
you can use prevent default to stop the submit action and run your check.
Use an else statement to finish the submit if they are logged in.
$("#fine-uploader").fineUploader().on("submit", function (event, id, name)
{ event.preventDefault();
if (noSession){
cancelUploads();
window.onbeforeunload = function () { return; }
location.href = "/login";
}
else{
return true;
}
}
https://api.jquery.com/event.preventdefault/