pf » Uploading Files Like GMail Attachments

Uploading Files Like GMail Attachments

web

Google's GMail has a nice way of allowing you to add multiple attachments to an email. Rather than showing you 10 file upload boxes at once, the user attaches a file, you can click a button to add another attachment. I had a client request this functionality in an app I am building for them today, and it was pretty easy to implement.

Here's the code:

<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>

And now here's the javascript function to add another input box:

var upload_number = 2;
function addFileInput() {
 	var d = document.createElement("div");
 	var file = document.createElement("input");
 	file.setAttribute("type", "file");
 	file.setAttribute("name", "attachment"+upload_number);
 	d.appendChild(file);
 	document.getElementById("moreUploads").appendChild(d);
 	upload_number++;
}

Google also does something else that is pretty slick in Gmail with their attachment uploads - they appear to upload the file using AJAX. So you can type your email while your files are uploading. Perhaps I'll look into doing that in a future blog entry.



Related Entries
44 people found this page useful, what do you think?

Trackback Address: 587/DB8454E19DD06382725E64921EE49EA9
On 10/06/2006 at 9:32:58 AM MDT CF Journal reader wrote:
1
...wow, this is right out of Coldfusion Developer's Journal. Did you copy-->Paste?

On 10/06/2006 at 9:54:16 AM MDT Pete Freitag wrote:
2
No, I wrote it myself, thanks.

A quick google search didn't turn up the article your referring to. Can you post a link?

I'm sure you will find that I didn't copy and paste the article!

On 10/06/2006 at 12:17:38 PM MDT William from Lagos wrote:
3
Thanks for your code snippet.

File upload via AJAX? Is that possible? I would love to have the code for that.

I read ColdFusion Developer Journal and I guess I didn't get to see this in any of the tutorials and articles.

On 10/10/2006 at 2:12:29 AM MDT Nick Tong wrote:
4
Cool - thanks. The AJAX file upload would be great - i'll keep an eye out for it.

Google brings back some good starting points: http://wapurl.co.uk/?NNM20W2

On 10/11/2006 at 2:34:34 PM MDT Jack Hoagland wrote:
5
I am trying to put together a form that files can be attached to and sent but I can't seem to get the files to send. Do I use standardized form tags or is there some specialized processing that has to take place on the server? I'm confused and frustrated about this file transfer thing! Thanks...

On 10/12/2006 at 7:48:23 AM MDT duncan wrote:
6
link to the CFDJ article is at: http://coldfusion.sys-con.com/read/279878.htm

On 11/07/2006 at 5:59:24 AM MST Alan wrote:
7
I added a link to remove some input box:

var upload_number = 2; function addFileInput() { var d = document.createElement("div"); var l = document.createElement("a"); var file = document.createElement("input"); file.setAttribute("type", "file"); file.setAttribute("name", "attachment"+upload_number); l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');"); l.appendChild(document.createTextNode("remove")); d.setAttribute("id", "f"+upload_number); d.appendChild(file); d.appendChild(l); document.getElementById("moreUploads").appendChild(d); upload_number++; }

function removeFileInput(i) { var elm = document.getElementById(i); document.getElementById("moreUploads").removeChild(elm); }

On 11/20/2006 at 12:56:38 PM MST Bruno wrote:
8
Great tip, thank you very much... Very useful stuff.

What if I wanted to limit the amount of new file input boxes to 9 for example?

On 11/20/2006 at 1:40:59 PM MST Pete Freitag wrote:
9
Bruno,

You could do that by adding a conditional in the addFileInput() function: if(upload_number > 9) { alert('sorry you can only upload 9 files'); }

On 11/29/2006 at 2:13:18 AM MST Anonymous wrote:
10
Hello, i have used the code above. I'd like to send the url of the files and not the actual file via email. I have this code (strHTMLBody &= "<b>Description</b>:" & moreUploadsLink & "<br />") I'd like it to say Description: then all the file url's from the boxes.

On 01/01/2007 at 5:18:17 PM MST Tobias wrote:
11
haha Journal reader you must be really bad reading your journals, check the dates and you will find that this entry was posted 3 days earlier than the source you´re talking about!

Thanks mate for your articles, and I would really look forward to the solution for the uploading of files while writing ;-) People say its impossible with other webbrowsers then firefox, but google can?!! =)

