open file select dialog with javascript [duplicate] - javascript

I'd like to make a click event fire on an <input type="file"> tag programmatically.
Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.
I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.

I have been searching for solution to this whole day. And these are the conclusions that I have made:
For the security reasons Opera and Firefox don't allow to trigger file input.
The only convenient alternative is to create a "hidden" file input (using opacity, not "hidden" or "display: none"!) and afterwards create the button "below" it. In this way the button is seen but on user click it actually activates the file input.
Upload File

You cannot do that in all browsers, supposedly IE does allow it, but Mozilla and Opera do not.
When you compose a message in GMail, the 'attach files' feature is implemented one way for IE and any browser that supports this, and then implemented another way for Firefox and those browsers that do not.
I don't know why you cannot do it, but one thing that is a security risk, and which you are not allowed to do in any browser, is programmatically set the file name on the HTML File element.

You can fire click() on any browser but some browsers need the element to be visible and focused. Here's a jQuery example:
$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();
It works with the hide before the click() but I don't know if it works without calling the show method. Never tried this on Opera, I tested on IE/FF/Safari/Chrome and it works. I hope this will help.

THIS IS POSSIBLE:
Under FF4+, Opera ?, Chrome:
but:
inputElement.click() should be called from user action context! (not script execution context)
<input type="file" /> should be visible (inputElement.style.display !== 'none') (you can hide it with visibility or something other, but not "display" property)

just use a label tag, that way you can hide the input, and make it work through its related label
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

For those who understand that you have to overlay an invisible form over the link, but are too lazy to write, I wrote it for you. Well, for me, but might as well share. Comments are welcome.
HTML (Somewhere):
<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>
HTML (Somewhere you don't care about):
<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
</form>
</div>
JavaScript:
function pageY(el) {
var ot = 0;
while (el && el.offsetParent != el) {
ot += el.offsetTop ? el.offsetTop : 0;
el = el.offsetParent;
}
return ot;
}
function pageX(el) {
var ol = 0;
while (el && el.offsetParent != el) {
ol += el.offsetLeft ? el.offsetLeft : 0;
el = el.offsetParent;
}
return ol;
}
function fileMove() {
if (navigator.appName == "Microsoft Internet Explorer") {
return; // Don't need to do this in IE.
}
var link = document.getElementById("fileLink");
var form = document.getElementById("uploadForm");
var x = pageX(link);
var y = pageY(link);
form.style.position = 'absolute';
form.style.left = x + 'px';
form.style.top = y + 'px';
}
function fileBrowse() {
// This works in IE only. Doesn't do jack in FF. :(
var browseField = document.getElementById("uploadForm").file;
browseField.click();
}

Try this solution: http://code.google.com/p/upload-at-click/

If you want the click method to work on Chrome, Firefox, etc, apply the following style to your input file. It will be perfectly hidden, it's like you do a display: none;
#fileInput {
visibility: hidden;
position: absolute;
top: 0;
left: -5000px;
}
It's that simple, I tested it works!

$(document).one('mousemove', function() { $(element).trigger('click') } );
Worked for me when I ran into similar problem, it's a regular eRube Goldberg.

WORKING SOLUTION
Let me add to this old post, a working solution I used to use that works in probably 80% or more of all browsers both new and old.
The solution is complex yet simple. The first step is to make use of CSS and guise the input file type with "under-elements" that show through as it has an opacity of 0. The next step is to use JavaScript to update its label as needed.
HTML The ID's are simply inserted if you wanted a quick way to access a specific element, the classes however, are a must as they relate to the CSS that sets this whole process up
<div class="file-input wrapper">
<input id="inpFile0" type="file" class="file-input control" />
<div class="file-input content">
<label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
<input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
</div>
</div>
CSS Keep in mind, coloring and font-styles and such are totally your preference, if you use this basic CSS, you can always use after-end mark up to style as you please, this is shown in the jsFiddle listed at the end.
.file-test-area {
border: 1px solid;
margin: .5em;
padding: 1em;
}
.file-input {
cursor: pointer !important;
}
.file-input * {
cursor: pointer !important;
display: inline-block;
}
.file-input.wrapper {
display: inline-block;
font-size: 14px;
height: auto;
overflow: hidden;
position: relative;
width: auto;
}
.file-input.control {
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
height: 100%;
position: absolute;
text-align: right;
width: 100%;
z-index: 2;
}
.file-input.content {
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
.file-input.output {
background-color: #FFC;
font-size: .8em;
padding: .2em .2em .2em .4em;
text-align: center;
width: 10em;
}
.file-input.button {
border: none;
font-weight: bold;
margin-left: .25em;
padding: 0 .25em;
}
JavaScript Pure and true, however, some OLDER (retired) browsers may still have trouble with it (like Netscrape 2!)
var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
if (inp[i].type != 'file') continue;
inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
inp[i].onchange /*= inp[i].onmouseout*/ = function () {
this.relatedElement.innerHTML = this.value;
};
};
Working jsFiddle Example

