How to get full path of file using input type file in javascript?

Question

I want to implement an attachment feature for email, like Gmail has, using jquery+javascript.

So I use input type file to select the file - which gives only the name of file, not the full path of file where it is located. I want the full path of file so that I convert file into bytes then send ajax request to server with bytes of file. I used this:

<input type="file id="fileUpload">
var filePath=$('#fileUpload').val(); 

but the filePath var contains only name of selected file, not the full path. I searched it on net, but it seems that for security reasons browsers (FF,chrome) just give name of file.

Thank you.

Answer 1

You don't need it. Believe me.

Your best bet, Javaranch: File Upload How-to .

Answer 2

That is impossible. If this was possible, i could access any file on your hard drive by manipulating your upload field. Why would you need it, anyway?

Answer 3

As you already noted, many browsers just won't allow you to do this. That is 1) a Good Thing (security and whatnot), 2) the Correct Answer (there's no way to force them to give the full path, short of some exploit). I'm sorry that you don't like it, but that is unlikely to make the answer different.

On a more positive note, it might be possible using some Flash or Java applet to access local files (eg Uploadify), but then the user needs to permit its privilege elevation.

Edit: I checked what GMail does, and you probably want something completely different from your question: it's using a cleverly disguised iframe (no borders, same background, looks like part of the page), which contains a small form for file upload. Simplified:

<form id="main_mail_form">
  <input type="hidden" name="compose_mail_identifier" value="id_beef-cafe">
  <!-- buttons and previous form fields - subject, to, cc -->
  <iframe src="attachments?for_message=id_beef-cafe">
  <!-- note that we're passing      ^^^^^^^^^^^^ the same identifier here -->
  </iframe>
  <!-- other form fields and buttons -->
</form>

Inside the iframe:

<form id="attachment_mail_form">
  <input type="hidden" name="compose_mail_identifier" value="id_beef-cafe">
  <!-- ^^ note that this has the same value as the main form -->
  <input type="file">
  <!-- other form elements -->
</form>

When you add an attachment to the mail, you are only submitting the form inside the iframe. Google seems to match the attachments with the e-mails using some per-message-unique identifier (named compose_mail_identifier in the example). That way, the attachments and the message are handled by different forms, and only merged into an e-mail when you click "Send".

Answer 4

You won't be able to access the file in such a fashion as it breaks basic security rules that your browser enforces. A trick that I like to use is to create an iframe with no borders that houses an upload form. You should then be able to upload the file and post back to the parent window with the name of the file and some sort of id if you decide to insert a record of the attachment into a database. I use the iframe because it mimics the sort of "AJAX" like behaviour that you would like to achieve in modern web applications.

I created a similar email attachment solution a couple of days ago. It's not as simple as you would like it to be, so yeah the short answer is that you are going to have to put a bit more work and thought into it.