Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Multiple File Upload with jQuery-multi

Posted on 2008-10-30
10
Medium Priority
?
3,857 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
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Geo-targeting is the practice of distributing content based on a person’s location, as best as you can determine it. Let’s look at some ways you could successfully use this tactic. The following tips and case studies could lead to meaningful results.
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

916 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