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

122 people found this page useful, what do you think?

Trackbacks

Trackback Address: 587/DB8454E19DD06382725E64921EE49EA9

Comments

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

On 10/06/2006 at 11:54:16 AM EDT 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 2:17:38 PM EDT 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 4:12:29 AM EDT 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 4:34:34 PM EDT 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 9:48:23 AM EDT duncan wrote:
6
link to the CFDJ article is at: http://coldfusion.sys-con.com/read/279878.htm

On 11/07/2006 at 7:59:24 AM EST 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 2:56:38 PM EST 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 3:40:59 PM EST 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 4:13:18 AM EST 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 7:18:17 PM EST 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 3:46:38 AM EST 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 3:59:40 AM EDT 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 12:07:26 PM EDT 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 10:03:37 AM EDT Kandace Inez wrote:
15
Menja ne predavaj ya tak hochu

On 04/18/2007 at 4:29:12 PM EDT 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 9:22:59 AM EDT 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 2:22:35 AM EDT Jerard wrote:
18
Thanks Pete for this fabulous script

On 05/09/2007 at 2:19:53 PM EDT 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 9:51:07 AM EDT 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 4:30:48 AM EDT devarajulu wrote:
21
i can upload a more than 10 MB of file through the gmail id.

On 08/13/2007 at 12:48:20 PM EDT Simo wrote:
22
Thanks for this nice script!

On 08/14/2007 at 6:26:36 AM EDT 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 4:34:08 PM EDT 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 12:38:54 PM EDT 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 11:32:09 PM EDT 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 3:07:13 AM EST 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 3:04:43 PM EST 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 9:53:30 AM EST rog wrote:
29
when you create the file input use this method:

file.click();

On 01/01/2008 at 4:30:22 AM EST 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 3:15:52 PM EST 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 7:12:26 AM EST 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 3:00:43 AM EST Thara K V wrote:
33
how to read the files uploaded like this using php

On 03/10/2008 at 7:29:16 PM EDT 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 7:39:56 PM EDT 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 11:50:24 PM EDT 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 2:33:05 AM EDT 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 2:33:06 AM EDT 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 1:18:23 PM EDT 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 1:00:27 PM EDT 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 2:12:45 AM EDT 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 2:13:56 AM EDT 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 2:15:45 AM EDT 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 3:52:20 AM EDT 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 3:52:21 AM EDT 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 3:52:22 AM EDT 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 3:56:25 AM EDT 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 4:08:57 AM EDT 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 4:19:27 AM EDT 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 5:16:28 AM EDT 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 6:20:46 AM EDT 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 5:32:48 AM EDT 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 8:30:34 AM EDT 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 9:48:58 AM EDT dhanasekaran wrote:
54
please..let me know how to get the each file and insert in database...

On 05/19/2008 at 2:28:51 PM EDT vig0 wrote:
55
"provide me with the code..." "let me know..." Get off your butts and learn how to do the things you ask for! Pete merely gave an example of how to add multiple file upload fields to a form. You need to parse through the form post and upload the files and insert them into the database. There are tons of examples out there.

Pete, thanks for the example. Regards, vig0

