Trigger a file input to open via javascript - javascript

So I have an input, something like this:
<input type="file" id="file" />
I want to get the file open dialog to popup via javascript. I have tried things like this:
$('file').click();
(that's assuming I'm using something like prototype/mootools/jquery). However, this doesn't seem to do anything. Is there anyway I can trigger the click event for the file input without the user being forced to interact with the input directly?

I recall this is not possible due to it being a security feature. In fact, I'm pretty sure the button for the file browsing dialog does not even show up in the DOM (the field shows up, but not the button, which the browser renders automatically)

$('file').click()
This works (in Chrome 8). You just need to make sure it's not set to display: none;
An easy solution is to position it absolute and then set left to something like -1000px.

IIRC browsers don't allow this as a precaution mechanism. A script shouldn't be able to automatically upload a file in some way and tinkering with the File Open-dialog would be one of those ways.
Obviously this is bad in some situations...

As far as I know opening the file open dialog from javascript is blocked for security reasons.

Related

Bypassing The pop-up blocker for window.open() in javascript

I have a text file with some lines containing some key words. My exercise is to extract info from that file and create a html document inserting the liens in the text file with appropriate tags.
for example:
This is the text file:
This should be in a html tag with START as class name
THIS SHOULD BE IN A HTML TAG WITH CAPITALS AS CLASS NAME
This should be in a HTML tag with CODE as class name
Now writing a javascript program to insert those lines into HTML is very easy. I just used some string handling like this:
if(contents[i].indexOf(" CODE")!=-1){
w.document.write("<p class='code'>"+lines+"</p>");
}
I am writing all these into a new window.open object. The main problem is that pop-up blockers do not allow this functionality. So, is there any other way I can do this? I can't generate the html file physically, I need to generate it on the fly, so window.open is the only method I could think of. Are there any other ways I can accompolish this?
(I can bypass the pop up blocker by just using
w=window.open("somefile.html")
w.document.opne("somefile.html")
where somefile.html is any file. But I do not want to do it, it hardly seems a clean way.)
More over, For me to access the file, I have to host it on a server (I am currently using http-server offered by node for this) Is there any other alternative to this?
I do not want to use Jquery, I wish to accomplish all of this with vanilla javascript. But if there is a possibility of doing this with Jquery, please let me know.
Thank you very much :)
On principle, pop-up windows are blocked by all modern browsers. They'll ask you if you want to allow them, but otherwise they'll not allow them.
If it has to be another document, perhaps an iframe could be useful?
Here's a bunch of extra solutions:
Have a fake pop-up. Just a div with all the data which floats above your regular content. You can add an 'x' button to it for closing it and implement some drag-and-drop functionality. The visual effect is much the same, but the user can't treat it as an OS-level window.
Try to somehow integrate the content into the regular page. Either an iframe or just regular content. Modern design has passed the stage of needing pop-ups and other content outside of a single plane. Furthermore, on mobile it's unclear how pop-ups would work.
Open the content in a new tab. This is basically just using an <a> tag. You can put the content you wish to have in the fragment for the link, and the page you open can decode the fragment and show the info you want. Might not work with huge content.
Have a better flow for allowing pop-ups. Inform the user that your site needs pop-ups and make them disable it. One good way is to provide some button which triggers a pop-up, which will be blocked. Then inform them to tell the browser to allow the pop-up since most of them will show something about how the pop-up was blocked. Then you can show your regular pop-up without the risk of the user missing out on the data.

Masking URL for window.print()

So I've scoured the internet for a way to hide the url at the bottom of a page printed using window.print, and it seems the only way to do it is for the user to disable the option in their page settings.
Not ideal, I'm trying to hide the address to our serviceNOW instance from being printed on a form that will be given to our clients customers.
So with hiding it out of the question is there a way I can mask it to say something other than the actual url?
I'm not sure but I think solution 3 here is doing something like this
http://www.codeproject.com/Questions/424312/Can-anyone-help-me-to-hide-Header-Footer-and-Page
But I don't understand that at all.
Is it possible to fool the print dialog into thinking we are on a different page without actually redirecting?
btw I don't see it being useful for this solution but I cannot use jQuery (so many things would have been easier if I could) for some reason it will not work in our ServiceNOW instance.

Open browse window in IE on single click file input

I'm having some trouble to make the file input work the way I want it. The file element exists of 2 parts, the textfield and the browse button. In other browsers than IE clicking either of them opens a window where you can select your files. In IE however it only opens when I click the browse button. If I click the textfield next to it I have to doubleclick in order for the window to open.
Is there a way to fix this with javascript so a single click on the textfield will also open the window? I tried the following, but it didn't work. (code is much simplified from the real example)
Html:
<input id="file" name="file" type="file"/>
JS / jQuery:
$("#file").click(function(){
$(this).trigger("dblclick");
});
$("#file").dblclick(function(){
alert("Double");
});
Now the above code alerts the "Double" but doesn't open the window. Is there a way to fix this?
Thanks in advance.
Since the entire control is native to the browser (and are never exposed as text box plus button) you simply do not have access to methods/events that will allow you to invoke the upload button. I believe this is mainly to avoid sites tricking the user into uploading non-intended files.
If you can manage to take a little time to implement a workaround, this does a nice of job of creating a rather nice upload component thats easier to manage. I'm sure a quick google will list you many other examples on how to style the file upload component.
Just tested your code with JSFiddle on IE6 (http://jsfiddle.net/SUWRK/) and, from my understanding, it works as you're expecting ... The alert shows up on a single click event (please note that's it's tricky to catch the dblclick event in IE < 9 - see https://gist.github.com/399624).
Are you sure there's not something else going on with the larger code set?

Detect when user has selected a file for upload (without timers)

I would like to to create a 2-step file uploader:
Open dialog.
Select one file from computer.
I would like to eliminate the step where the user must submit the form, and instead do it automatically with JavaScript. Is there anyway to achieve it?
Thanks.
Setting an onChange event and checking for whether the ".value" of the upload field is "!= null" does the trick for me. However, accessing file upload fields programmatically is always a shaky issue, and things can change with future browser security updates.
If you want to be sure, use a flash based upload component like SWFUpload.

How to grey out the full browser window and display a form in the center?

Have you come across those websites that grey out the full browser window and show you a notification or ask you to fill in a survey .. etc? This used to happen with myspace, if you mistyped in the email or password the full browser window would grey out (it's transparent though, you still can see the contents of the page through it) and a the login controls would display in the center of the browser window with an error message above them telling you that you mistyped the email or password. Unfortunately they removed this from myspace, I want the same code for a website I'm working on and was trying to avoid reinventing the wheel, do you know of any source to find this code instead of writing the whole thing again? I assume this is mostly CSS, Javascript is only used for showing/hiding, am I right?
If you're thinking of using a JavaScript framework, jQuery has the Block UI plugin. Very easy to use and configure.
Demos here
You can also use only CSS and Javascript for this: Create a Modal Dialog Using CSS and Javascript and submodal
These are called 'modal' windows. To avoid reinventing the wheel, use existing libraries like JQuery. Googling 'jquery modal window' brings up lots of results that look like exactly what you want. You could either pick one of these if it does exactly what you want, or find one with good source to deconstruct.
If you prefer prototype.js, there's Prototype Window Class, doing what you want, see alert dialog sample.
If you are working in asp.net and want a quick and easy tool for this get the ajax toolkit. Then use the modal popup control. Here is the example on the AJAX PAGE

Categories

Resources