Solved

Multiple File Upload with jQuery-multi

Posted on 2008-10-30
10
3,847 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

770 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