You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: ColdFusion

ColdFusion: Article

Multiple-File Uploads with ColdFusion

Letting users pick whatever files they want to upload and then pushing them all at once

One task that arises again and again in ColdFusion application development is the need for users to be able to upload multiple files to the Web Server. Back in the stone ages (and by this I mean more than a couple of years ago) we had a limited set of options to be able to do this. Usually a problem such as this was approached using one of three means.

Perhaps most crudely, the user would be able to load a file at a time. And if they needed to upload 10 files, that meant 10 round trips to the server and a heck of a lot of clicks. To paraphrase Hal Helms who, I believe, was paraphrasing someone else, this can create a disorder known as Post Back Traumatic Stress Syndrome.

To add a level of elegance, some of us began prompting the user ahead of time: "How many files do you want to upload?" This would be followed by an ugly page with rows and rows of file-type input boxes. And what if the user changed his mind about how many files? Well, he can always start over.

And sometimes we'd just take the approach of "knowing" that the user wouldn't need to upload more than x number of files, so we would just put x number of input boxes on a page, and they could use as many as they needed...unless of course they needed more, in which case they could just repeat the process.

What is the common thread here? While each of these are indeed functional approaches, none of them provides the level of user experience that our users are beginning to expect in Web applications thanks to the growing implementation of rich JavaScript libraries, AJAX, and various RIA technologies.

Wouldn't it be nice if there were some free tool that lets you give your users the ability to choose whatever files they want to upload and then push them all at once?
Well, yes, it would and thankfully there is such a tool written by a developer who simply goes by the name Stickman as in www.the-stickman.com. This tool lets you quite easily allow users to upload multiple files using a single-file input element. Once users have added files to a queue they can then push them all at once. If you're familiar with adding attachments in Gmail you know this concept well. We're going to provide a very simplified example and within a few minutes you can give your user an interface as shown in Figure 1.

Let's look at a step-by-step approach for adding this to your site. First, we need to get the JavaScript file that makes this process so easy. To do this, we need to download the zip file at http://the-stickman.com/files/multiple-file-element.zip.
You'll find three files inside this zip file:

  • example.html - This HTML file is the of the ColdFusion example we're about to build.
  • multifile.js - The JavaScript library used by the HTML.
  • multifile_compressed.js - This file is functionally the same as the previous file, the difference being the overall size of the compressed file by removing white space.
For our example we'll place the last of the three, multifile_compressed.js, in our application's webroot.

The next step is completely superficial and is simply included to stylize the form just a bit, but we'll create a simple CSS file called uploader.css and put that in our webroot. If you're in a big hurry, you can skip this step without any consequences in running the uploader. However, if you want your output to look like the example here, your CSS file should contain the following shown in Figure 2.

Now it's time to make the form our users are going to use to upload files. The upload form template looks like this Figure 3.

As you can see in that code, we call the multifile_compressed.js file in the head of our document in addition to linking the CSS file we created. In the body, you find that our form has a single-file input element. This is used to add files to the upload queue. As files are added, the script actually adds new file-input elements and hides them by absolutely positioning them 1000px to the left of the top-left corner of the screen. The author took this approach as opposed to setting the style equal to "display:none" to allow compatibility with Safari browsers.

Once the new input element is added, the addListRow() JavaScript function is called that writes a new row in the "FileList" div element. By default this row displays the name of the new file and a button to remove it before form submission, but this function can be easily modified to make this display appear however you wish.

Now that we've created our form page, it's time to manage the action once the form is submitted. First, we should start by creating a directory to receive the uploaded files. In our example, we'll create a sub-directory in the webroot called "upload."

Next we have to write our action page. Create a new template in the webroot called "actUpload.cfm" and include the following code shown Figure 4.

So what exactly are we doing here? Let's walk through it.

First, and hopefully quite obviously, we are ensuring that a form submission has actually occurred to get us to this page. On any form post in ColdFusion when the method type is set to "post," there will be a variable "fieldnames" present in the form scope that is a list of the names of all the form elements that were passed to the action page. This multi-file uploader script creates fields that begin with the string "file_" and end with an incrementing value beginning with 0. There will always be one more element than the number of files that are being uploaded, and that element will be an empty string. For instance, when we upload three files we'll have: file_0, file_1, file_2, and then file_3, which is an empty value. So in the case of three submitted files, and assuming no other fields were present in the form, #forms.fieldnames# would output as: "FILE_0,FILE_1,FILE_2,FILE_3."

On line 2, we're creating a new array, which will be used later to house the results of each file upload.

