Solved

Multiple File Upload with jQuery-multi

Posted on 2008-10-30
10
3,849 Views
Last Modified: 2013-12-16
I have a built in ColdFusion, using the jquery multi script, and everything seems to work correctly except for the upload process.  I get nothing in the results of the upload for the files. I even used a cfdump and the filefileds all show as empty.  

Does anyone out there have any experience with this?

i have a zip file with all the related files I can email to you.  The upload system does not allow me to post js files, even within a zip file
0
Comment
Question by:mopar003
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 10

Expert Comment

by:Mr_Nil
ID: 22846160
Have you set the enctype on the form to "multipart/form-data"?
0
 
LVL 1

Author Comment

by:mopar003
ID: 22846271
yes.  Everything seems to go and do what its supposed to do except for the file varaibles come up empty

0
 
LVL 10

Expert Comment

by:Mr_Nil
ID: 22846466
I've been trying to work from the sparse documentation what this plugin actually does, when I came across this.

"Can this plugin upload files?
No, this jQuery plugin does not upload files"

From what I can tell it populates an array which, when you submit the form, you need to then use to populate a file field, but the docs are so... lacking its hard to tell exactly what is up to.

Have a look at this tutorial : http://15daysofjquery.com/multiple-file-upload-magic-with-unobtrusive-javascript/17/
It should help with setting up a simple multi-file upload without using an undocumented plugin.
0
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 
LVL 1

Author Comment

by:mopar003
ID: 22846532
Thats kind of what I have found as well.  Not sure what the array is called, and how to obtain the info.  I know it doesn't upload directly, but it would be nice if they told us the method to use when uploading!

0
 
LVL 16

Expert Comment

by:sh0e
ID: 22846847
All that script does, is hide validated input elements and create new input elements.  Thus, simulating multiple file input in one element.  This should work the same as any normal form with multiple file input elements.  It's basically doing the same as that tutorial does, but wrapped up in a plugin.

What that question actually means, is that the jQuery plugin does not submit anything.  It only creates input elements (<input type="file">).  I'm assuming it's for people who expect it to submit files through AJAX or something.  Or worse, they may expect it to automagically upload the files to the server somehow.

Can you provide a sample or a demo of some sort?
0
 
LVL 1

Author Comment

by:mopar003
ID: 22846859
I'm just trying to verify that there is content there.  This outputs a cfdump , and I see nothing in the variables.  uploading will be done with a loop and the cffile call
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design Request</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.MetaData.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
 
</head>
<body>
<cfparam name="form.submitted" default="">
<cfif form.submitted eq 1>
	<cfdump var="#form#">
</cfif>
<form action="upload_test.cfm" method="post" enctype="multipart/form-data" name="form" id="form">
  <span style="display:none;"><input type="text" name="ad_username" id="ad_username" autocomplete="off"  value="#form.ad_username#" tabindex="3" /><input id="ad_confirm" type="button" value="confirm" /></span>
<input name="fileField" type="file" id="fileField" size="30" class="multi" /><input type="submit" name="button" id="button" value="Submit Request" /><input name="submitted" type="hidden" value="1" />
</form>
</body>
</html>

Open in new window

0
 
LVL 16

Expert Comment

by:sh0e
ID: 22847492
I have tested it and it seems to submit the file data as expected.  PHP has a problem with submit data if you don't add [] (fileField[]) to the end of the name, as this jQuery plugin gives all the inputs the same name.
Anyhow, the server end should be handling the submitted data like a normal form with multiple file input elements.

Perhaps it's because all the file input elements are given the same name?  The last one is always an empty value, because the current file input element is blank.
Could you try giving two input elements different values, and tell me if cfdump gives you both?
0
 
LVL 1

Author Comment

by:mopar003
ID: 22847661
If I add the [] to the file name, then the script breaks, so that won't work.

So using the same code and getting a cfdump result, I get these results

struct
AD_USERNAME #form.ad_username#  
BUTTON Submit Request  
FIELDNAMES AD_USERNAME,FILEFIELD,FILEFIELD,FILEFIELD,BUTTON,SUBMITTED  
FILEFIELD [empty string]  
SUBMITTED 1  

Two of the three items should have values, but not sure how to pull them out.
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22847928
Ok, so it appears that the files are being sent.  The problem is that the file elements have the same name, which is confusing CF.  I'm not familiar enough with CF to know if it is capable of dealing with this.  Can the fields be accessed as an array?
If all else fails, you can hack the jQuery plugin to rename each file input field to an unique name.
Just use a counter and append the counter to the name.

Or, loop through all the file input elements and add append a counter to each name.

It would be preferable to be able to parse it through CF though.
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22847947
You will have to access the fields as fileField0, fileField1, fileField2, etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design Request</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.MetaData.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#form').submit(function(){
            var files = $('#form input:file');
            var count=0;
            files.attr('name',function(){return this.name+''+(count++);});
        });
    });
</script>
</head>
<body>
<cfparam name="form.submitted" default="">
<cfif form.submitted eq 1>
        <cfdump var="#form#">
</cfif>
<form action="upload_test.cfm" method="post" enctype="multipart/form-data" name="form" id="form">
  <span style="display:none;"><input type="text" name="ad_username" id="ad_username" autocomplete="off"  value="#form.ad_username#" tabindex="3" /><input id="ad_confirm" type="button" value="confirm" /></span>
<input name="fileField" type="file" id="fileField" size="30" class="multi" /><input type="submit" name="button" id="button" value="Submit Request" /><input name="submitted" type="hidden" value="1" />
</form>
</body>
</html>

Open in new window

0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Worldmap 1 28
Prevent / reduce email harvesting using an image – javascript approach ? 14 74
Jquery if else not working ... WHY? 5 26
Table header must be on top 2 31
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question