I had a post here:
.change acting weird in IE9
However, I have run into a new incident regarding the form handling of file upload and was curious if anyone has run into this issue.
My original problem was that I could not get an onchange event to work and I thought perhaps it was an issue with my javascript, but I found that it has to do with the way that the form is being activated.
I have a file input
<input type="file" name="abc"/>
now I've done 2 things.
I've hidden the input and created a button (for better styling control) that activates the input.
<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>
and then the JS for the interaction between the two:
$("#mybutton").click(function() {
$("Input[type=file]").click()
};
and of course a submit for the form (i use parent in this example, but you in my actual code I use the form id).
$("input[type=file]").change(function() {
$(this).parent().submit();
});
When I click "mybutton" the expected result does occur my browse window opens and lets me choose a file from my computer. Also when I change the file in all browsers other than IE the onchange event is fired. Now if I unhide the form and manually click the "browse" button and choose a file the onchange event is fired. So basically the browser treats clicking the actual file button differently than doing a $("input[type=file]").click()
anyone know how to fix this?
As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.
The good news is that there is a way to bypass the security restriction from IE using a label :
Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
Disguise the label as a button using CSS.
The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.
If I am not much mistaken you can't change this as this is (was originally) meant to protect the privacy of users avoiding anyway to upload files without explicit user permission/action.
make sure your code is in $("document").ready(function(){... here..});
seems file inputs when wired up with .live("change", function(){}); dont quite work well
the other styling stuff is something else but the CSS isn't all that complicated - beautiful file upload
Related
I would like to be able to tell if a site lets you upload files. I can think of two main ways sites do it and ideally I'd like to be able to detect both:
Button
Drag & Drop
PhantomJS documentation has this example snippet:
var webPage = require('webpage');
var page = webPage.create();
page.uploadFile('input[name=image]', '/path/to/some/photo.jpg');
but it's not clear how I could figure out that input[name=image] actually supports uploading.
Currently, my crawlers are following all links and buttons on sites but I am not sure how to detect that "a file upload pop-up has been opened". The D&D case is even less clear to me. I need a solution for a single page and obviously I can then go and apply it to every page I pass.
UPDATE
Turns out most of the time this does the trick:
document.querySelector('input[type=file]').click()
However, D&D areas aren't always clickable and you can't always assume [ondrop] will be present. Sometimes, the drop listener is added in code:
object.addEventListener("drop", myScript);
How can I check for presence of such elements then?
You can check if a form has enctype="multipart/form-data" or not. or search for input with type=file in html page.
AFAIK the best approach to upload files with selenium is to send the file to be uploaded directly to element located by this CSS Selector input[type=file].
So in order to check if some web page supports file uploading you can by checking if that page contains input[type=file] element.
This element is normally not visible and not interactable by GUI so you can only check it's existence, not visibility etc.
Nothing can get you 100%, but i think 99% it works with input[type=file] unless user wasn't creating it at runtime using javascript.
Or you can check for form's enctype but also it isn't always works as there's a good chance that user compress and changes the file into base64, then there will be no need for enctype to be multipart/form-data.
So input[type=file] is the best way.
I have a problem to retain attached files in file input <input type="file"> after cancelled choose file again. Anyone have idea to solve this?
Thank you
This is the built-in behaviour of the browser when dealing with the <file> element. If you select a document, then click "Browse" again, but then click "Cancel" it clears the field.
Nothing you can do about it, other than maybe using a plugin for uploading files, (such as https://blueimp.github.io/jQuery-File-Upload/ for example) which allows the user to upload files using a different UI.
Instead of using an input type="file" html tag, is it possible to bring up a choose a file to upload dialog box by clicking a input type="button"? Then when a file is selected from the choose a file to upload dialog box, the file path gets inserted into a regular html input type="text" tag?
I've seem that gmail does something similar but not with buttons and text inputs, they simply have a link add file or something like that. When that link is clicked, it shows the select file(s) to upload by mail.google.com dialog box. When a file is clicked, the file name is shown on the screen.
How are they doing that?
<input type="file" style="display:none;" id="inputfile"/>
try this
Try this one. I think it is useful.. :)
I think most browsers have this locked down for security purposes. Buttons and text boxes can be manipulated via JavaScript. File input boxes cannot, and for good reason; imagine if a javascript could open a dialog, set the path to a sensitive file on your system, then simulate the button click to download the file!
By the way, if you are looking to style it, perhaps this would work: http://www.quirksmode.org/dom/inputfile.html
Check this fiddle: http://jsfiddle.net/A4BS7/1/
NOTE:
a) This may not work well on older browsers (mainly IE) that don't fire the change event on the file input.
b) For the upload to work as expected, you'll need to include the <input type="file"> element in your form. The text element can be used for displaying the selected file at best.
It is not possible to alter an input[type=file] as you like, it is a purely native form element.
Besides you won't be able to get the path to the file for security reasons. Old IE versions shows the path but it is not the case anymore with newer versions and you won't be able to do anything with the path on server-side anyway.
There are though some methods to style:
Styling File Upload / Select Input Control
Styling an input type="file"
Styling file inputs with CSS and the DOM
Have a look at plupload, I've used it many times to handle file uploading.
So I want to use a <asp:FileUpload> control to "upload" a picture.
I dont really upload the picture, I just want to get it's inputstream so I can change it to a byte array and place it in the database.
However when I add a <asp:FileUpload> it comes with a static button and text field. Thou I like the textfield, I want to change the text of the button because my site is full english and the button's text changes depending on.. well something with the language of the browser or OS.
So I searched on google for a while and fould some info about making a html control
<input type='button' style='visibility: hidden'> and make another button which activates the file button by using javascript.
So here's the problem, when I add runat=server to the hidden file button I can't "find" it anymore using the document.getElementById javascript function and thus can not get the inputstream or the file.
What i'm asking is if there isn't a simple way to change the text of a <asp:FileUpload> so I can still use that control. If not, could you please show me a way how I can get the hidden file button to work with code behind and get it's inputstream?
Have a look at blog post Styling an input type="file" by Peter-Paul Koch. You may try Ajax AsyncFileUpload control or use uploadify jQuery plug-ins too.
I know almost nothing about html and javascript. So pardon me if this is a silly question.
For a html input tag like this:
<input name="search1$btnSearch" id="search1_btnSearch" style="background-color: white;" type="submit" value="search"/>
What's gonna happen when this button is clicked?
I looked in all the .js files that are referenced by the page that contains this input tag, but I did not find any code that responds to it.
So how can I locate the code that responds to this button's click event?
By the way, I think the web site that contains this input tag is built with asp.net, because the pages have a .asxp extension.
Thanks.
This will likely submit a form to search something on the site.
Check the form tag in the html to see what file is referenced.
<form action="form_action.asp">
The action references the file.
It is used to submit a form created with the help of form tags and input elements.
What's gonna happen when this button is clicked?
Since it is a submit button, in the absence of any JS that overrides the normal functionality, it will submit the form.
I looked in all the .js files that are referenced by the page that contains this input tag, but I did not find any code that responds to it.
There might still be some.
So how can I locate the code that responds to this button's click event?
If it exists, it will likely show up if you turn on profiling in your JS debugger (make sure it is configured not to reset when you leave the page (which submitting the form will do)).
It submits the form it is in. This is HTML default and doesn't need Javascript.
Without being able to see the .js files associated with the code it is impossible to tell. But there are a few possibilities.
There is no JS attached and it simply submits the form to the server for processing.
There is JS attached to the input element itself, in which case you would look for code like $('#search1_btnSearch').click(function(){...
There is JS attached to the onsubmit event of the form itself, in which case you would just look for submit event handlers.
You can dig deeper into this code yourself by downloading the Firebug plugin for Firefox which allows you to easily browse and manipulate HTML, JS, CSS, and more.
Most probably (IF THERE IS ANY javascript) the JS event is binded to "search1_btnSearch". Use ctrl + f and search for "search1_btnSearch".
BTW: Why do you think that there is javascript involved ? what happens?
The standard behaviour without javascript is to submit the form, in which this submit button is embedded.
Nothing as far as I see
May be it is attached with a form that has some action defined and a method also. So that will decide about the action.