It works :
For security reasons on Firefox and Opera, you can't fire the click on file input, but you can simulate with MouseEvents :
<script>
click=function(element){
if(element!=null){
try {element.click();}
catch(e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
element.dispatchEvent(evt);
}
}
};
</script>
<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

I know this is old, and all these solutions are hacks around browser security precautions with real value.
That said, as of today, fileInput.click() works in current Chrome (36.0.1985.125 m) and current Firefox ESR (24.7.0), but not in current IE (11.0.9600.17207). Overlaying a file field with opacity 0 on top of a button works, but I wanted a link element as the visible trigger, and hover underlining doesn't quite work in any browser. It flashes on then disappears, probably the browser thinking through whether hover styling actually applies or not.
But I did find a solution that works in all those browsers. I won't claim to have tested every version of every browser, or that I know it'll continue to work forever, but it appears to meet my needs now.
It's simple: Position the file input field offscreen (position: absolute; top: -5000px), put a label element around it, and trigger the click on the label, instead of the file field itself.
Note that the link does need to be scripted to call the click method of the label, it doesn't do that automatically, like when you click on text inside a label element. Apparently the link element captures the click, and it doesn't make it through to the label.
Note also that this doesn't provide a way to show the currently selected file, since the field is offscreen. I wanted to submit immediately when a file was selected, so that's not a problem for me, but you'll need a somewhat different approach if your situation is different.

JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/
popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popRightAway = function() {
document.getElementById('log').innerHTML += 'I am right away!<br />';
popFileSelector();
};
window.popWithDelay = function() {
document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
window.setTimeout(function() {
document.getElementById('log').innerHTML += 'I was delayed!<br />';
popFileSelector();
}, 1000);
};
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
</form>
<a onclick="popRightAway()" href="#">Pop Now</a>
<br />
<a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
<div id="log">Log: <br /></div>
</body>

Here is pure JavaScript solution to this problem. Works well across all browsers
<script>
function upload_image_init(){
var elem = document.getElementById('file');
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>

This code works for me. Is this what you are trying to do?
<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button id="addfiles" >Add files</button>
<script language="javascript" type="text/javascript">
$("#addfiles").click(function(){
$("#fileinput").click();
});
</script>

My solution for Safari with jQuery and jQuery-ui:
$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

There are ways to redirect events to the control but don't expect to be able to easily fire events to the fire control yourself as the browsers will try to block that for (good) security reasons.
If you only need the file dialog to show up when a user clicks something, let's say because you want better looking file upload buttons, then you might want to take a look at what Shaun Inman came up with.
I've been able to achieve keyboard triggering with creative shifting of focus in and out of the control between keydown, keypress & keyup events. YMMV.
My sincere advice is to leave this the alone, because this is a world of browser-incompatibility-pain. Minor browser updates may also block tricks without warning and you may have to keep reinventing hacks to keep it working.

I was researching this a while ago because I wanted to create a custom button that would open the file dialog and start the upload immediately. I just noticed something that might make this possible - firefox seems to open the dialog when you click anywhere on the upload. So the following might do it:
Create a file upload and a separate element containing an image that you want to use as the button
Arrange them to overlap and make the file element backgroud and border transparent so the button is the only thing visible
Add the javascript to make IE open the dialog when the button/file input is clicked
Use an onchange event to submit the form when a file is selected
This is only theoretical since I already used another method to solve the problem but it just might work.

I had a <input type="button"> tag hidden from view. What I did was attaching the "onClick" event to any visible component of any type such as a label. This was done using either Google Chrome's Developer Tools or Mozilla Firefox's Firebug using the right-click "edit HTML" command. In this event specify the following script or something similar:
If you have JQuery:
$('#id_of_component').click();
if not:
document.getElementById('id_of_component').click();
Thanks.

Hey this solution works.
for download we should be using MSBLOB
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
var fileName = invoiceNumberEntity + ".pdf";
var pdfDownload = document.createElement("a");
document.body.appendChild(pdfDownload);
AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
window.navigator.msSaveBlob(fileBlob, fileName);
} else { // for other browsers
var fileURL = window.URL.createObjectURL(fileBlob);
pdfDownload.href = fileURL;
pdfDownload.download = fileName;
pdfDownload.click();
}
});
};
For AngularJS or even for normal javascript.

