jquery validation code working but ending up uploaading same files in both different folders

Question

I have the below qjeruy code which works good

$("#formAbout").validate({
    ignore:[],
    errorPlacement: function (error, element) {               
        var lastError = $(element).data('lastError'),
            newError = $(error).text();
        $(element).data('lastError', newError);                
        if(newError !== '' && newError !== lastError){
            $(element).tooltipster('content', newError);
            $(element).tooltipster('show');
        }
    },
    success: function (label, element) {
        $(element).tooltipster('hide');
    },
    submitHandler: function(form) { 
      var $form    = $(form),
          formData = new FormData(),
          params   = $form.serializeArray(),
          files    = $form.find('[name="uploadfile"]')[0].files,
          files1   = $form.find('[name="backImage"]')[0].files;
  
      $.each(files, function(i, file) {
          // Append each file with a unique identifier
          formData.append('uploadedFiles', file);
      });
  
      $.each(files1, function(i, file) {
        // Append each file with a unique identifier
        formData.append('backImage', file);
      });
  
      $.each(params, function(i, val) {
          formData.append(val.name, val.value);
      });
  
      $.ajax({
        url:'process.cfm?action=about',
        data: formData,
        mimeType: "multipart/form-data",
        contentType: false,
        processData: false,
        type:'POST',
        dataType: 'html',
        success: function(data) {
          var json = $.parseJSON(data);
          if(json.valid) {
            showAlert(json.message, 'success');
          } else {
            showAlert(json.message, 'error');
          }
        },
        error: function(textStatus,errorThrown) {
          showAlert('An error occurred during the operation.' + textStatus, 'error');
        }
    });
    return false; // required to block normal submit since you used ajax
    }
  });

the problem is i am sending two different set of files in two different form names one is upload and another one is backimage, but it ends up uploading the files in both folders same set of files.

and i am getting confused what is going wrong here, the below is my server code

<cfif isDefined('structform.uploadedFiles') AND !arrayIsEmpty(structform.uploadedFiles)>
                <cfset dirCreate(request.upload & "/" & idojoID & "_img")>
                <cfset var filePath = request.upload & "/" & idojoID & "_img">
                    <cffile  action="uploadAll" filefield="structform.uploadedFiles" destination="#filePath#" nameconflict="MAKEUNIQUE" />
                    <cfloop array="#cffile.uploadallresults#" item="i" index="idx">
                        <cfset originalFileNameImg = i.clientFile>
                        <cfset uniqueFileNameImg = "#CreateUUID()#" & "." & ListLast(originalFileNameImg, '.')>
                        <cffile action="rename" source="#filePath#/#originalFileNameImg#" destination="#filePath#/#uniqueFileNameImg#" attributes="normal">
                        <cfset actualFileImg = Request.BaseURL & "upload/" & idojoID & "_img" & "/" & uniqueFileNameImg>
                        <cfset imageObj = imageRead(actualFileImg)>
                        <cfset imageResize(imageObj, imageW, imageH)>
                        <cfimage action="write" source="#imageObj#" destination="#filePath#/#uniqueFileNameImg#" overwrite="true">
                        <cfset actualFileName = uniqueFileNameImg>
                        <cfset addWatermark("#filePath#/#actualFileName#", "#request.AppSiteWatermarkName#")>
                        <cfquery name="insertImage">
                            INSERT INTO images (imageName, imageDojoID)
                            VALUES ('#actualFileName#', #idojoID#)
                        </cfquery>
                    </cfloop>
            </cfif> 

like above i have same for another form field which is backimage, it is inserting same files in both different tables i am sure someting is mess-up in the server end possibly

i tried above code and it seems to be working but ending up same images in two different folders

Answer 1

Your JS code looks fine.

formData.append('uploadedFiles', file); // for uploadedFiles
formData.append('backImage', file);     // for backImage

However, on the server-side, you seem to be processing both sets of files under the same condition:

<cfif isDefined('structform.uploadedFiles') AND !arrayIsEmpty(structform.uploadedFiles)>

This condition checks for the existence of uploadedFiles, but it doesn't differentiate between uploadedFiles and backImage.

You need to adjust your server-side code to handle uploadedFiles and backImage separately.

<cfif isDefined('structform.uploadedFiles') AND !arrayIsEmpty(structform.uploadedFiles)>
    <!--- Process uploadedFiles here --->
</cfif>

<cfif isDefined('structform.backImage') AND !arrayIsEmpty(structform.backImage)>
    <!--- Process backImage here --->
</cfif>

So now your server-side code will process uploadedFiles and backImage separately, preventing the issue of uploading the same set of files to both folders. Make sure that you adjust the variable names (backImage) to match what is being sent from the client-side.