How to hide filepath input file? - javascript

I need help with javascript and some html i guess.
I have a input file button where I can choose an image and upload it, but I want to remove the "filepath" name, or at least hide it. Is that possible to do, if so how do I do that?
I am able to hide the "no file chosen" by using
but I am not able to do the same for hiding the filepath.
I've tried to use that, and to use onclick and so one but nothing seems to work.

Use display none for the input type file, and include a button with id='x' in your page.
Add a eventlistener for click on button x and when it does trigger a onchange event for input type file. It works.

Just hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.
You can do this with the help of CSS & javascript
click here

Related

How to edit css when file is uploaded

I have a form where users can upload a file. The uploading and validation afterwards (filesize, filetype...) is done with php by submitting.
But I wonder how I could give the user a "visual feedback" that his file was "picked" immediately. So I don't need validation nor anything complex. I just want to either color the label green or rename the label of the upload field when the user has selected a file and clicked "Choose" in his browser.
How would I do that most easily?
On success assign one variable then use that variable to add class to the element.

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...

Can an HTML button be used to upload a file for use with the W3C File API?

I have a thumbnail interface mockup, and I would like to add the ability to upload an image. According to my mockup, the interface looks like this:
The intent was that the user would click on the "Add Icon" button, and a file dialog would pop up, just like the one that pops up when a file input is clicked. I would like the use the W3C's File API to handle the file upload asynchronously, and display the thumbnail in the gray area above the button once the upload is complete.
So, I'd like to upload a file without using a file input HTML element. I tried working with a hidden file input element and calling its click event handler with Javascript when the "Add Icon" button is clicked, but the call didn't do anything. I think security might have some reason to do with this.
Has anyone had any luck using an HTML button to upload a file before?
The trick I always do is wrapping the hidden file input into a label tag and then putting my custom input elements in the label tag. By defenition clicking on anything inside the label tag should trigger the input inside. No JavaScript needed at all!
<label>
<div>
My custom file input
</div>
<input type="file" id="file"/>
</label>
CSS: input{visibility:hidden;} Please note that you can't use display:none because then the element will not render. Still you can make the element width:0; height:0; to hide input element completely.
Fiddle
Using HTML file API is a little different. Read this article at Mozilla Developer Network to leran more.

Dynamically add extra input fields to html form

I am currently working on an html and php project. What I want to be able to do is to have an html with a file chooser for selecting a screenshot. Next to the file chooser will be a button/link for the user to be able to add another field. When the user clicks on the button or link I want another field to be added to the form underneath the first field, then the user can press the button/link again and another field is added all. Then when the form is submitted it gets the value of all the input fields including all the files to be uploaded that were added to the form.
What is the best method to achieve this, I assume javascript and/or jquery might be involved.
Thanks for any help you can provide.
UPDATE
I have found out how to do it but I was wondering instead how to make it fade in or make it smoothly slide the rest of the form down. I have added the fields inside a div and done javascript that makes the input field appear inside this div but it just appears, I want it to have a smooth fade in animation instead of it just flashing up on the screen. Below is the javascript that I have used to add the input field
<script>
function addFields()
{
document.getElementById("screenshotFields").innerHTML += "<input class=\"fields\" type=\"file\" name=\"filScreenshot[]\" />";
}
</script>
You want something that this tutorial calls 'Multiple File Upload Magic'.
The answer was from #ott comment to my question to another stackoverflow question

Categories