Get filename from input file in Javascript - javascript

I have noticed that bootstrap is able to parse out and display the top level filename from a file input field when the user selects a file.
<input type="file" id="exampleFile">
JSFiddle: http://jsfiddle.net/na4j7n6y/
My question: Is this functionality exposed for me to use in my own javascript code? Or do I have to parse out the filename once again using my own technique?
I have tried retrieving the filename like so:
$('#exampleFile').val()
// Resolves to 'C:\fakepath\FILENAME' instead of 'FILENAME'

Well, bootstrap is a framework based on html, css and javascript. The javascript part of this framework uses jQuery and not a own library. Then you could try to solve it using a regex with javascript/jquery, for sample:
var fullPath = $("#exampleFile").val();
var filename = fullPath.replace(/^.*[\\\/]/, '');
Take a look here:
http://jsfiddle.net/na4j7n6y/1/
How to get the file name from a full path using JavaScript?

Check this JSFiddle to reference the filepath displayed.
http://jsfiddle.net/67y9tpd4/
HTML
<div id="write"><button type="button" onclick="getAfilepath()">Print Filepath</button></div>
JS
function getAfilepath(){
var afilepath = document.getElementById("uploadFile").value;
document.getElementById("write").innerHTML=afilepath;
}

Related

How to use Javascript to get current file name and use as a variable in Pug/HTML template?

I would like to pass the file name to the tag in an html document. I would therefor like to grab it and put it in a variable. I am using Pug, so can use javascript before compiling to html.
This is obviously, obviously not correct code, but is the idea of what I need:
let title tag === filename.pug
I have tried this and it works in the browser, but it works off the url and I would like to do it off the OSX file path.
var filename = (location.pathname.substring(location.pathname.lastIndexOf("/") + 1)).replace('.html','');
document.getElementById("title").innerHTML = filename;

javascript read file object unknown id

Is it possible to use javascript File API to read a file object of unknown id?
I use a custom file upload form in which the code doesn't have an input element. It uses plupload.js API and I can't determine how to access to the contents of file object.
For example if the code had something like the line 1, I could access the contents of file object using the code of line 2
input type="file" id="data"
var finput = document.getElementById("data"); var f = finput.files[0];
I tried something like document.files[0] but it doesn't work. Do you know something similar?
Instead of document.files[0], try document.querySelectorAll('input[type="file"]')[0].
function demo(){
var inpts=document.querySelectorAll('input[type="file"]');
alert(inpts[0].className);
}
<input type="file" class="file_input_a"><br>
<input type="file" class="file_input_b"><br>
<input type="file" class="file_input_b"><br>
<button onclick="demo()">Demo</button>
The above example echo's the classname of file-input 0 (to simply show we have a reference to it).
From here on you want to grab (for example) first file (from the first found input-element):
var f = inpts[0].files[0];
PS: there is a lot of good related info in my answer linked here.

JavaScript: How to handle an UCS-2 File?

I have an Javascript (AngularJS) App, and I try to load an language-file, which is converted in "UCS-2 Little Endian".
I have to use this, and are not allowed to convert the file to UTF-8.
Now the problem is, that I can´t read this file in JavaScript.
// console.log(row);
��[�l�a�n�g�_�d�e�_�n�a�m�e�]�,�G�e�r�m�a�n�
Instead this row should be:
[lang_de_name],German
Is there any way to read the file without changing the file? I already tried encodeURIComponent() or escape(), which does not work.
Thank you very much.
Link: http://terenceyim.wordpress.com/tag/ucs2/
What I do in code now:
var csv = UTF8.decode(UTF8.encode(row))
Works.

Javascript: variable file from string

Hopefully this is a pretty simple question for those who know javascript but I couldn't figure it out. Basically I have a save file dialog box created with this:
<div>
<input type="file" id="file" onchange="loadFile(this)">
</div>
It is linked to the "loadfile" function shown below:
function loadFile(input) {
var file = input.files[0]
var url = file.urn || file.name;
ID3.loadTags(url, function() {showTags(url);}, {tags: ["title","artist","album","picture"],dataReader: FileAPIReader(file)});
}
I am trying to replace the line
var file = input.files[0]
to be a file from a string (specified path) instead of relying on the file browser dialog. I have tried something like this:
var file = files("song.mp3")
but the resulting function will not work. I am guessing that my variable file isn't of the right type. How do I get it to be the same type as the selected file from the file dialog box?
Thanks in advance!
PS:
I am trying to link my script to a path on the server not the client.
If you want to access data from a website, then use the XMLHttpRequest object instead of the Files API.

file path from input tags in javascript

Can I pick the file path from an input tag in javascript? For example:
<input id="file" type="file" onchange="getpath()" />
This can be done in some older browsers, but in correct implementations, the Javascript security model will prevent you from reading the path.
You can’t get at the full path to the file (which would reveal information about the structure of files on the visitor’s computer). Browsers instead generate a fake path that is exposed as the input’s value property. It looks like this (for a file named "file.ext"):
C:\fakepath\file.ext
You could get just the filename by splitting up the fake path like this:
input.onchange = function(){
var pathComponents = this.value.split('\\'),
fileName = pathComponents[pathComponents.length - 1];
alert(fileName);
};

Categories