##Your question
Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
Feedback
###Feedback ThisThis looks like a good approach - who needs the fakepath anyway??
I tested this code in Windows 10 Chrome, Firefox and Opera; Safari on Mac OS X, as well as FIrefox on Linux Mint. It appears to work in all except in Firefox on Linux Mint, where the output <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
Alternative approach
###Alternative approach
AnAn alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>##Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
###Feedback This looks like a good approach - who needs the fakepath anyway??
I tested this code in Windows 10 Chrome, Firefox and Opera; Safari on Mac OS X, as well as FIrefox on Linux Mint. It appears to work in all except in Firefox on Linux Mint, where the output <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
###Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
Feedback
This looks like a good approach - who needs the fakepath anyway??
I tested this code in Windows 10 Chrome, Firefox and Opera; Safari on Mac OS X, as well as FIrefox on Linux Mint. It appears to work in all except in Firefox on Linux Mint, where the output <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>##Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
###Feedback This looks like a good approach - who needs the fakepath anyway??
I tested this code in WinWindows 10 Chrome, Opera, MacOSFirefox and Opera; Safari on Mac OS X, as well as FFFIrefox on Linux Mint. It appears to work in all except in FFFirefox on Linux Mint, where the output <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
###Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>##Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
###Feedback This looks like a good approach - who needs the fakepath anyway??
I tested this code in Win Chrome, Opera, MacOS Safari, as well as FF on Linux Mint. It appears to work in all except in FF on Linux Mint, where the <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
###Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>##Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
###Feedback This looks like a good approach - who needs the fakepath anyway??
I tested this code in Windows 10 Chrome, Firefox and Opera; Safari on Mac OS X, as well as FIrefox on Linux Mint. It appears to work in all except in Firefox on Linux Mint, where the output <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
###Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>##Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
###Feedback This looks like a good approach - who needs the fakepath anyway??
I tested this code in Win Chrome, Opera, MacOS Safari, as well as FF on Linux Mint. It appears to work in all except in FF on Linux Mint, where the <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
###Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>###Downvote Perhaps this is too meta but it isn't obvious to me why this post deserves a downvote. While I understand that there is supposed to be some level of anonymity on these sites, I would really appreciate feedback on what reason(s) exist that caused this to get a downvote and what could be changed to reverse that action. Help not only yourself and me get our points back but also our community by improving this content!
##Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
###Feedback This looks like a good approach - who needs the fakepath anyway??
I tested this code in Win Chrome, Opera, MacOS Safari, as well as FF on Linux Mint. It appears to work in all except in FF on Linux Mint, where the <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
###Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>###Downvote Perhaps this is too meta but it isn't obvious to me why this post deserves a downvote. While I understand that there is supposed to be some level of anonymity on these sites, I would really appreciate feedback on what reason(s) exist that caused this to get a downvote and what could be changed to reverse that action. Help not only yourself and me get our points back but also our community by improving this content!
##Your question
Is there any downside to this approach I don't see yet ? If so, what would be a better approach to do this ?
I don't really think there is a downside to this approach. Below I outline an alternative approach to updating the text - it may not necessarily be better but possibly more robust.
###Feedback This looks like a good approach - who needs the fakepath anyway??
I tested this code in Win Chrome, Opera, MacOS Safari, as well as FF on Linux Mint. It appears to work in all except in FF on Linux Mint, where the <span> tag text was not updated correctly. I was able to update the code to use Element.innerHTML for setting the HTML correctly.
###Alternative approach
An alternate approach is to use String.split() on the file input value, splitting on \, then use Array.pop() to get the last item in the array. Expand the snippet below to see it in action.
In theory, this alternate approach should be quicker because it just uses string splitting and array access instead of a regular expression replacement... Here is a jsPerf test - so far it seems it is quicker to use the split() technique in FF and Edge on Windows but not Chrome...
var input = document.getElementById('input'),
button = document.getElementById('button'),
output = document.getElementById('output');
//route click event on styled button to the actual file input
button.addEventListener('click', function() {
input.click();
}, false);
//display the name of the selected file
input.addEventListener('change', function() {
console.log('val', input.value);
var parts = input.value.split('\\');
output.innerHTML = parts.pop();
}, false);input[type="file"] {
width: 1px;
height: 1px;
position: absolute;
top: -10px;
left: -10px;
}
button {
width: 200px;
height: 40px;
cursor: pointer;
}
button,
#output {
display: inline-block;
vertical-align: middle;
}<input type="file" id="input"> <br>
<button id="button">Upload image</button>
<span id="output"></span>