Input File Click Chrome - javascript

Ok so I have an input element of type file and id "test"
When I put in the address bar: javascript: document.getElementById("test").click() it brings up the open file dialog so the user can decide what to upload. However if this same exact line is inserted into the document or done in the console of chrome it does not bring up the open file dialog. In fact the console says that the click() function is undefined. Is there any way in chrome to do this?
Cause it seem to work fine for any of the other browsers

You should wrap file-input element to other (ex.:div):
HTTM:
<div>
<input type='file'>
<div>
CSS:
div{
height:1px;
overflow: hidden;
}
JS:
$('div input').click();
Good luck...

I had the same problem and managed to solve it(though I am using jQuery). I detailed the technique in another question
Jquery trigger file input
The idea was essentially to focus the file input before triggering the click programatically.

Related

protractor get element by name tag

Currently I am working with protractor and Selenium web Driver.
I have the following problem:
I have a html page, and I make protractor clicking a button. Then a window pops up. This window contains a text box with the Name "Description":
<input type="Text" name="Description" ... />
Now when I try the following:
element(by.css('[name="Description"]')).sendKeys("rabbababab");
The browser does nothing, but protractor does not throw an error. No text is typed into the TextBox. Unfortunatelly, the name is the only way to identfy the input-TextBox.
What am I doing wrong?
Selecting directly by name works as well:
element(by.name('Description')).sendKeys("rabbababab");
OK guys, ive found the issue.
It wasnt an alert, its just a div, and all other controls are locked for user Input. but the Dialog covers a TextBox, wich has the same css-properties. So protractor just writes into the covered TextBox and i couldnt see it...
The Problem is solved
Sometimes if that element is inside iframe then you have to switch to that iframe. Just check that is there any iframe or modal available?
otherwise your code seems correct.
There is an inbuilt prompt handler in protractor where you can identify it and then send the data into the input field that you want. Here's how -
browser.Alert.sendKeys("rabbababab");
Note: The pop up window should have an input that it can accept some data into it else you command will fail.
If the above solution doesn't work then try sending data by switching to the pop-up and then sending text to it. Here's how -
browser.driver.switchTo().alert().sendKeys('rabbababab');
If at all there are many prompts, then you can use window handles function to switch to the one that you want. Here's how -
browser.getAllWindowHandles().then(function(handles){
browser.switchTo().window(handles[1]).then(function(){ //change the array index based on your pop-up's count
element(by.css('[name="Description"]')).sendKeys("rabbababab");
});
});
Hope it helps.
Maybe you have multiple objects which have name="Description" in your application.
You can find this in Chrome:
Right-click on the object
Click on Inspect element
Press CTRL+F
Type [name="Description"] and see how many results it finds.
element(by.css('[name="Description"]'))
is the same as
$('[name="Description"]')
If you find more than one, then you can try the following:
1. Try a click on the field before sending keys to it
2.
// This will search for the element of input with the name="Description" attribute
$('input[name="Description"]').sendKeys('rabbababab');
3.
You can try to put the following line, before sending keys to it :
browser.waitForAngular(); // wait until the angular app loads
Let us know how it worked.
Try using this,
$('input [name=Description]').sendKeys("rabbababab");
or
element(by.css('input [name=Description]')).sendKeys("rabbababab");

Select URL for copying in mobile chrome

I've been trying around for some time and searched and searched for solutions with no results so far.
The problem:
I have an URL in a webpage that I want to select as a whole to copy it from a mobile browser.
For Firefox I'm using a readonly input of type text and with the click event listener I trigger select() on the input. That works like a charm on mobile FF.
For Safari there also is a workaround which even triggers the copy-dialog on click.
With Chrome I could not manage to achieve this.
There is a Chrome issue here which says that selecting from an input wich is readonly does not work (thats still true, tested that).
By using a Label:
<label id="fileLink" type="text" class="link fakeInput" />
, a method to select the text from here and
$('#fileLink').click(function() { markieren(this) });
, I was able to select the url with a click on it. But this will not trigger the copy-dialog. By holding onto the url to copy it, it will only select a part of it and then I have to manually select the whole url to copy it.
I can't imagine, that there is no workaround for this.
To be more clear: for FF I'm using in javascript:
$('#pFileLink').append('<input id="fileLink" type="text" class="link" readonly="readonly" />');
$('#fileLink').click(function() { this.select(); });
$('#fileLink').val(url)
Has anyone an idea how to solve this for mobile chrome?
What do you mean with "will not trigger the copy-dialog"? You can't access the clipboard in Chrome so far.
You can alert the link, use a promp or a "modal box" with a input type text (not readonly) with selected text so the user can copy it.

