0

I've taken some code from this question for the multi-file upload, which works fine but the cffile overwrites the cffile.serverFile so in the parm dump the only file name I get is the last one it uploaded, not all of them.

I tried looping it, appending an array each time, but still the same problem. It seems cffile is uploading all files selected in one go. In this question the OP said he made a JSON response with the correct data but I have no idea how to do that since I can't get all the names back anyway.

Caller:

<script>
    $(document).ready(function() {
        $('#multiFileFrm').submit(function(event){
            event.preventDefault();
            $.each($('#multiFile')[0].files, function(i, file) {
                var formData = new FormData();
                formData.append('file-0', file);
                ajaxUpload(formData);
            });
        });
        function ajaxUpload(formData) {
            console.log("ajaxUpload function called");
            $.ajax({
                type: 'POST',
                url: "ajax/AJAX_multiUploadTest.cfm",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    $('#callback').html(data);
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }
    });
</script>

<form method="post" enctype="multipart/form-data" id="multiFileFrm">
    <input type="file" name="multiFile" id="multiFile" multiple="multiple" />
    <input type="submit" id="submitFrm" value="Submit" />
</form>

<div id="callback"></div>

AJAX_multiUploadTest.cfm:

<cftry>
<cfobject component="code/profile" name="pro">
<cfset parm={}>
<cfset parm.userID=session.visitor.user.ID>
<cfset parm.database=application.datasource>
<cfset parm.form=form>

<cfset path="#application.directory#/data/dev/">
<cfif NOT DirectoryExists(path)><cfdirectory action="create" directory="#path#"></cfif>

<cffile action="upload" filefield="file-0" destination="#path#" nameConflict="makeUnique">
<cfset upload="#application.directory#/data/dev/#cffile.serverfile#">

<cfdump var="#parm#" label="parm" expand="no">
<cfcatch type="any">
    <cfdump var="#cfcatch#" label="cfcatch" expand="no">
</cfcatch>
</cftry>
Community
  • 1
  • 1
JamesLKingsley
  • 71
  • 7

1 Answers1

3

Wow, by reading my own post I have figured out the problem. The callback file gets called in a loop from the JavaScript, so each time it overwrites the variables. In order to store all file names, I just simply stored them in a session variable:

<cfset arrayAppend(session.visitor.user.tempData, "#application.domain#data/dev/#cffile.serverfile#")>

This then outputs all files uploaded and once processed by other functions, maybe to store it in the database, you can just empty the array!

Hope this helps someone :)

JamesLKingsley
  • 71
  • 7