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.
Related
I have copied and created the app from the following website.
https://www.bpwebs.com/crud-operations-on-google-sheets-with-online-forms/
Now I want to add a button (which I did) but unable to make it work.
On click on this new button (named "Upload Files"- submit fires.... I want the following to happen when user click this button
-- Should not fire submit
-- should open a new window and open url with a parameter.
-- URL = "https://www.google.com"
-- parameter is the recid - let us assume recid has value 100046
-- dynamically generated URL -- to execute on click of this button would be "https://www.google.com?id=100046"
I am completely new to google sheets and app script. So bear with me for naïve. Please can anyone help me with this. Thanks to the SO community for making people life easier.
Maybe you are looking for:
Event.preventDefault()
window.opener.postMessage()
const url = 'https://script.google.com/macros/s/AKfycbwyTJsFDgeboCt3jcyKI6KQtZ6svIHPynaStM9AwvzCgCFmbds/exec';
const form = document.forms[0];
form.addEventListener('submit', function(e) {
e.preventDefault();
window.open(url + '?recid=' + form.recid.value);
});
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
I am using the Ember Uploader component to allow users to upload a .txt file.
This file has to be formatted in a very specific way, and the upload cannot be allowed if the file is not formatted correctly.
The component first reacts to the change event, which watches for a new file being selected.
This sets the property 'files' to the selected file, which causes the function filesDidChange to run.
In filesDidChange, the file is read and checked for formatting errors. If it finds errors, it tells the user to update the file and try again.
Everything works perfectly on the first attempt. The problem is that when you try to re-upload the edited file, the component does not recognise this as a change event- the alert("Hello World") doesn't fire.
I assume this is because the same file has been selected.
I've tried setting 'files' to null at the end of the filesDidChange function, but that has no effect. This makes sense, as the change event watches the element, rather than a property.
How can I get the change event to fire, even if the same file is selected to upload on the second attempt?
change: function(e) {
alert("Hello World");
var input = e.target;
var selectedFiles = input.files;
if (selectedFiles) {
this.set('files', selectedFiles);
}
},
filesDidChange: function(files) {
//Reads the text file using the FileReader API.
//Checks that the file is correcty formatted.
//Prevents the upload and displays an error message if the file format is wrong.
//Asks the user to fix the errors and try to upload the same file again.
}.observes('files'),
I have found a workable solution:
Step 1 is to wrap the input element in it's own form element. Ideally the form wrapper should have a unique ID.
<form id='file-upload'>
<input type='file' />
</form>
Then you can use jQuery to reset that form:
Ember.$("#single-upload")[0].reset();
The value of the file input becomes null, and so the same file can be uploaded again.
SCRIPT5: Access denied
jquery.min.js, line 3 char 3769
I'm getting this error by simple form submit only in IE
$("#icon_upl").click(function(){ //icon_upl is button which open dialog
$("[name=icon]").click();
});
$("[name=icon]").change(function() { //icon is hidden file input
$("[name=upload_icon]").submit();
});
I sending that form to hidden iframe which is at the same domain.
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;display:none;"></iframe>
<form name="upload_icon" action="upload_icon.php" method="post" enctype="multipart/form-data" target="upload_target">
submit input doesn't help
I dont get it cuz if i try to send another form that works fine
If you are triggering the select files dialog via JS then you will get an access denied error when submitting the form. IE does not allow this. You will have to ask user to click on input type file directly
More details here
https://github.com/valums/file-uploader/issues/118#issuecomment-1387612
You can try styling the input type file though
http://www.quirksmode.org/dom/inputfile.html
I had similar HTML and jQuery code and encountered the same issue (i.e. 'Access is denied.' JavaScript error in Internet Explorer), which I managed to resolve by taking pointers from this (great) answer.
In your instance:
Change the #icon_upl <button>/<input> to a <label> and make use of the tag's accessibility features by setting the for attribute on it to point to your <input name="icon" type="file"> element.This effectively makes your click() event handler redundant. However, clicking the <label> in Firefox does not seem to trigger the file <input> dialog so you'll need to perform a browser test and still have the click() event handler if the browser is Mozilla-based.
In order for it to work, you'll need to make sure that your file <input> is not hidden by setting its position to be absolute and moving it off-screen.
i have found an other way to do this ...
I have make test and i found it work after 2 or 3 click on the submit button.
i have try some solution but found this by my self.
this is only for ie.
note i dont use the jquery submit method because they handle the error.
function Submit() {
try {
$('#FormName')[0].submit();
} catch (e) {
setTimeout(function () { Submit(); }, 50);
}
}
ps. sorry for my bad english, this is not my first language.
You can make a direct event firing on hidden input field because you can't catch it. It is possible to bind event with it and trigger it via another.
for example:
// binding event to hidden field
$('input[name=icon]:hidden').on('click', function() {
alert('Hidden triggered');
});
// some button/ or else
// some_target is any valid selector you can use
$('some_target').on('click', function() {
$('input[name=icon]:hidden').click(); // triggering click on hidden field will alert 'Hidden triggered'
});
Note: But its not clear from your post that if you have already something like this or not.
It seems to be impossible
You cannot read the "value" of the element as it holds the filename.
You can't fire up the file selection menu via JS.
You can't fire submit of the file uploader control via JS.
from getting access is denied error on IE8
//Access Denied Issues is usually for IE.
var lblTrigger= document.getElementById('lblTrigger');
lblTrigger.onclick = function(){
var form = document.getElementById('form1');
form.fxSubmit();
}
var form = document.getElementById('form1'); //form with upload control
var upctrl = document.getElementById('file_1'); //file upload control
form.fxSubmit = function() {
var upctrl = document.getElementById('file_1'); //file upload control
if (upctrl.files){
var form = document.getElementById('form1');
form.submit();
}else{
document.body.submit = true;
}
}
function fxSubmit(){
if (document.body.submit){
var form = document.getElementById('form1');
setTimeout(function(){fxSubmit()},50);
form.submit();
return;
}
setTimeout(function(){fxSubmit()},1000);
}
setTimeout(function(){fxSubmit()},1000);
I have this javascript code:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
$(window).load(function()
{
$('input:-webkit-autofill').each(function()
{
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
It is designed to remove the background color of the webkit autofill background color in inputs.
However, it only works sometimes and doesn't work when I click on an input, or a button that executes jQuery async functions at around the same time that the page loads.
What is wrong with this code that makes it not work sometimes, but work other times? What must I adapt?
This is what I am doing: How do you disable browser Autocomplete on web form field / input tag?
But I want to keep autocomplete on, while removing the background. I need this, as the background goes over a background image in my text input, so you can't see it.
Is this what you're attempting? How do you disable browser Autocomplete on web form field / input tag?
if not--
Can you confirm that all the elements are being selected, and that the problem lies in the timing of the browser's autofill? What happens if you use the more common $.ready instead?