Open automatically an input file dialog when the page is loaded - javascript

In one of some web personal project, I want to automatically ask to the user to upload a file when the page is loaded. (the user don't need to click anywhere, the dialog appears automatically)
(then after, I build some parts of the page depending of the content of the file)
I tried with this very simple code : (jsfiddle)
document.addEventListener("DOMContentLoaded", function(event) {
let input = document.createElement('input');
input.setAttribute('type','file'); // generate a '<input type="file">' tag
document.body.appendChild(input);
input.click(); // nothing happen here
//document.body.removeChild(input);
});
But nothing happen and I don't get any error...
Where is my mystake ? I don't understand

Related

How to use information from the URL to click on specific button?

I'm working on a group project for a class, and we have a webpage that is split into different tabs, so it is only one webpage, but appears to be different pages using Jquery so the page doesn't have to reload when switching between tabs. The problem I am having is that one of the tabs has a form to get information from the user, then after the user clicks the submit button, the info is sent to the database using php, causing the page to reload. Then depending on if the information was successfully sent to the database, there will be either "success" or "invalid" appended to the end of the URL. If the user submits this form, we want them to automatically come back to this tab on the reload, and I have tried doing this by using a script like this:
<script>
document.getElementById("baseTab").click();
window.onload = function() {
var theurl = document.location.href;
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
};
</script>
The baseTab is the tab we want to load whenever someone first loads the webpage, unless they have just submitted the form on the infoTab page. This code structure works on a simple test webpage I run on my computer, but when I try to push it to our project repository, it will only do the "baseTab".click, and not click the "infoTab" button even if theurl includes "success" or "invalid". I tried doing it without the window.onload(), but that doesn't work either. Also, if I do
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
else {
document.getElementById("baseTab").click();
}
then neither of the buttons get clicked. If their is an easier way to do this or you see where I am going wrong, any help would be appreciated. Thanks!

Angular Script not running when page is reopened

This is the first website I have ever made: http://moneyforkids.ca/old
And I am having a problem that I cannot seem to figure out.
If you visit the certificate page, you should be able to type your name onto the certificate. However, if you click on a different tab and then come back to the certificate tab, you are unable to type your name on the certificate. Instead you just see {{ name }} in the middle of it, which tells me the angular script is not running.
Here's my code that executes the angular script: http://moneyforkids.ca/old/js/index.js
EDIT:
I achieved the expected behaviour by changing the index.js file to :
$( function() {
$('nav a').on('click', function(e) { // User clicks nav link
e.preventDefault(); // Stop loading new link
var url = this.href; // Get value of href
$('nav a.current').removeClass('current'); // Clear current indicator
$(this).addClass('current'); // New current indicator
$('#content').remove();
$('#container').load(url + " #content").hide().fadeIn('slow'); // Load content with AJAX
if (url.slice(-13) == "practice.html") {
$.getScript("js/practice.js");
$.getScript("js/ui-spinner-behaviour.js");
} else if (url.slice(-16) == "certificate.html") {
$.getScript("js/certificate.js");
$.getScript("js/ui-spinner-behaviour.js");
$('#angular').remove(); //Remove any previous angular script tag
$('<script id="angular" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>').insertAfter('section'); // Reload the script
} else {
$.getScript("js/repeatPictures.js");
}
});
})
The updated .js file above fixed the website. You can see the new version of the website without the problem by removing the /old at end of website address (I can't post more than 2 links).
However, I don't understand why this fixes the problem!
it's not angular got confused it's your code. you are loading angular on click then you need to check on second click if angular is loaded then just don't load it again. If you notice when you click one time on Certificate tab there is no **{{name}}** but next time you click the tab again and then angular break down and you see **{{name}}**

ckEditor Image does not get saved after upload when image selected

I am trying to solve a riddle here. Imagine the following. The user uploads one image, which a minute later he wants to replace. Thus he clicks on the image and selects the upload button again, chooses another image and uploads it. In the editor this image is shown, but when he saves the change, the old image is shown again.
My guess is, that this is due to the fact that only the src-attribute gets updated, but not the data-cke-saved-src-attribute. The question now is: How do I change that?
I should also mention, that since I have a blur-handler, that is asking the user if he wants to discard the change. This fires whenever an dialog opens, which is why I am "refocusing" the editor using the following snippet:
CKEDITOR.on('dialogDefinition', function (e) {
var dialog = e.data.definition.dialog;
dialog.on('hide', function () {
dis.ckEditor.focusManager.hasFocus = true;
$('.cke').show();
});
});

How can I regain program control after <cfheader> opens a PDF file?

This is a ColdFusion 8 question.
I have a cfm page that has a button that onClick calls the following Javascript function located in the page header:
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
document.body.style.cursor = "wait";
window.location="_expiration_letters.cfm";
}
}
On the page that is called, a series of emails are generated, then a PDF report file is generated and displayed using these two lines:
<cfheader name="Content-disposition" value="attachment;filename=#fileName#">
<cfcontent type="application/pdf" file="#docPath#/#fileName#" deletefile="true">
Notice in the JS function that the cursor is changed to "wait". But the program control appears to get lost after the above cfheader call and so I can't find anywhere that I can reset the cursor back to:
document.body.style.cursor = "default";
Do you have ideas on where I can place this to turn off the cursor animation? I tried multiple places and it doesn't work. Once the cfheader and cfcontent calls happen, control of previous window and cursor are lost it appears.
You might try something like this above the cfheader.
<script>
document.body.style.cursor = "default";
</script>
<cfflush/>
The problem is that doing so might (probably will) screw up the cfheaders since cfflush is designed to flush partial results and will include the headers. But it's the only thing I can think of.
If I understand you correctly, you want to have a "wait" cursor whilst the PDF is prepped, and then return to a standard cursor after that.
Don't web browsers do this automatically when you're waiting for a requested document? IE: as soon as you do your window.location, whilst the document is loading, the cursors automatically changes to a "wait", and then once the doc is served, returns to an "auto".
This is what I see (when running code similar to yours). Is this not what you see?
Instead of changing the cursor, display a loading message using HTML/animated gif. When the PDF loads, it will replace the loading screen.
I would suggest having a hidden div containing your loading message, then use JavaScript to make it appear when needed.
Here's some JavaScript. This is how it would be done with jQuery.
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
$('#Loading').fadeIn(); //SHOW THE LOADING INDICATOR
$.post('PDFGenerator.cfm', function(returnData){ // AJAX POST, CALLBACK
//RETURN THE FILENAME OR LOCATION OF THE PDF
var FileName = $.trim(returnData); // TRIM THE RETURNED DATA
window.open("path_to_file/" + FileName,"_blank"); // NEW WINDOW
$('#Loading').fadeOut(); // HIDE THE LOADING INDICATOR
});
}
}

