RSS Home Newsletter Advertising
Join the WebProWorld Forum!

Uploading Files Like GMail Attachments

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.

Comments

Related Entries

  • Cheat Sheet Roundup - Over 30 Cheatsheets for developers - September 1, 2005
  • Tracking JavaScript Events with Google Analytics - September 28, 2006
  • Howto Build a Form That Isn't Annoying (Part 2) - May 3, 2006
  • Styling Your forms with CSS and Labels - January 11, 2006
  • Blocking Mozilla / Google Prefetch - April 6, 2005
  • * View Original Post

    Pete Freitag (http://www.petefreitag.com/) is a software engineer, and
    web developer located in central new york. Pete specializes in the
    HTTP protocol, web services, xml, java, and coldfusion. In 2003 Pete
    published the ColdFusion MX Developers Cookbook with SAMs Publishing.

    Pete owns a Firm called Foundeo (http://foundeo.com/) that specializes
    in Web Consulting, and Products for Web Developers.

    Digg This! StumbleUpon This!


    About the author:
    Pete Freitag (http://www.petefreitag.com/) is a software engineer, and web developer located in central new york. Pete specializes in the HTTP protocol, web services, xml, java, and coldfusion. In 2003 Pete published the ColdFusion MX Developers Cookbook with SAMs Publishing.

    Pete owns a Firm called Foundeo (http://foundeo.com/) that specializes in Web Consulting, and Products for Web Developers.

    Comments

    Plz provide the code to display the uploaded file as attachment

    Hi All,

    Please can any one provide me the code to display the uploaded file as attachment ?????????????

     

    Regards,

    Ravi

    Comment viewing options

    Select your preferred way to display the comments and click "Save settings" to activate your changes.

    Post new comment

    The content of this field is kept private and will not be shown publicly.
    CAPTCHA
    This question is for testing whether you are a human visitor and to prevent automated spam submissions.
    8 + 7 =
    Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
    Subscribe to WebProNews


    Send me relevant info