File upload with Ajax - not getting complete fileName

Question

It is quite a common question but I can't find an answer to it

I have a simple HTML with an input text box (type=file) and a submit button. On clicking the submit button, I call a js function where I try to get the complete path of the file

var data = $('#fileName').val();

the issue is I am not getting complete file path of the file I am uploading. I know due to security reasons chrome gives me a C:\\fakePath\\filename and firefox gives me only the fileName . But in case I need a complete path what shall I do?

PS: Further I will make an ajax call and give that file path to the back-end which needs it to read that file using FileReader

Answer 1

You cannot get the complete path! there is no way to do that!! Even though you are on an intranet and you have enough permissions.

A workaround for this is to have a textarea and ask the user to enter the complete path of the file.

Answer 2

In short you can't have the full name of a file once is loaded on server side, you will just have the file name and its content in a raw byte array (among other attributes). This is not a Java thing nor other server side technologies issue, is related to browser implementation (but it looks that IE6 may contain a flaw about this).

Not directly related to your question but caught my attention

PS: Further I will make an ajax call and give that file path to the back-end which needs it to read that file using FileReader

Usually, you can't handle a file upload using ajax because it can lead to security holes. Still, there are some browsers (like Chrome and Firefox) that allows you to send a file using XMLHttpRequest but that isn't allowed on some browsers (like IE8-) so you have to use an iframe in order to make the file ajax uploading work.

In order to avoid handling all these problems, I would advice you to use a third-party js library that handles the ajax file upload. An example is blueimp jQuery file upload that also has Java server side examples (DISCLAIMER: I do not work in this project nor I'm associated with blueimp in any way). Note that using this plugin requires that you have a mid knowledge on HTML/JavaScript/jQuery/Java Server Side so if you're a starter it may take you some time to make it work, but once it does is pretty good.

Answer 3

I dont know which technology you are using.. but you can always get file name once it is uploaded on server (Using php or .net )

your steps to upload should be like below:

1) Upload file to the server (ez /uploadedFiles/...filename 2) Create a method which will fetch file name from the uploaded path 3) simply insert file name in to the database (this will give you flexibility to change folder name of uploaded docs in future if required)

Generally filenames are not stored as it is . to avoid name conflict in future. So it is a advisable to always rename your filename by adding minutes & seconds after itsname.

If any doubts do ask.

Hope it helps.

Answer 4

Browsers block the filepath access on javascript for securit reasons.

The behavior makes sense, because the server doesn't have to know where the user stores the file on his computer, it is irrelevant to the upload process.