Javascript and file upload not working as expected with click()

I am creating a upload control in javascript and then using element.click() to bring up the file browser dialog.
function add(type) {
var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", "element-" + i);
var removebutton = document.createElement('a');
var removeimage = document.createElement('img');
removeimage.setAttribute("width", 15);
removeimage.setAttribute("height", 15);
removeimage.setAttribute("class", "removebutton");
removeimage.src = "/Content/Images/redx.png";
removebutton.appendChild(removeimage);
removebutton.setAttribute("id", "remove-" + i);
removebutton.setAttribute("onclick", "remove(" + i + "); return 0;");
var newfile = document.getElementById("uploadhere");
//newfile.appendChild(removebutton);
newfile.appendChild(element);
newfile.appendChild(removebutton);
element.click();
i++;
}
The file broswer dialog comes up as intended but after I select the submit on my form any files entered into the control dissapear.
If I click the "browse" I get the file broswer dialog but the file uploads correctly.
How can I add a file upload control to my form and have it display the file broswer dialog and still work as intended.
The "file" input type must include the attribute:
enctype="multipart/form-data"
when the post method is specified. See this: http://www.w3.org/TR/html4/interact/forms.html#edef-FORM
There may be other limitations also in this scenario, based on your question it sounds like you might be trying to do the upload in an AJAX call. Take a look at the answers here: https://stackoverflow.com/questions/3686917/post-to-php-with-enctype-multipart-form-data
Not sure from your code if you're using jQuery but if you are have you tried having an input form hidden and using clone() to create another one as needed?
Firefox is the only browser that allows this. Chrome, safari and opera do not allow it in the first place while IE is just fooling you that it can but won't actually submit the file selected this way.
I'd work around it by removing the .click() altogether and adding a new file input on the change event of previous input, this way it doesn't require 2 clicks for each new file (adding the input + then opening dialog). Example http://jsfiddle.net/APstw/1/
Also see jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?
As pointed out by Ann.L, you can expect weird behavior when trying to dynamically add an upload control to a page.
I remember that IE in particular will silently fail and won't post your data (you will see the filename posted in the request but no actual "byte array" corresponding to it).
Why don't you toggle the visibility of the upload field instead of creating it from scratch? This way, the page "owns" the control and chances are that your function will work. The only thing left to do is to refresh your container with the newly uploaded file.

Categories