On 06/02/2008 at 11:38:43 AM EDT Victoria wrote:
56
Any response to Walters comment above (#16). I am having the same issue when someone just types in the input field and presses enter, it adds the file that doesnt exist... >Walter: "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?"

Thanks,

On 06/05/2008 at 7:02:39 AM EDT Ravi wrote:
57
Hi All,

i have used above code in my application.i did attach more files using browse button and then clicked on upload i did get only first attached file.i didnt get more files on my action where is the problem? i am using rails frame work.

On 06/09/2008 at 3:29:25 AM EDT Nilesh wrote:
58
now i want how to attach these files to form.

On 06/17/2008 at 8:04:52 AM EDT Sandia wrote:
59
Hi Pete Freitag,

Thanks for the code, Excellent work..

Following code help all for further process.

<?

if(isset($_POST['submit'])){

if($_POST['uploadsNeeded']==0 || $_POST['uploadsNeeded']==1){ $uploadsNeeded = 2; }else{ $uploadsNeeded = $_POST['uploadsNeeded']; }

for($i = 0; $i < $uploadsNeeded; $i++){ $file_name = $_FILES['uploadFile'. $i]['name']; // strip file_name of slashes $file_name = stripslashes($file_name); $file_name = str_replace("'","",$file_name);

$uploaddir = "images/assets/".$_FILES['uploadFile'. $i]['name']; $copy = move_uploaded_file($_FILES['uploadFile'. $i]['tmp_name'], $uploaddir); // prompt if successfully copied if($copy){ echo "$file_name | uploaded sucessfully!<br>"; } }

}

?> <script>

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

}

</script> <form name="upload" method="post" enctype="multipart/form-data"> <input type="file" name="uploadFile1" id="uploadFile1" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" /> <div id="moreUploads"></div> <div id="moreUploadsLink" style="display:none;">&lta href="javascript:addFileInput();">Attach another File</a></div> <input type="hidden" id="uploadsNeeded" name="uploadsNeeded" value=""> <input type="submit" name="submit" value="submit" /> </form>

On 06/27/2008 at 12:49:41 AM EDT michaelest wrote:
60
There's a difference between Gmail IExplorer and Gmail Firefox. I needed something consistent between all browsers and after searching around, I extended the implementation listed here with ideas I found elsewhere and came up with a basic javascript, HTML and PHP files that allowed limited multiple file uploads and allowed the end user to delete files already added.

Check out http://www.estigoy.net/multifile for a working example and link to source files.

I couldn't have finished it without stumbling across the initial script on this page.

I'm just venturing into advanced javascript, so be kind with your comments/feedback, thanks.

On 07/22/2008 at 3:43:31 PM EDT Dinu wrote:
61
Hi all!

I stumbled upon this while searchinf on google for "gmail file upload". Good script!

Anywayz, I noticed that people have tried to count how many files are uploaded in different ways, but i think that simply checking $_FILES does the trick.

Also, you don't really need to have a counter for the field name, simply use 'attachment[]'.

On 07/30/2008 at 8:55:02 AM EDT Mayank Vats wrote:
62
I have been trying for the same think for the past couple of days. But it am not able to upload the files at the same time you are browsing it. Actually i want to make it exactly like google and I am trying it with php and javascript. Can you help in doing so?

On 11/19/2008 at 7:15:53 AM EST kunal wrote:
63
code is fine for multiple uploading but how can i insert into database. i write code for one upload and one insert file. any one guide me i am new to java

On 11/20/2008 at 3:22:58 AM EST vdks wrote:
64
code is fine for multiple uploading but I have to upload a sets of images at a time.ie before and after images. so, what I need is to show two uploading file fields one for before and one for after image.And once I have uploaded the after image ,the link "Attach another File" should be displayed and on clicking it the two uploading file fields should be displayed. COULD ANY ONE HELP. THANKS IN ADVANCE.

On 12/09/2008 at 4:36:20 AM EST dileep wrote:
65
can any one post code to cut copy and paste with cross-browser functionality. Thanks in advance

On 12/15/2008 at 10:27:37 AM EST Anonymous wrote:
66
can any body please send the code to cut copy and paste content on textarea. i need this functionality through buttons instead of pressing right click on the mouse. Thanx in advance.

On 01/14/2009 at 8:51:20 AM EST Pete Freitag wrote:
67
Thanks more your code is good work i want to all image original and resize it and insert it name only database plz help me

On 01/14/2009 at 9:04:23 AM EST Pete Freitag wrote:
68
Thanks more your code is good work i want to all image original and resize it and insert it name only database plz help me

On 01/25/2009 at 1:30:32 AM EST ExistenceGuest wrote:
69
i 'll try

On 03/16/2009 at 1:51:01 AM EDT matt wrote:
70
simply awesome.

On 03/19/2009 at 12:13:37 AM EDT rob wrote:
71
How do you obtain the values in attachments 2 and so on. I have an asp form and this code works fine. How do i obtain the data to process in the asp form.

On 07/23/2009 at 6:30:03 AM EDT Rahul wrote:
72
This guy is simply awesome. nice code. thnx a lot

On 08/04/2009 at 12:34:56 PM EDT Django Eijgensteijn wrote:
73
Perfect Code, thanks also for the useful comments.

He Noobs, Stop asking for help. If, like us, you found this page, it's the only help we give. Make it yourself.

Cheers.

On 08/27/2009 at 2:02:39 AM EDT arun wrote:
74
how to add valiadation in multiple upload files like restriction for maximum file size and file extension in the above(gmail attach file) code

thanks in advanced

On 08/27/2009 at 10:30:49 PM EDT James wrote:
75
It's actually a flash program that uploads the document. Pretty nifty though!

On 09/08/2009 at 1:37:30 AM EDT Ramesh wrote:
76
When we click on browse button one choose file window opens with File name, File of Types as fields and open cancel as buttons. How can i add more Files of types to that drop down. Sample example with code is appreciated

On 09/08/2009 at 6:33:25 AM EDT Ramesh wrote:
77
How to unzip a zip file using javascript

On 10/01/2009 at 5:43:23 PM EDT Raju Singh wrote:
78
plz help me ,

i want to code in c# for add google Map in our web page .

On 10/27/2009 at 5:27:28 AM EDT swapna wrote:
79
how to send the uploaded attachments through mail.anyone plz help me friends.

On 11/05/2009 at 11:55:20 AM EST suneel wrote:
80
Hi very very useful stuff... Can anybody here please tell me how i can save these selected files to a file server pls pls pls... it's very urgent

On 12/11/2009 at 9:32:03 PM EST Alcormcon wrote:
81
http://code.djangoproject.com/ticket/12352 zootube for free , wogcag, http://code.djangoproject.com/ticket/12353 zootube passes , junvva, http://code.djangoproject.com/ticket/12354 zootube porn , ovkb, http://code.djangoproject.com/ticket/12355 zootube similar , hiiacuy, http://code.djangoproject.com/ticket/12356 zootube video , lhmbkq,

On 12/12/2009 at 8:17:09 PM EST Boingenia wrote:
82
https://coral.ie.lehigh.edu/projects/wiki/ticket/14 zootube , xfyycx, https://coral.ie.lehigh.edu/projects/wiki/ticket/15 exclusive zootube , psslghk, https://coral.ie.lehigh.edu/projects/wiki/ticket/16 zootube 365 , dnmcdye, https://coral.ie.lehigh.edu/projects/wiki/ticket/17 zootube , jlsiimm, https://coral.ie.lehigh.edu/projects/wiki/ticket/18 exclusive zootube , oprsuj, https://dev.wifidog.org/ticket/678 zootube 365 , maqtbo, https://dev.wifidog.org/ticket/679 zootube , mhoofyp, https://dev.wifidog.org/ticket/680 exclusive zootube , pvqowvq, https://dev.wifidog.org/ticket/681 zootube 365 , xput,

On 12/14/2009 at 4:27:49 AM EST Alcormcon wrote:
83
https://coral.ie.lehigh.edu/projects/wiki/ticket/14 zootube 365 , ktwld, https://coral.ie.lehigh.edu/projects/wiki/ticket/15 zootube , mfclxn, https://coral.ie.lehigh.edu/projects/wiki/ticket/16 exclusive zootube , oabtl, https://coral.ie.lehigh.edu/projects/wiki/ticket/17 zootube 365 , cooij, https://coral.ie.lehigh.edu/projects/wiki/ticket/18 zootube , chtist, https://dev.wifidog.org/ticket/678 exclusive zootube , rhob, https://dev.wifidog.org/ticket/679 zootube 365 , xrwqme, https://dev.wifidog.org/ticket/680 zootube , avdf, https://dev.wifidog.org/ticket/681 exclusive zootube , cmmcdv,

On 12/15/2009 at 4:22:10 PM EST Boingenia wrote:
84
https://josm.openstreetmap.de/ticket/4151 zootube 365 , nhov,

On 12/19/2009 at 8:40:04 AM EST Karan wrote:
85
it s very help code.... but how can we send it to server using submit button using java script... can u help with some code? thanks

On 12/22/2009 at 12:34:10 AM EST Slalionia wrote:
86
Is it so important?, http://bannerforum.colostate.edu/default.aspx?g=posts&t=101 cheap redtube, rnpbmh, http://network.bestfriends.org/blogs/redtube_wife/archive/2009/12/19/redtube-video-redtube-beach.aspx redtube, swmax, http://redtube.onsugar.com/6408018 redtube, mrvqw, http://mises.org/Community/members/redtuage/default.aspx primary source redtube, ndkjgfw, http://network.bestfriends.org/blogs/redtube_wife/archive/2009/12/19/redtube-beach-free-redtube.aspx redtube, krxf,

On 01/19/2010 at 9:17:30 AM EST patrickkdub wrote:
87
Hello,

I have not looked at the code fragments posted very closely, but I am wondering if there is already enough there to allow gmail.com but block (or prevent the selection of) outgoing attachments. Reason I ask: Our corporate firewall blocks out gmail, because it seems it's one of the only services that IT has been unable to block out outgoing attachments. if this is a way to allow *.gmail.com but block out attachments, access will be enabled for the company users.

Best Regards, Patrick

On 01/22/2010 at 9:06:05 AM EST Dipanjan Moitra wrote:
88
I've modified the removeInput function a bit: function removeFileInput(i) { var elm = document.getElementById(i); document.getElementById("moreUploads").removeChild(elm); upload_number--; if(upload_number<2)upload_number=2; }

On 04/17/2010 at 5:55:58 AM EDT Anonymous wrote:
89
how to implement this using strust if u can help plz mail me on patra.abani@gmail.com

On 04/19/2010 at 6:48:47 AM EDT Raj wrote:
90
This thread was very helpful for me as it shows how to upload multiple files to attach was possible but you have given the code till how to upload multiple files as many are asking for storing into DB or any folder at the server side scripting i have done with that,,,, Thanks a lot once again

On 04/19/2010 at 6:54:54 AM EDT Raj wrote:
91
here please mention your own filename in the place of filename(its is folder name where all the files attached are stored);

Then all the other is the same just copy and paste your files are stored in the specified path or you can store them in the database as paths or what ever it might be

<?php $target_path = "filename/"; $target_path = $target_path . basename( $_FILES['attachment']['name']);

if(move_uploaded_file($_FILES['attachment']['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['attachment']['name']). " has been uploaded"; } else{ echo "There was an error uploading the file, please try again!"; }

$count=count($_FILES)-1; for($i=2;$i<=$count;$i++){ $target_path = $target_path . basename( $_FILES['attachment'.$i]['name']); if(move_uploaded_file($_FILES['attachment'.$i]['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['attachment'.$i]['name']). " has been uploaded"; } else{ echo "There was an error uploading the file, please try again!"; } }

On 05/13/2010 at 8:27:33 AM EDT sunil wrote:
92
thank you for such an important thread.

On 06/16/2010 at 4:40:40 PM EDT rohit wrote:
93
Hi, i want to restrict the file size during uploading through client side. i am using following code : var oas = new ActiveXObject ('Scripting.FileSystemObject'); var d = document.getElementById("NewFile").value; var e = oas.getFile(d); var f = e.size;

but i get the "utomation server can’t be create object" exception.

Do you know any solution for this exception ?know any other solution ?

Thanks

alert(f + " bytes");

On 07/01/2010 at 4:15:06 AM EDT Muthu wrote:
94
HI Guys

Really helpful tips .. Thanks a Lot.. Cheerss.....

On 07/28/2010 at 5:47:23 PM EDT saddam aizaz wrote:
95
plz tell me how to create gmail

On 07/30/2010 at 6:10:34 PM EDT Jorge wrote:
96
I've been trying to use this script on my .jsp (html) page, and I just can't seem to get the form to post the appropriate parameters.

I can get it to function according to the demo, add divs, create file inputs, etc, but once I send the form it won't post the files, but the first one.

How can I get the other files to show up?

On 08/02/2010 at 7:39:05 AM EDT vetri wrote:
97
Hi am able to upload only one file,though am selecting many file using the attach another link..

please help..

On 08/29/2010 at 6:10:16 AM EDT GeorgeB wrote:
98
My solution demonstrated on page link below. Works on both IE and FireFox. Eliminates attach file link, instead instantly displays the file names and a new blank input box. Includes "remove" link next to each file name.

http://fast.info/gmail_style_email_file_attachments_using_javascript.htm

G.

On 11/03/2010 at 2:07:17 PM EDT S. Saravanan wrote:
99
Thank You!

Your information Useful for me!

On 12/04/2010 at 1:03:14 AM EST bob wrote:
100
im a newbie.how do i use this stuff

On 02/07/2011 at 2:52:32 AM EST madhuri wrote:
101
Hi all,

i m searching the java script for restricting the size of attachments while sending the mail. can you help me out????

thank u.

On 02/16/2011 at 6:08:32 PM EST Discount Boat Covers wrote:
102
Get sun protection with a high quality bimini top. Huge selection of colors and sizes for numerous boat manufacturers including sea ray, bayliner and more.

On 02/24/2011 at 2:39:51 AM EST diceleseo wrote:
103
thanks for this tips

On 03/01/2011 at 4:50:43 PM EST mansoor wrote:
104
hi all,

thanks for sharing stuff, its very useful. Can anybody tell me how rename "Choose File" and "No file Choosen" names. where i have modified ?

On 03/10/2011 at 2:16:05 AM EST vinod wrote:
105
help me to check validation 1) if empty field means it should display alert message 2) if uploading file exist in server means it should display file already exist , Thanks in advance

On 04/16/2011 at 10:56:13 AM EDT Anonymous wrote:
106
BHART'S LATEST LECTURES . GO N DNLOD WWW.BHARAT.HECK.IN

On 04/19/2011 at 4:18:52 AM EDT George Bacon wrote:
107
My solution works on both IE and FireFox. Eliminates attach file link, instead instantly displays the file names and a new blank input box. Includes "remove" link next to each file name.

Gmail style file attachments using Javascript:

http://fast.info/attach

G.

On 04/19/2011 at 4:19:22 AM EDT George Bacon wrote:
108
My solution works on both IE and FireFox. Eliminates attach file link, instead instantly displays the file names and a new blank input box. Includes "remove" link next to each file name.

Gmail style file attachments using Javascript:

http://fast.info/attach

G.

On 05/01/2011 at 11:52:44 PM EDT beny m wrote:
109
Hello.. my name is Beny. I from Borneo island. thanks Pete for your script. I like it's. come back to my site for any time.It's www.talawang.blogspot.com

On 06/13/2011 at 6:44:23 AM EDT srikanth wrote:
110
please some one send me code for attaching file like gmail where we drag and drop the file which is automatically attached..

On 06/29/2011 at 4:31:39 AM EDT Hitesh Shapariya wrote:
111
hi,

here what i m doing is uploading file like gmail using javascript.. and i need to upload it upto 3 files....

can anybody help me out?

here is my code....

var upload_number =2;

function addFileInput() { var d = document.createElement("div"); var file = document.createElement("input"); file.setAttribute("type", "file"); file.setAttribute("name", "images[]"); file.setAttribute("id", "upload"+upload_number); //alert(file); d.appendChild(file); document.getElementById("moreUploads").appendChild(d); upload_number++; }

thanks..

On 07/08/2011 at 12:36:17 AM EDT centos wrote:
112
Awesome. It almost cover all issues related to file upload with add more features. While talking in my case i need to do the multiple file upload with add more and remove particular child note. Lets make it clear with an example. I have a product attribute color so i need to upload files for the same. But we might have more than one attribute in product say fabric so we also need to upload files for fabric. So as whole i need add more feature for attribute inside which i need add more feature for file upload for particular attribute. If somebody understand what my problem is then please help me. Thanks in advance.

On 08/08/2011 at 8:43:39 PM EDT Shohel Bhuyan wrote:
113
Thanks to all. Welcome to www.sweetdreambd.com. I did add this script here.

On 08/24/2011 at 7:44:55 AM EDT kals wrote:
114
asum code.i use thisin my application.

On 09/01/2011 at 4:34:25 PM EDT Anonymous wrote:
115
Awesome Dude Thanks a lot for the Script.

On 10/19/2011 at 4:52:58 PM EDT Satish wrote:
116
I have created something like below to simulate Gmail file attachment for Internet Explorer (IE). I tested in IE 8. I took ideas from searching for various techniques. Hope this will be helpful for someone look for this type of solution. Since HTML is escaped, please replace the tags for less-than (~LT~) and greater-than (~GT~) accordingly.

========= ~LT~html~GT~ ~LT~head~GT~ ~LT~title~GT~Test~LT~/title~GT~

~LT~script~GT~ var i = 0; function addFileInputField() { var fileDiv = document.getElementById("fileDiv"); var fileElementName = 'files' + i; var fileInputDivName = 'fileInputDiv' + i; var div = document.createElement('~LT~div id="' + fileInputDivName + '" style="display: block; width: 120px; height: 25px; overflow: hidden;"~GT~'); var a = document.createElement('~LT~a class="link" href="javascript:void(0)"~GT~'); a.appendChild(document.createTextNode("Attach Document")); var f = document.createElement('~LT~input type="file" id="' + fileElementName + '" name="' + fileElementName + '" class="file"~GT~'); div.appendChild(a); div.appendChild(f); fileDiv.appendChild(div); var fileInput = document.getElementById(fileElementName); fileInput.onchange = function() { var fileTextDiv = document.getElementById("fileTextDiv"); var fileInputDiv = document.getElementById(fileInputDivName); fileInputDiv.style.visibility = "hidden"; fileInputDiv.style.display = "none"; var d = document.createElement('~LT~div id="fileTextDiv' + i + "'~GT~"); var a2 = document.createElement('a'); a2.href = 'javascript:removeFileInputField(' + i + ')'; a2.appendChild(document.createTextNode('Remove')); var s = document.createElement('span'); s.appendChild(document.createTextNode(fileInput.value + ' '));

d.appendChild(s); d.appendChild(a2); fileDiv.appendChild(d); i++; addFileInputField(); } }

function removeFileInputField(index) { var fileDiv = document.getElementById("fileDiv"); var fileInputDiv = document.getElementById("fileInputDiv" + index); var fileTextDiv = document.getElementById("fileTextDiv" + index); fileDiv.removeChild(fileTextDiv); fileDiv.removeChild(fileInputDiv); }

~LT~/script~GT~

~LT~style type="text/css"~GT~ a.link { /*width: 90px;*/ height: 20px; position: relative; cursor: pointer; } .file { cursor: pointer; font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px; left: -20px; } ~LT~/style~GT~ ~LT~head~GT~

~LT~body onload="addFileInputField()"~GT~ ~LT~form name="testForm" enctype="multipart/form-data" method="post" action="~LT~%=request.getContextPath()%~GT~/save.do?dispatch=save"~GT~ ~LT~br/~GT~ ~LT~div id="fileDiv"~GT~~LT~/div~GT~ ~LT~br/~GT~ ~LT~/form~GT~ ~LT~input type="button" value="Submit" onclick="document.testForm.submit()"~GT~ ~LT~/body~GT~ ~LT~/html~GT~

=========

Regards, Satish.

On 10/19/2011 at 7:12:24 PM EDT Satish wrote:
117
There was a small bug in the Javascript in my previous comment. Here is the corrected version:

=========== ~LT~html~GT~ ~LT~head~GT~ ~LT~title~GT~Test~LT~/title~GT~

~LT~script~GT~ var i = 0; function addFileInputField() { var fileDiv = document.getElementById("fileDiv"); var fileElementName = 'files['+ i + ']'; var fileElementDivName = 'files'+ i; var fileInputDivName = 'fileInputDiv' + i; var div = document.createElement('~LT~div id="' + fileInputDivName + '" style="display: block; width: 120px; height: 25px; overflow: hidden;"~GT~'); var a = document.createElement('~LT~a class="link" href="javascript:void(0)"~GT~'); a.appendChild(document.createTextNode("Attach Document")); var f = document.createElement('~LT~input type="file" id="' + fileElementDivName + '" name="' + fileElementName + '" class="file"~GT~'); div.appendChild(a); div.appendChild(f); fileDiv.appendChild(div); var fileInput = document.getElementById(fileElementName); fileInput.onchange = function() { var fileInputDiv = document.getElementById(fileInputDivName); fileInputDiv.style.visibility = "hidden"; fileInputDiv.style.display = "none"; var d = document.createElement('~LT~div id="fileTextDiv' + i + '"~GT~'); var a2 = document.createElement('a'); a2.href = 'javascript:removeFileInputField(' + i + ')'; a2.appendChild(document.createTextNode('Remove')); var s = document.createElement('span'); s.appendChild(document.createTextNode(fileInput.value + ' '));

d.appendChild(s); d.appendChild(a2); fileDiv.appendChild(d); i++; addFileInputField(); } }

function removeFileInputField(index) { var fileDiv = document.getElementById("fileDiv"); var fileInputDiv = document.getElementById("fileInputDiv" + index); var fileTextDiv = document.getElementById("fileTextDiv" + index); alert(fileTextDiv); alert(fileInputDiv); fileDiv.removeChild(fileTextDiv); fileDiv.removeChild(fileInputDiv); }

~LT~/script~GT~

~LT~style type="text/css"~GT~ a.link { /*width: 90px;*/ height: 20px; position: relative; cursor: pointer; } .file { cursor: pointer; font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px; left: -20px; } ~LT~/style~GT~ ~LT~head~GT~

~LT~body onload="addFileInputField()"~GT~ ~LT~form name="testForm" enctype="multipart/form-data" method="post" action="save"~GT~ ~LT~br/~GT~ ~LT~div id="fileDiv"~GT~~LT~/div~GT~ ~LT~br/~GT~ ~LT~/form~GT~ ~LT~input type="button" value="Submit" onclick="document.testForm.submit()"~GT~ ~LT~/body~GT~ ~LT~/html~GT~

===========

On 12/29/2011 at 4:54:26 AM EST Srividya wrote:
118
Cud u plz help in giving a code snippet to make the 'Attach' button work so that when a file is browsed and opened, and the Attach button clicked, the file gets saved in the server. Also the paper clip button s displayed on the lists page. This shud be implemented using sharepoint 2007.

On 01/20/2012 at 5:24:58 AM EST Prashant wrote:
119
Thanks for the post, it really helped

On 03/11/2012 at 10:56:58 AM EDT Pouyan Heyratpour wrote:
120
This is not usefull @ all caz everyone knows how to use DOM to make this games happen, the important part is to make it work as you expected.

DYNAMICALLY ADDED FILE INPUTS WON'T BE POSTED IN INTERNET EXPLORER. (e.g. in php $_FILES will be empty but $_POST has the filename), and I'm seeking for a solution now

On 03/11/2012 at 10:57:10 AM EDT Pouyan Heyratpour wrote:
121
This is not usefull @ all caz everyone knows how to use DOM to make this games happen, the important part is to make it work as you expected.

DYNAMICALLY ADDED FILE INPUTS WON'T BE POSTED IN INTERNET EXPLORER. (e.g. in php $_FILES will be empty but $_POST has the filename), and I'm seeking for a solution now

On 06/07/2012 at 7:37:43 PM EDT idée recette cocotte wrote:
122
Hey, affecting envisage !

On 07/29/2012 at 6:42:03 AM EDT abid wrote:
123
if i want to delete a file , can any bdy tell me plz how can i do it???

remove file option?

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?