Then we begin looping through our #form.fieldname# list. If the current element name begins with "file_" and the form variable isn't an empty string, we're going to attempt to upload this file to the server.

You can see in the <cffile/> tag that we're storing the results of the upload process in a variable called "ThisFile." We then append that result structure to our UploadedFiles array. Once we're done, we simply dump the array to the screen. In an actual production scenario, you'd obviously want to trap more errors and probably do something more intelligent with the results of the uploads before redirecting the user to a confirmation page.

Providing your user with tools such as this can affect their overall perception of your site, and subtle things such as this can really boost their "feel good" factor. While there are other ways to achieve the same results, such as the commercially licensed CF_ProFlashUpload, or various other homegrown concoctions, Sickman's multiple-file element uploader is a quick, easy, and flexible choice.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

@ThingsExpo Stories
DX World EXPO, LLC, a Lighthouse Point, Florida-based startup trade show producer and the creator of "DXWorldEXPO® - Digital Transformation Conference & Expo" has announced its executive management team. The team is headed by Levent Selamoglu, who has been named CEO. "Now is the time for a truly global DX event, to bring together the leading minds from the technology world in a conversation about Digital Transformation," he said in making the announcement.
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that Conference Guru has been named “Media Sponsor” of the 22nd International Cloud Expo, which will take place on June 5-7, 2018, at the Javits Center in New York, NY. A valuable conference experience generates new contacts, sales leads, potential strategic partners and potential investors; helps gather competitive intelligence and even provides inspiration for new products and services. Conference Guru works with conference organizers to pass great deals to gre...
The Internet of Things will challenge the status quo of how IT and development organizations operate. Or will it? Certainly the fog layer of IoT requires special insights about data ontology, security and transactional integrity. But the developmental challenges are the same: People, Process and Platform. In his session at @ThingsExpo, Craig Sproule, CEO of Metavine, demonstrated how to move beyond today's coding paradigm and shared the must-have mindsets for removing complexity from the develop...
In his Opening Keynote at 21st Cloud Expo, John Considine, General Manager of IBM Cloud Infrastructure, led attendees through the exciting evolution of the cloud. He looked at this major disruption from the perspective of technology, business models, and what this means for enterprises of all sizes. John Considine is General Manager of Cloud Infrastructure Services at IBM. In that role he is responsible for leading IBM’s public cloud infrastructure including strategy, development, and offering m...
"Evatronix provides design services to companies that need to integrate the IoT technology in their products but they don't necessarily have the expertise, knowledge and design team to do so," explained Adam Morawiec, VP of Business Development at Evatronix, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
To get the most out of their data, successful companies are not focusing on queries and data lakes, they are actively integrating analytics into their operations with a data-first application development approach. Real-time adjustments to improve revenues, reduce costs, or mitigate risk rely on applications that minimize latency on a variety of data sources. In his session at @BigDataExpo, Jack Norris, Senior Vice President, Data and Applications at MapR Technologies, reviewed best practices to ...
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
Large industrial manufacturing organizations are adopting the agile principles of cloud software companies. The industrial manufacturing development process has not scaled over time. Now that design CAD teams are geographically distributed, centralizing their work is key. With large multi-gigabyte projects, outdated tools have stifled industrial team agility, time-to-market milestones, and impacted P&L stakeholders.
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
"Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
Gemini is Yahoo’s native and search advertising platform. To ensure the quality of a complex distributed system that spans multiple products and components and across various desktop websites and mobile app and web experiences – both Yahoo owned and operated and third-party syndication (supply), with complex interaction with more than a billion users and numerous advertisers globally (demand) – it becomes imperative to automate a set of end-to-end tests 24x7 to detect bugs and regression. In th...
"MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicate or sell. In their Day 3 Keynote at 21st Cloud Expo, Greg Chambers, Global Group Director, Digital Innovation, Coca-Cola, and Vidya Nagarajan, a Senior Product Manager at Google, discussed how from store operations and ...
"There's plenty of bandwidth out there but it's never in the right place. So what Cedexis does is uses data to work out the best pathways to get data from the origin to the person who wants to get it," explained Simon Jones, Evangelist and Head of Marketing at Cedexis, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
SYS-CON Events announced today that Telecom Reseller has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5-7, 2018, at the Javits Center in New York, NY. Telecom Reseller reports on Unified Communications, UCaaS, BPaaS for enterprise and SMBs. They report extensively on both customer premises based solutions such as IP-PBX as well as cloud based and hosted platforms.