This will now be possible in Firefox 4, with the caveat that it counts as a pop-up window and will therefore be blocked whenever a pop-up window would have been.

Here is solution that work for me:
CSS:
#uploadtruefield {
left: 225px;
opacity: 0;
position: absolute;
right: 0;
top: 266px;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
width: 270px;
z-index: 2;
}
.uploadmask {
background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
width:132px;
}
HTML with "small" JQuery help:
<div class="uploadmask">
<input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield" type="file" onchange="$('#uploadmaskfield').val(this.value)" >
Just be sure that maskfied is covered compeltly by true upload field.

You can do this as per answer from Open File Dialog box on <a> tag
<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple />
Upload

I found that if input(file) is outside form, then firing click event invokes file dialog.

Hopefully this helps someone - I spent 2 hours banging my head against it:
In IE8 or IE9, if you trigger opening a file input with javascript in any way at all (believe me I've tried them all), it won't let you submit the form using javascript, it will just silently fail.
Submitting the form via a regular submit button may work but calling form.submit(); will silently fail.
I had to resort to overlaying my select file button with a transparent file input which works.

This worked for me:
<script>
function sel_file() {
$("input[name=userfile]").trigger('click');
}
</script>
<input type="file" name="userfile" id="userfile" />
Click

it's not impossible:
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);
But somehow it works only if this is in a function which was called via a click-event.
So you might have following setup:
html:
<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">
JavaScript:
function openFileChooser() {
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function()
{
document.getElementById('input_img').dispatchEvent(evObj);
},100);
}

You can use
<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
$('#file_input').focus().trigger('click');
});
</script>

To do so you can click an invisible, pass-through element over the file input :
function simulateFileClick() {
const div = document.createElement("div")
div.style.visibility = "hidden"
div.style.position = "absolute"
div.style.width = "100%"
div.style.height = "100%"
div.style.pointerEvents = "none"
const fileInput = document.getElementById("fileInput") // or whatever selector you like
fileInput.style.position = "relative"
fileInput.appendChild(div)
const mouseEvent = new MouseEvent("click")
div.dispatchEvent(mouseEvent)
}

Related

HTML Elements inside Contenteditable?