How to make IE recognise this .change in jquery

I'm writing a jquery/javascript application. Part of what I need is a file input, which I need to look the same across Firefox, Chrome, and (ugh) IE. What I've done is made the file input hidden and placed a text box on top of it. Then, I use jquery .click to make clicking the text box have the same effect as clicking the file input, and I use .change to make the contents of the file input show up in the text box. Works fine in Firefox and Chrome, but the horrible horrible people at Microsoft want to ruin my day.
If anybody has the solution, I would be oh so grateful. Thanks in advance!
<input type="text" id="fakefile">
<input type="file" id="realfile">
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').change(function(){
$('#fakefile').val($('#realfile').val());
});
});
It's not possible, you can do some hackyness and add a label to the file input and trigger the click on the label not the input but as soon as you try to submit the form it will simply fail in IE.
The way I solved the problem was to turn the file input opacity to 0 and absolutely position it over the styled element I want the user to think they are clicking. This way they are in fact clicking the file input even though it appears they are clicking my styled element.
Check this:
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').bind("change click", function(){
$('#fakefile').val($('#realfile').val());
});
});
jsfiddle: http://jsfiddle.net/deAf6/

Onclick select File is not working in chrome

i am trying to select file when user click on button but that is not working in chrome only
Here See this how i did that
$("#upllnk").click(function() {
$("#ufile").click();
});
Here is my html Code
Select File To Upload
<div style='display:none'><input type='file' name='ufile' id='ufile'/></div>
Reason for Putting input:file in div is to hide that element.
After Esailija's helpful comment, I downloaded a portable version of Google Chrome (8.0.552.215) and indeed it didn't work.
As Esailija suggested you can use the opacity workaround
<div style='opacity:0;'><input type='file' name='ufile' id='ufile'/></div>
^^^^^^^^^ setting the opacity to 0 "hides" the input element
Here's a working fiddle
Triggering a click via JavaScript on a file input triggers security errors (usually after trying to submit the form) and in general doesn't work like you'd expect. This is very prevalent in IE and early versions of Chrome and Firefox.
I've gotten around this problem in the past by wrapping the input in a label. That way, when the label is clicked, it will trigger the input.
.Foo input { visibility: hidden; }
<label class="Foo">Select File to Upload<input type="file" /></label>

How to remove text field from HTML file input

Normally, a file upload dialog is invoked by clicking the button created by <input type="file"/>. But then, I don't want the text field that comes with it. Is there a way to get rid of the text field? Or is there an alternative way to open the file upload dialog without using <input/>?
Add file input, and set its position to quite far away.
Add a button.
Set buttons onclick to $("#myFile").click();
:D
<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;">
<button onclick="$('#myFile').click();">Browse</button>
agree with alex
<style>
.file_wrap{
background:url(file.jpg);
overflow:hidden;
width:30px;
height:10px;
}
.file_wrap input{
opacity:0;
font-size:999px;
cursor:pointer;
}
</style>
<div class="file_wrap">
<input type="file" />
</div>
You can use a flash alternative. I have used swfUpload, with great success. Uploadify, is a similar alternative. Both of these have nice feature sets, including progress bars and multiple upload.
You could replace it with a flash-button as dustin stated or you could hide the button by css-placing your own button on top of the input element and open the select file box by a script.
Some examples here:
inputfile
Check out the http://www.uploadify.com/ jQuery plugin.
You can add your own button and position it under the browse button with CSS.
Then set the file input to have 0 opacity.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (no text input field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo.
Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.

Categories