Reading the name of a File with Javascript/jQuery

Question

Currently I am making a program in which works as a text editor. I have a section where you can rename the title, and when you save, it takes that document.getElementById('title').innerHTML and makes it the .txt name.

For example:

If the title div had the innerHTML of "Document", the file would be called "Document.txt".

My problem is that I want it to also upload a file and take its file name.

For example:

I uploaded a file called "Document.txt", and the function makes the title "Document". (I am using a .replace('.txt','') to make it not show in the title and a += '.txt' to make the file actually a .txt when saved.

Anyone know how to make the file name of the uploaded document using an <input type='file'> a string to be used elsewhere?

Here is some code to put it in perspective:

var id = function(id){return document.getElementById(id)};

function readText(that)
    {
        var reader = new FileReader();
        reader.onload = function(e)
            {  
                var output = e.target.result,
                    name = FILENAMEFIND();
                id('page').innerHTML = output;
                id('title').innerHTML = name;
            }
        reader.readAsText(that.files[0]);
    }

Possible duplicate of [Cant get value of input type="file"?](http://stackoverflow.com/questions/5903323/cant-get-value-of-input-type-file) — Luan Nico, Apr 09 '17 at 01:21
yes, you are correct, however it contains the ``C:\fakepath\`` which I don't want, any clue how to remove that? I guess just ``id('upfile').replace('C:\fakepath\','')`` would work, but will the file always be in C drive? any idea how to do that? — Finley Sherwood, Apr 09 '17 at 01:35

score 0 · Accepted Answer · answered Apr 09 '17 at 01:39

Ok, I figured it out myself:

var id = function(id){return document.getElementById(id)},
    input = id("upfile"),
    file = input.value.split("\\"),
    fileName = file[file.length-1];   // Take purely the file name
    id('title').innerHTML = fileName; // Outputted to title div

Reading the name of a File with Javascript/jQuery

1 Answers1