I have a contenteditable tag, and I want my users to be able to type code into it. However, when I type into the contenteditable tag, my code shows up as text rather than an actual element. Is there a way for a user to create a full, working HTML element in a contenteditable box? I know it is possible for the client to insert code using javascript, but what about users who do not have access to javascript? How could users get code such as buttons inside a contenteditable box?
<p contenteditable="true">Try typing code in here as user, code will only be text...</p>
Is there a javascript way to accomplish this without JQUERY?
EDIT
I spent a long time searching for answers on Google, but nothing came up. The best solution I've gotten at this point has been #Dekel's comment on CKEditor. If there is another solution, I want to hear it. If there isn't, I'm sticking to CKEditor. I don't have much time, so I need a solution fast.
MORE EDIT =D
I recently developed my own answer to my question by looking at #Brandon's .replace answer (which only worked for client-coding, not user-coding) and modifying it to work with user-coding.
This isn't pretty, but you could make it work if you are looking to add HTML only. Otherwise an inline editor might work best.
var el = document.querySelector('p')
el.addEventListener('blur', function() {
var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
var html = this.innerHTML.replace(/&([^;]+);/g, (m, c) => map[c]);
this.innerHTML = html;
});
<p contenteditable="true">Try typing <b>code</b> in here as user, code will only be text...</p>
This answer is similar to #Brandon's idea, but is much more simple.
https://jsfiddle.net/azopqLe4/
<iframe width="100%" height="300" src="//jsfiddle.net/azopqLe4/embedded/js,html,result/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
function convertit() {
var convet = document.getElementById("convet");
var text = convet.innerHTML;
var newtext;
newtext = text.replace(/</g, "<").replace(/>/g, ">");
convet.innerHTML = newtext;
}
//this version runs onrightclick =D
<p contenteditable="true" oncontextmenu="convertit();" id="convet">
Type some code here, then right-click... =D
</p>
In the second snippet, I typed <b>Test</b>, right-clicked it, and it became Test! My answer works through simple array replacement methods, although it is frustrating and time-wasting to keep right-clicking all the time. To prevent the actual contextmenu from popping up, just add .preventDefault().
You can't insert code, but you can insert DOMElements with JS. No need for jQuery.
var element=document.createElement("button");
element.innerHTML="Hello";
document.getElementById("yourContentEditable").append(element);
The idea with this would be to have a button to prompt for the code and insert it. Something like this:
(It is very ugly and buggy but it's just an example I just wrote)
var editorSelection=null;
function openCodePopup() {
//Store cursor position before editor loses focus
editorSelection=getEditorSelection();
//Open the popup
document.querySelector("#codePopup").style.display="block";
var ta=document.querySelector("#userCode");
ta.value="";
ta.focus();
}
function closeCodePopup() {
document.querySelector("#codePopup").style.display="none";
}
function insertCode() {
var code=document.querySelector("#userCode").value;
closeCodePopup();
if(code=="") return;
insertIntoEditor(html2dom(code));
}
function getEditorSelection() {
//TODO make crossbrowser
//TODO (VERY IMPORTANT) validate if selection is whitin the editor
var sel=window.getSelection();
if(sel.rangeCount) return sel.getRangeAt(0);
return null;
}
function insertIntoEditor(dom) {
if(editorSelection) {
editorSelection.deleteContents();
editorSelection.insertNode(dom);
} else {
//Insert at the end
document.querySelector("#editor").append(dom);
}
}
function html2dom(code) {
//A lazy way to convert html to DOMElements, you can use jQuery or any other
var foo=document.createElement('div'); //or you could use an inline element
foo.contentEditable=false;
foo.innerHTML=code;
return foo;
}
#editor {
height: 180px;
overflow: auto;
border: 1px solid #ccc;
}
#toolbar {
position: relative;
}
#codePopup {
position: absolute;
left: 10px;
top: 15px;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
display: none;
}
#userCode {
display: block;
width: 200px;
height: 100px;
}
<div id="toolbar">
<button onclick="openCodePopup()"></></button>
<div id="codePopup">
<textarea id="userCode" placeholder="Type code here"></textarea>
<button onclick="insertCode()">Ok</button>
<button onclick="closeCodePopup()">Cancel</button>
</div>
</div>
<div contenteditable="true" id="editor"></div>
With the same idea you could create other options to convert element (example, text->link, etc.).

Twitter Bootstrap tags input doesn't remove placeholder when onfocus

