Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.
My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.
So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?
This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.
Yes, it's possible (in most browsers) via opacity. Here's a tutorial.
I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).
Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.
You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).
I'd rather avoid transparency tricks.
This worked for me (uses jQuery):
$("#upload-box").change(function(){
$("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
$("#upload-box").click();
});
And the HTML:
<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />
It creates a text input, and a hidden upload input, and patches (=routes) the click on the text input to the hidden file input.
When a file is selected, it will write back the name of the file in the text input, in line with what most users would expect from the interface.
Should work on FF, Chrome, IE9 and +. I didn't test it on IE8.
Here's a jsfiddle. Thank you for upvoting my answer if you like it.
You can do it without any security issues.
Just code that on onmouseenter will promote the zindex of the real upload button (you can use opacity on it or make it transparent) and then you will not need to trigger a click but just use the click from the user.
Related
I have created a chrome extension that gets my desired data-images into a external website file input (fileList) field.
How do I trigger the event of the fileList when the only listener I can see is 'Invalid' in Chrome Development tool?
This is the button I'm working with:
`<input type="file" multiple="" accept="image/gif,image/jpg,image/jpeg,image/pjpeg,image/png,image/x-png" aria-label="Add photos or drag and drop" data-testid="media-upload" name="images" class="thisClassChangesAllTheTime" autocomplete="off" id="inputfile">`
Unfortunately if I try something like:
$('#inputfile').click();
It will just bring up the prompt to find a new image and then my fileList images are lost once I hit add. I want to bypass the find image prompt and use the image in the fileList.
I have also tried $('#inputfile').change(); to no prevail, which I assume is because it's not a function. I've also tried the Javascript alternatives to jQuery (I know jQuery is old)
How would I find what event or handler to trigger and then how would I trigger that via code?
I'm happy with a Javascript or jQuery answer/guidance.
The site I'm trying to use this on, uses react, so I'm not sure if that effects the answer to the solution in what we target with js?
Any guidance/help to solve my mind numbing issue, would be warmly welcomed. 😊
I need a super-simple file manager (preferably in classic asp but not a deal breaker) that I can add to Tiny MCE v3.
It doesn't need to upload, show images or other media, just documents such as .pdf, .doc, etc.
I just need to allow the user to click a browse button beside a the link input box which will open the file browser window to the specified folder (always the same one), click the required file, the details of which will populate the input box.
I've seen a few as recommended elsewhere on Stack but these are either image/media only or I'm not bright enough to make them work properly.
Thanks in advance.
I forgot to update this question.
I found a TinyMCE/CKEditor plugin that really did the trick. It's called (surprisingly) PDW File Browser for TinyMCE and CKEditor and can be found at http://sourceforge.net/projects/pdwfilebrowser/.
It has a good range of different features and is really easy to modify (it has to be because it's me doing the modifications).
Definitely worth checking out.
When we are uploading a file in html basically we write
<input type="file" />
and this code give ChooseFile button, no file chosen
But what I want is to create a Hyperlink and on clicking the hyperlink for it to work like an input of type="file" type - eg:
<a href="#" >ChooseFile</a>
any suggestions?
i think this is help to you..
<!DOCTYPE html>
<html>
<body>
<p>Click on one of the text labels to toggle the related control:</p>
<div>
<a href='#UPLOAD' >Upload a file</a>
<input type='file' name='file1'
style='cursor:pointer; opacity:0.01; alpha(opacity=1); position:relative; z-index:200; left: -10em; margin:-0.3em;' />
</div>
</body>
</html>
Don't think that you can style an input=file button beyond a certain limit,
check these links
http://www.quirksmode.org/dom/inputfile.html
Style input type file?
Or you can try a ready made plugin to do the job for you
https://github.com/blueimp/jQuery-File-Upload
Try using an existing jquery plugin for uploading files, i recommend this one:http://blueimp.github.io/jQuery-File-Upload/
Your best bet is to use a well-documented trick that will ultimately involve hiding the file input element as a child of a div that is styled to meet your needs. I say this is well documented as it is a very FAQ here on SO, and is covered on a number of other sites and blog posts on the internet.
Do not use javascript to click your file input element. You will likely run into security restrictions put in place by browsers. Some browsers may not even allow this. Others such as IE, will throw a security error when/if you attempt to send the file via javascript after using javascript to click the file input element.
If you want to avoid re-inventing the wheel, you can use a pre-built library that handles the complexity of cross-browser file uploading for you. I recommend Fine Uploader. It is well supported, quite active, and evolving quickly. Full Disclosure: I am the primary maintainer of this library.
I am working on a site where there is some authentication that is triggering a popup like the image below. I have deleted all the JS and CSS using firebug and it still triggers the popup. Has anyone used a popup like this and how is it being generated so I can stop it.
I can't give out the link to the site so I know its hard for people to answer without the code but I'm hoping someone has implemented something like this popup and can put me in the right direction.
I feel like its a ghost popup right now :)
This is HTML5's validation. If you specified attribute type as email, HTML5 compliant browsers will validate the input as an email address.
You can turn these off by including attribute novalidate in your form tag, like so:
<form id="beh" novalidate>
Reference: https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
If it's doing it without any js/css it's using HTML5's input validation.
i want to show file upload dialog on click of a button thats not the part of input[type="file"] how can i do this?
Basically i want to stylize the file upload control of html.
Alternate way to style file inputs using JavaScript but no Flash:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
I'm pretty sure there is no way to do this for security reasons.
You may be able to do it using a Flash-based uploader like SWFUpload. It obviously needs Flash installed and functions in a slightly different way than normal file uploads.
two days ago i was dealing with the same thing. I spotted uploadify
it allows you to have custom button for upload and ability to style your progress bar. it makes an ajax call to a php script. it also has loads of options from restricting file types/sizes/etc.
pretty happy i found it. same as pekka said this one also uses a flash gateway to do this.
document.formname.file.click() works but not in Opera i am still searching the net to solve.