On 02/06/2007 at 1:46:38 AM MST babak wrote:
12
hello how can i reach to file stream of a added file control in this way in code behinde to save it in database

On 04/02/2007 at 1:59:40 AM MDT Abdul Raheem wrote:
13
Hi there, I saw your code today, tested it and done a small fix with Alan's code for 'Remove' option if used along with the conditional statement(by Pete Freitag) limiting max file uploads. I found that if we limit the no of files to say 3 and then removed any of one or more files and again tried to add another file, it will prompt an error saying only 3 files could be accepted wherein there are actually less than 3 files added. So I added a line to decrement the upload_number(file counter) by 1 whern ever a file is removed. The modified code is....

var upload_number = 2; function addFileInput() { if(upload_number > 3) { alert('sorry you can only upload 3 files'); exit(0); }

var d = document.createElement("div"); var l = document.createElement("a"); var file = document.createElement("input"); file.setAttribute("type", "file"); file.setAttribute("name", "attachment"+upload_number); l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');"); l.appendChild(document.createTextNode("Remove")); d.setAttribute("id", "f"+upload_number); d.appendChild(file); d.appendChild(l); document.getElementById("moreUploads").appendChild(d); upload_number++; }

function removeFileInput(i) { var elm = document.getElementById(i); document.getElementById("moreUploads").removeChild(elm); upload_number = upload_number - 1; // decrement the max file upload counter if the file is removed }

On 04/02/2007 at 10:07:26 AM MDT Edemilson Lima wrote:
14
AJAX can't upload files because Javascript doesn't have access to local filesystem. Only in Firefox is possible to access local files, but for security reasons it is disabled by default. The technique to upload files used by Google is using an hidden IFRAME to do the job. More information about this can be found at:

http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml

On 04/10/2007 at 8:03:37 AM MDT Kandace Inez wrote:
15
Menja ne predavaj ya tak hochu

On 04/18/2007 at 2:29:12 PM MDT Walter Vos wrote:
16
Hey Pete! Your script seems to be just what I've been looking for. Just one thing though, the attach another file link only appears after you've selected a file to upload. This makes sense when using the browse button to look for a file.

However, I'll be using this technique with a text field. With text fields you need fill out the field and press enter before the link appears. How can I change this?

On 05/08/2007 at 7:22:59 AM MDT mejo wrote:
17
Hey Pete! I love your script. Became very helpful for my site while I was struggling with something like this for about two days.

On 05/09/2007 at 12:22:35 AM MDT Jerard wrote:
18
Thanks Pete for this fabulous script

On 05/09/2007 at 12:19:53 PM MDT brad wrote:
19
I am using this, thanks it is great. But now when the form is submitted via email I get the file name but no attachment, what am I doing wrong?

On 06/01/2007 at 7:51:07 AM MDT Dmitry Arefyev wrote:
20
Client's side is good! But what about server side??? How happens process of uploading file ???

On 07/13/2007 at 2:30:48 AM MDT devarajulu wrote:
21
i can upload a more than 10 MB of file through the gmail id.

On 08/13/2007 at 10:48:20 AM MDT Simo wrote:
22
Thanks for this nice script!

On 08/14/2007 at 4:26:36 AM MDT Ricky wrote:
23
hii..i am looking for a skilled guy to help me out here....can anyone plz tell me how to remove the attachment..i m looking for innerhtml code not the dom code

On 10/12/2007 at 2:34:08 PM MDT dude spellings wrote:
24
hey - nice site! Browser a few articles, I found several things I liked. If you ever get a wild hair and want to to ajax-like file uploads ("fakejax", as I call it), lemme know and I can send you the code. I did it for a project at work, and have similar (though rough) code here: http://www.dudeandvero.com/sandbox/fileupload3.html

On 10/16/2007 at 10:38:54 AM MDT Christian wrote:
25
On 04/18/2007 at 2:29:12 PM MDT Walter Vos wrote: However, I'll be using this technique with a text field.

I'm in a similar situation. Any help in getting it to work would be greatly appreciated.

On 10/17/2007 at 9:32:09 PM MDT Tyler Evans wrote:
26
@Walter Vos: use "onblur" instead of "onchange" and the link should appear as soon as the text box loses focus.

On 12/11/2007 at 1:07:13 AM MST Vivek Kodati wrote:
27
Would this help me upload multiple files at the same time. I have a requirement where i need to upload around 50 files at the same time and send it to the server as a collection object from a jsp.

On 12/11/2007 at 1:04:43 PM MST ankit singhal wrote:
28
That isn't like gmail, in gmail we have a file window getting opened on click of Attach a file link ,not on click of any browse button , can any one help me please in achieving the same.

On 12/31/2007 at 7:53:30 AM MST rog wrote:
29
when you create the file input use this method:

file.click();

On 01/01/2008 at 2:30:22 AM MST ROG wrote:
30
var upload_number = 2; function addFileInput() { var d = document.createElement("div"); var file = document.createElement("input"); file.setAttribute("type", "file"); file.setAttribute("name", "attachment"+upload_number); d.appendChild(file); document.getElementById("moreUploads").appendChild(d); file.click();//this line will open the browse window upload_number++; }

the line "file.click();" will open the browse window but theres another problem. after this when you click the file input will go blank on the first click on the Submit button. on the second click on the submit the form will submitted but with a blank file input!!!! and that's my problem too.if you solv this problem email me at baliardo "at" gmail "dot" com

On 01/25/2008 at 1:15:52 PM MST crazynp wrote:
31
<script language="javascript" type="text/javascript"> var upload_number = 2; function addEmailInput() { var a = document.createElement("div"); var email_user = document.createElement("input"); email_user.setAttribute("type", "text"); email_user.setAttribute("name", "email_user"+upload_number); a.setAttribute("id", "e"+upload_number); a.appendChild(email_user); document.getElementById("emails").appendChild(a); var b = document.createElement("div"); var email_pass = document.createElement("input"); email_pass.setAttribute("type", "text"); email_pass.setAttribute("name", "email_pass"+upload_number); b.setAttribute("id", "e"+upload_number); b.appendChild(email_pass); document.getElementById("passes").appendChild(b); var c = document.createElement("div"); var email_use = document.createElement("input"); email_use.setAttribute("type", "text"); email_use.setAttribute("name", "email_use"+upload_number); c.setAttribute("id", "e"+upload_number); c.appendChild(email_use); document.getElementById("uses").appendChild(c); upload_number++; } </script>

Here is my code. Please guide me how to make remove option available here and how to post this data using php. Thanks in advance :)

On 02/20/2008 at 5:12:26 AM MST arun wrote:
32
How to access the files uploaded through these added files in the code behind or some where so I can manipulate them

On 03/03/2008 at 1:00:43 AM MST Thara K V wrote:
33
how to read the files uploaded like this using php

On 03/10/2008 at 5:29:16 PM MST thushara wrote:
34
Gmail uses an iframe for the file input box to transfer the file asynchronously. It uses javascript (NOT Ajax) to submit the iframe.

Ajax can't be used to upload files as file contents won't be serialized by Ajax.

An iframe is necessary to avoid reloading the whole page.

See here: http://paraviya.blogspot.com/2008/03/gmail-like-asynchronous-file-upload.html

On 03/10/2008 at 5:39:56 PM MST thushara wrote:
35
To Thara on "how to read files uploaded using php"

1. once you get the data to the php backend, you should see an array like array( name, tmp_name, error, size) Here, the tmp_name will be set to something like /tmp/php* - this is where php stores the file temporarily for the request. It has to be progammatically copied to a proper location from here.

hope this helps.

On 03/17/2008 at 9:50:24 PM MST merrin wrote:
36
i want to display the links we are uploading wit this program.. how to do it???

please help

On 03/19/2008 at 12:33:05 AM MST sumitra wrote:
37
this is applicable script thanks for its. but i did try to post the multiple file name at php file(script). i can,t did please i want to help i want to do that

On 03/19/2008 at 12:33:06 AM MST sumitra wrote:
38
this is applicable script thanks for its. but i did try to post the multiple file name at php file(script). i can,t did please i want to help i want to do that

On 03/25/2008 at 11:18:23 AM MST Dutch Rapley wrote:
39
I did make on small addition. I added a hidden field to the form track the number of attachments:

<input type="hidden" name="attachments" id="attachments" value="1" />

In the JavaScript function, I added the following line above upload_number++:

document.getElementById("attachments").value = upload_number;

That way, it makes it easier to loop through how many file fields there are in the submitted form. I can simply do a loop from 1 to #form.attachments# and then append the loop index to grab each one of the file fields.

On 03/26/2008 at 11:00:27 AM MST Sajith wrote:
40
Here is the zipped complete source code for that. http://www.sajithmr.com/upload-files-like-gmail/

On 03/27/2008 at 12:12:45 AM MST Khaleel wrote:
41
can any one provide me the code to display the uploaded file as attachment in struts 1.1

On 03/27/2008 at 12:13:56 AM MST Anonymous wrote:
42
can any one provide me the code to display the uploaded file as attachment using struts 1.1

On 03/27/2008 at 12:15:45 AM MST Anonymous wrote:
43
Please can any one provide me the code to display the uploaded file as attachment using Java Script or JSP or Struts 1.1???????????

On 03/27/2008 at 1:52:20 AM MST Alpha1 wrote:
44
I use the Abdul Raheem posted code with the remove button. I found a little BUG. For example, if you add 3 inputs, then remove the second, then add another. Now the last added input has the same name as the previous. This could cause errors at server side when getting the files by his names. The solution is to keep 2 variables count, one that is NOT decreases when attach new input and other that is decreased. And use first to create the input name.

On 03/27/2008 at 1:52:21 AM MST Alpha1 wrote:
45
I use the Abdul Raheem posted code with the remove button. I found a little BUG. For example, if you add 3 inputs, then remove the second, then add another. Now the last added input has the same name as the previous. This could cause errors at server side when getting the files by his names. The solution is to keep 2 variables count, one that is NOT decreases when attach new input and other that is decreased. And use first to create the input name.

On 03/27/2008 at 1:52:22 AM MST Alpha1 wrote:
46
I use the Abdul Raheem posted code with the remove button. I found a little BUG. For example, if you add 3 inputs, then remove the second, then add another. Now the last added input has the same name as the previous. This could cause errors at server side when getting the files by his names. The solution is to keep 2 variables count, one that is NOT decreases when attach new input and other that is decreased. And use first to create the input name.

On 03/27/2008 at 1:56:25 AM MST Alpha1 wrote:
47
For Struts file uploads use the Apache jakarta library called 'FileUpload': http://commons.apache.org/fileupload/index.html

On 03/27/2008 at 2:08:57 AM MST Alpha1 wrote:
48
For Struts file uploads use the Apache jakarta library called 'FileUpload': http://commons.apache.org/fileupload/index.html

On 03/27/2008 at 2:19:27 AM MST Alpha1 wrote:
49
For Struts file uploads use the Apache jakarta library called 'FileUpload': http://commons.apache.org/fileupload/index.html

On 03/27/2008 at 3:16:28 AM MST Alpha1 wrote:
50
For Struts file uploads use the Apache jakarta library called 'FileUpload': http://commons.apache.org/fileupload/index.html

On 03/31/2008 at 4:20:46 AM MST Anonymous wrote:
51
Please can any one provide me the code to display the file as attachment using Java Script or JSP or Struts 1.1???????????

On 04/01/2008 at 3:32:48 AM MST Anonymous wrote:
52
Please, can any one provide me the code to display the file as attachment using Struts 1.1???????????

On 04/03/2008 at 6:30:34 AM MST aparna wrote:
53
hiii, The code is really good.But i have a problem in uploading files.I am able to upload only one file.Multiple files are not being uploaded. Can any one help me plzzzzzzzzzz. advanced thanks.

On 05/09/2008 at 7:48:58 AM MDT dhanasekaran wrote:
54
please..let me know how to get the each file and insert in database...




  



Spell Checker by Foundeo





Subscribe to my RSS Feed: solosub RSS
Tags