I have been scratching my head since yesterday on this problem, which I cannot solve. I am a new starter to Twitter Bootstrap and everything was going well until yesterday.
I am using the latest JQuery v1.11.1 and Twitter Bootstrap v3.3.1. Yesterday I downloaded Bootstrap Tags Input, from here: http://timschlechter.github.io/bootstrap-tagsinput/examples/
The plugin works and I have changed the CSS styles to match my page layout but the problem I am having is that the placeholder attribute will not disappear when on focus. If I type in a tag and add a comma value the placeholder will show until I start typing and then it will disappear again.
I have tried using JQuery onfocus function to remove the attribute when onfocus but it doesn't do anything. What I want to achieve is that when onfocus the placeholder does not show at that point not even on blur.
My input field is demonstrated below:
<input type="text" name="customer_tags" id="customer_tags" value="" placeholder="Enter you tags" data-role="tagsinput" required />
two years later, but i found how to work around this issue. First, if you inspect the DOM , you will see a new input text, which inherits our placeholder text, but without the extra function onblur, onfocus that everybody mention before.
<div class="bootstrap-tagsinput">
<input placeholder="text inherited from our input" size="23" type="text">
</div>
Then, to fix this issue, you had to create a jquery function to point that input. Like this:
$('.bootstrap-tagsinput input').blur(function(){jQuery(this).attr('placeholder', '')})
pointing to element with the class "bootstrap-tagsinput" and then the "input" objects inside. You can add a .focus function too if you prefered. In my case, works when the user leave the object and the input tags look clean without placeholder.
HTML5 placeholder attribute will not disappear when you focus in the input tag... it will only disappear when you start typing. It is the default behavior.
You can see it # W3Schools as well...
Following code works in my case:
<input type="text" name="add_image_tags" id="add_image_tags" data-role="tagsinput"
class="form-control" placeholder="Enter tags" data-placeholder="Enter tags" value="" />
handlePlaceHolder(); //Call during page load
function handlePlaceHolder()
{
if($('#add_image_tags').val())
{
$('.bootstrap-tagsinput input').attr('placeholder', '');
}
else
{
$('.bootstrap-tagsinput input').attr('placeholder',$('#add_image_tags').attr('data-placeholder'));
}
}
$('#add_image_tags').on('itemRemoved', function(event) {
// event.item: contains the item
handlePlaceHolder();
});
$('#add_image_tags').on('itemAdded', function(event) {
// event.item: contains the item
handlePlaceHolder();
});
Try this, i hope it's working:
<form>
<div>
<label for="name" class="left-label">Your Name</label>
<input type="text" class="example-two" placeholder="Enter you tags" id="name" name="name">
</div>
</form>
CSS:
[placeholder]:focus::-webkit-input-placeholder {
transition: opacity 0.5s 0.5s ease;
opacity: 0;
}
.example-two:focus::-webkit-input-placeholder {
transition: text-indent 0.5s 0.5s ease;
text-indent: -100%;
opacity: 1;
}
body {
}
form {
display: inline-block;
margin-top: 20px;
}
label {
display: block;
text-align: left;
font: bold 0.8em Sans-Serif;
text-transform: uppercase;
}
.left-label {
float: left;
padding: 8px 5px 0 0;
}
input[type=text] {
padding: 5px;
text-indent: 0;
}
form div {
margin: 20px;
clear: both;
text-align: left;
}
JSFiddle
EDIT:
Working on IE too:
JSFiddle
That's how the plugin behaves. As soon as you hit "enter" or "comma" it creates a span tag (see image attached)and shift the input to the right. So now the input has no value and should show the placeholder.
In their docs it's mentioned [Search for confirmKeys]
Array of keycodes which will add a tag when typing in the input.
(default: [13, 188], which are ENTER and comma)
Change the confirmkeys to remove creation of tags when you type comma
Edit:
On your site I tried the below method in console and it worked.
$('input').tagsinput({
confirmKeys: [13]
});
I was able to do a quick fix using jquery. The behavior I wanted should do two things:
1) Remove placeholder while on page after I've focused and started typing. So I will run it on keyup.
$(document).on('keyup', '.bootstrap-tagsinput input', function(){
$(this).attr('placeholder', '')
})
2) If there are already labels in an input, then I don't obviously need a placeholder. I run this on page load.
$('.labels').each(function(){
var len = $(this).tagsinput('items');
if(len){
var $input = $($(this).prev().children('input').get(0));
$input.attr('placeholder', '');
}
})
In my case, after a little modification, it works fine.
$('#txtTimeSlot').on('change', function () {
var len = $(this).tagsinput('items').length;
if (len > 0) {
var $input = $($(this).prev().children('input').get(0));
$input.attr('placeholder', '');
} else {
var $input = $($(this).prev().children('input').get(0));
$input.attr('placeholder', $(this).attr('placeholder'));
}
});
for all who are still having this problem, just change the line in the javascript file:
from:
cancelConfirmKeysOnEmpty: true,
to
cancelConfirmKeysOnEmpty: false,
And thats all!

Why are the links and text disappearing from from this UL on my webpage?

