• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3866
  • Last Modified:

Multiple File Upload with jQuery-multi

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
mopar003
Asked:
mopar003
  • 4
  • 4
  • 2
1 Solution
 
Mr_NilCommented:
Have you set the enctype on the form to "multipart/form-data"?
0
 
mopar003Author Commented:
yes.  Everything seems to go and do what its supposed to do except for the file varaibles come up empty

0
 
Mr_NilCommented:
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
mopar003Author Commented:
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
 
sh0eCommented:
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
 
mopar003Author Commented:
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
 
sh0eCommented:
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
 
mopar003Author Commented:
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
 
sh0eCommented:
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
 
sh0eCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now