Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Multiple File Upload with jQuery-multi

Posted on 2008-10-30
10
Medium Priority
?
3,852 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 …
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
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 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…

721 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