Full disclosure, this is an assignment from an advanced JS class I'm taking. I've been trying to figure this out for a couple of weekends and it's driving me crazy! I'm far more familiar with jQuery than I am straight JS (which is one of the reasons I'm taking this class).
The webpage is supposed to take input from the user to create a <UL> list of links with some other strings associated that are related to the link. That part works just fine, what I can't figure out is why as soon as I'm done clicking on the Add Link button, the new link shows very briefly, then disappears! If I click the button very quickly, I can get several of them to show up, but as soon as I stop, all of them disappear.
I tried making a fiddle out of this, but clicking on the Add Link button gave me a POST error (which may be a clue to it's behavior?). If you cut & paste the code into an HTML file & run it, you'll see the behavior I'm describing.
I thought it had something to do with the init() function, so I tried running that at the bottom of the <body>, but that didn't make any difference. I also tried running it without an init, but couldn't figure out how to get the onclick listener initialized, even if it ran at the bottom of the <body>. I notice that even though I'm defining the favesList in global scope, it's still showing up as undefined after it should have been initialized with values (at least from my point of view). However, it looks like it's going out of scope instead which doesn't make sense to me. Console.log isn't providing me the reason why it's disappearing, or I haven't figured out a way to log the event.
I'm reasonably certain I'm missing a fundamental thing (like it's going out of scope for some reason?), so if someone could point out what that thing is I'd be grateful (I also don't need a definitive answer, just a nudge in the right direction, this is basically homework and I know I'm supposed to be figuring this out on my own, but I think a couple of Sundays of my time is giving it the college try).
Here's the code:
<!doctype html>
<html>
<head>
<title>Advanced JavaScript Project: Favorites and Tags</title>
<meta charset="utf-8">
<style>
body {
font-family: Helvetica, Ariel, sans-serif;
}
form {
display: table;
border-spacing: 5px;
width: 40%;
}
form p {
display: table-row;
}
form label {
display: table-cell;
text-align: right;
}
form input {
display: table-cell;
width: 95%;
}
span.comment {
font-size: 80%;
color: #777777;
}
span.tags {
font-size: 80%;
color: rgb(48, 99, 170);
}
#submit {
width: 20%;
}
</style>
<script>
window.onload = init;
var favesList;
console.log(favesList);
function init() {
//get submit button handle
var submit = document.getElementById("submit");
//add click handler to button to call method to add text to the list
submit.onclick = AddFavorite;
console.log("back in init");
}
function favorite(url, title, comment, tags){
console.log(this);
this.url = url;
this.title = title;
this.comment = comment;
this.tags = tags;
console.log(this);
}
function AddFavorite(){
var f = new favorite(
document.getElementById("url").value,
document.getElementById("title").value,
document.getElementById("comment").value,
document.getElementById("tags").value);
console.log(f);
favesList = document.getElementById("list");
console.log(favesList);
var node = document.createElement("LI");
var a = document.createElement('a');
a.appendChild(document.createTextNode(f.title));
a.href = f.url;
console.log(a);
node.appendChild(a);
node.appendChild(document.createTextNode(f.comment));
node.appendChild(document.createTextNode(f.tags));
console.log(node);
favesList.appendChild(node);
console.log(favesList);
}
</script>
</head>
<body>
<h1>Tag and save your favorites</h1>
<form id="form">
<fieldset>
<legend>Add a new favorite:</legend>
<label for="url">URL:</label>
<span><input id="url" type="url" placeholder="http://www.cnn.com" value="http://www.cnn.com"></span><br>
<label for="title">Title:</label>
<input id="title" type="text" value="CNN World News"><br>
<label for="comment">Comment:</label>
<input id="comment" type="textarea" value="Thoughts?"><br>
<label for="tags">Tags:</label>
<input id="tags" type="text" value="Enter keywords separated by commas"><br>
<input id="submit" type="submit" value="Add Link">
</fieldset>
</form>
<br>
<h1>List of favorites</h1>
<ul id="list"></ul>
</body>
</html>
You need to return false; as the last line in your AddFavorite() method, to stop the browser from processing the button and refreshing the page.

HTML how to remove text in FileUpload field?

When I have a file upload field,
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
</form>
http://jsfiddle.net/jakeaustin5574/6DzgU/
It automatically creates a text "No file chosen" and a "Browse" button.
I want to change or remove this "No file chosen" text.
Is there anyway to achieve this in css or Javascript?
Thanks
You can apply css rules like...
input[type=file]{
color:transparent;
}
First of all. You have to hide your input:
input#image{position:fixed;top:-100px;}
Secondly, you have to create alternative button with your skin:
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<button id="image_alt">Select image</button>
</form>
and the last step is to create a javascript script which link alternative button with original one:
document.getElementById('image_alt').addEventListener('click',function(){
document.getElementById('image').click();
});
Example Fiddle
You can set the value of the image input to "" using jQuery to remove the selected file:
$("#image").val("")
See this fiddle:
http://jsfiddle.net/nfvR9/1/
NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.
I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check this styling article
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
take a look of this fiddle:
its working for your needs.
FIDDLE - DEMO
this demo its a reference of this:
stackoverflow question LINK
From the autor:ampersandre
<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0); position: relative; top: -25px; left: -1px" />
</div>
JQuery:
function getFileName() {
var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
$("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
getFileName();
});
Demo:
http://jsfiddle.net/m44fp2yd/
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">
The No file chosen text is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selected and in IE you'll get a greyed out textbox with no value at all. This cannot be changed.
The alternative is to use a plugin (such as this) which gives you complete control over the styling of the file control.
It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosen text. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.
However, there are some hacks which can be used. For details, check out this link.
this text show by browser different browser show different message
chrome show=no file choosen
mozilla show=no file selected
and same as ie

Opening a javascript dialog box to store to the complete file location into a var

I need your help.
I would like to design a javascript function, such that when I call it, it will open up a dialog box asking me to navigate to the selected file, once I click on the "open" button, it will then save the file's path into a var.
How do you do this? I would NOT like to the input type="file" method, as I dont require that particular input to be on my page.
ie:
function getlocation() {
var x = popup the open file dialog box and let the user select a file
}
The only way to allow the user to select a file is to use an <input type="file" />1. You don't have to have this element visible, just on the page.
When a user selects a file, all you can get from it is its name. You cannot get its path. Also, note that file upload elements are asynchronous. You need to use the onchange event (callback) to get the name.
You can hide the upload element using display: none, and then just have another JavaScript function programmatically trigger it. (NOTE: This method doesn't work in Opera, and possibly other browsers. It was tested in Chrome, Firefox, and IE 8/9)
<style>
#getFile{
display: none;
}
</style>
<input type="file" id="getFile" />
<button id="openFile" type="button">Click Me</button>
<script>
var uploadElement = document.getElementById('getFile'),
uploadTrigger = document.getElementById('openFile'),
openFileUpload = function(){
uploadElement.click();
},
alertValue = function () {
alert(uploadElement.value);
};
if (window.addEventListener) {
uploadTrigger.addEventListener('click', openFileUpload);
uploadElement.addEventListener('change', alertValue);
} else {
uploadTrigger.attachEvent('onclick', openFileUpload);
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/rJA7n/3/show (Edit it at: http://jsfiddle.net/rJA7n/3/)
Another method that should work in most browsers (including Opera) is to make the file upload element "invisible" and put an element on top of it. So, when you click on what you think is a button, you're really clicking on the upload element. AJAX uploaders (like http://fineuploader.com/) use this method to allow you to "style" upload buttons.
<style>
#getFile{
width: 100px;
opacity: 0;
filter: alpha(opacity = 0);
}
#openFile{
display: inline;
margin-left: -100px;
background-color: red;
height: 30px;
width: 100px;
padding: 10px;
color: white;
text-align: center;
}
</style>
<input type="file" id="getFile" />
<div id="openFile">Click Me</div>
<script>
var uploadElement = document.getElementById('getFile'),
alertValue = function(){
alert(uploadElement.value);
};
if(window.addEventListener){
uploadElement.addEventListener('change', alertValue);
}
else{
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/cKGft/4/show/ (Edit it at: http://jsfiddle.net/cKGft/4/)
1 Well, you can use drag and drop if you want to be really fancy. I made a quick demo of that here: http://jsfiddle.net/S6BY8/2/show (edit it at: http://jsfiddle.net/S6BY8/2/)

Categories