Button to show choose a file to upload dialog box - javascript

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.

Related

How to retain attached file when cancel browse another file

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.

IE9 file input triggering using Javascript

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

asp file upload control custom text

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.

How to change the button text of input type="file" element

Well I am developing a simple page in html, in which I am using input element type="file". By default we get a textbox and a button to browse a file from the system. Default label of this button is Browse. But I want to change the label of this button with some other name, like 'Open' or 'Select File'. But I don't have any idea how to accomplish this.
Does anyone know how to do this?
You have to use an image and overlay it on top of the button. then use Javascript to clone the file click onto the image. Does this even make sense? I'm a bit hungover.
Anyway, here's a ncie jQuery plugin http://www.appelsiini.net/projects/filestyle/demo.html
You can't. You could if you would use Flash or Java for handling file uploads.
you can not change file control "Browse" text, you can do this if you use jquery file upload...

Swapping file input elements with jQuery

I'm building a website where users can upload images. I don't want to use a flash plugin like SWFUpload or Uploadify, but I would like them to be able to upload multiple images at once. This would lead me to use a file input with the multiple="" attribute set. Problem with that is, the user can only select multiple images from the same directory on their computer.
To counter this, I had an idea that involves Javascript. I have a file input on my page with the multiple attribute set, and when the user selects some files with that file input, I then hide it with CSS. After that, I use Javascript to place a new file input in its place, which the user can use to upload more files from different directories. That way, when the user has all the images they want to upload, I have a form with multiple file inputs being sent which I can handle using PHP as my backend.
This is my relevant markup:
<div id="select_images">
<input type="file" name="files[]" multiple="multiple" />
</div>
And my Javascript (using the jQuery library):
$('#select_images input:first').change(function(){
// User selected some images to upload, hide this file input
$(this).css('right', '-10000px');
// Place a new file input to take its place
$(this).before('<input type="file" name="files[]" multiple="multiple" />');
});
At the moment, if I select some images to upload, jQuery correctly hides the current file input and places a new one where the old one was. So the markup is now this:
<div id="select_images">
<input type="file" multiple="multiple" name="files[]">
<input type="file" multiple="multiple" name="files[]" style="right: -10000px;">
</div>
This is where the problems are. If I select more files to upload using the new file input that was placed with jQuery, nothing happens. The new file input inserted using jQuery doesn't seem to accept the file, as Firebug isn't showing any file data relating to the input. Is there some sort of security in place stopping me from putting files in an input inserting into the DOM using Javascript?
Thanks!
This method works fine, BUT. Every time you create a new file input, you can actually start submitting that field right away. If you create a hidden iFrame on the page, the form can use the iFrame as a target and thus start the upload process immediately.
Meanwhile, you can create a new form element with a new file field inside it. Rinse and repeat!
As for your particular trouble, there isn't any security restriction. Are you basing the issue strictly off Firebug, or have you tried to POST the form to the server? There ARE security restrictions regarding javascript's ability to look at the value of a file input, and this can affect Firebug.

Categories