How to upload document and other JSON string using AJAX?

Question

I'd like to do some file upload with some JSON string to my controller. This is my current AJAX

var data_upload = new FormData(); 

$.each($(".uploads")[0].files, function(i, file) {
   data_upload.append('input_upload_file['+i+']', file);
});

$.ajax({
    url         : url,                      
    type        : 'POST',
    async       : false,
    enctype     : 'multipart/form-data',
    dataType    : 'JSON',
    data        : { upload_data     : data_upload ,
                    json_string1    : $('#myjson_string1').val(),
                    json_string2    : $('#myjson_string2').val(),
                    '<?php echo $this->security->get_csrf_token_name(); ?>' : csrfHash 
                  }
    })
    .done(function(data){
                    
        alert("Success");
    })
    .fail(function(jqXHR, textStatus, errorThrown){
                    
        alert("Fail");
    });

This is my HTML form (simplified):

<body>
     <form id="uploadMe">
      
        <label class="fileContainer">
        <input type="text" class="form-control" name="myName" />
        <input type="text" class="form-control" name="myAge" />
        <input type="file" class="uploads" name="input_upload_file[]" multiple />
        <input type="file" class="uploads" name="input_upload_file[]" multiple />
        <input type="text" class="json_string" id="myjson_string1" name="json_string1" />
        <input type="text" class="json_string" id="myjson_string2" name="json_string2" />
    </label>                       
    </form>
    <button type="button" onclick="uploadFile()">Upload</button>
    <?php
    
         $token_name = $this->security->get_csrf_token_name();
         $token_hash = $this->security->get_csrf_hash();
    
         echo "<input type='hidden' id='csrf_name' name='".$token_name."' value='".$token_name."' />";
         echo "<input type='hidden' id='csrf_hash' name='".$token_hash."' value='".$token_hash."' />";
    ?>
  </body>

I also need to send the CSRF token with my AJAX upload. Currently, it's not working at all. Any help is greatly appreciated.

Lucas Henrique · Answer 1 · 2021-02-16T21:42:36.157

Answer taken from here Link
You can use the FormData

    const form = new FormData()
    form.append('upload_data',$('#myjson_string1').val())
    form.append('csrfHash','csrfHash_here')

    $.ajax({
    url         : url,                      
    type        : 'POST',
    async       : false,
    enctype     : 'multipart/form-data',
    dataType    : 'JSON',
    data        : { 
                    
                    upload_data     : data_upload ,
                    json_string1    : $('#myjson_string1').val(),
                    json_string2    : $('#myjson_string2').val(),
                    '<?php echo $this->security->get_csrf_token_name(); ?>' : csrfHash 
                  }
    })
    .done(function(data){
                    
        alert("Success");
    })
    .fail(function(jqXHR, textStatus, errorThrown){
                    
        alert("Fail");
    });

Add properties to ajax

 processData: false,
 contentType: false,

How to upload document and other JSON string using AJAX?

1 Answers1