send javascript array variable to php script using jquery ajax (getting string as output instead of array)

Question

I am trying to send JavaScript array to PHP script using Ajax but when i try to var_dump $_POST['file_paths'] getting string instead of array as an output, i want output in array format not in string format. is it because of Ajax setting i am using in code like contentType: false and processData: false.

i tried JSON decoding and encoding still getting string as an output , if anyone can point me in right direction.( need output in array format not in string)

HTML Markup : (folder upload)

<form id='submit' action='' method="post">
            <div id="upload">
                <div class="fileContainer">

                    <input id="myfiles" type="file" name="myfiles[]" multiple="multiple" webkitdirectory multiple directory />
                </div>
            </div>
            <input id="directory_name" type="text" name="directory_name" placeholder="Directory Name" >
</form>

This is simple js to fetch all form data like parent directory name , and file data and file path using

webkitRelativePath

after fetching all data sending two array 1st is file array and second is file_paths array to php script, when i console.log file_paths array getting array.

JS script:

            $(document).ready(function() {
                $('#myfiles').on("change", function() {

                    var myfiles = document.getElementById("myfiles");
                    var file_paths = [];
                    var files = myfiles.files;
                    var new_directory_name =$('#directory_name').val();
                    var data = new FormData();
                    data.append('new_directory_name',new_directory_name);
                    data.append('action', 'upload_folder_to_server');
                    data.append('data_room_id', 55);
                    data.append('username', 'saurabh');
                    for (i = 0; i < files.length; i++) {
                        data.append('file' + i, files[i]);
                        file_paths.push(files[i].webkitRelativePath);
                        console.log(files[i].webkitRelativePath);
                    }
                    //file_paths = JSON.stringify(file_paths);
                    console.log(file_paths);
                    data.append('file_paths', file_paths);
                    $.ajax({
                        method: "POST",
                        url: ajaxurl,
                        contentType: false,
                        data: data,
                        processData: false,
                        //cache: false
                    }).done(function(msg) {
                        $("#loadedfiles").append(msg);
                    });
                });
            });

javascript output:

Array(3) [ "first folder/second folder/third folder/upload_groupmembers_additonal_login_sample(7).xlsx", "first folder/second folder/upload_groupmembers_additonal_login_sample(7).xlsx", "first folder/upload_groupmembers_additonal_login_sample(7).xlsx" ]

In PHP Script when var_dump file_paths getting output in string format. PHP Script:

function upload_folder_to_server()
{
    var_dump($_POST['file_paths']);
}
add_action('wp_ajax_upload_folder_to_server', 'upload_folder_to_server');
add_action('wp_ajax_nopriv_upload_folder_to_server', 'upload_folder_to_server');

Output:

string(232) "first folder/second folder/third folder/upload_groupmembers_additonal_login_sample(7).xlsx,first folder/second folder/upload_groupmembers_additonal_login_sample(7).xlsx,first folder/upload_groupmembers_additonal_login_sample(7).xlsx"

can someone explain me why i am getting string in PHP and array in JavaScript

Does this answer your question? [How to pass a Javascript Array via JQuery Post so that all its contents are accessible via the PHP $\_POST array?](https://stackoverflow.com/questions/5571646/how-to-pass-a-javascript-array-via-jquery-post-so-that-all-its-contents-are-acce) — Gricey, Feb 17 '20 at 08:02
thanks for you comment ,but my concern is not geting JavaScript array in PHP but getting output in similar format, e.g. if i send array through JavaScript but getting string in PHP script , i want array as output if i send array in JavaScript and little explanation why i am getting string instead of array — Do Not Panic, Feb 17 '20 at 08:09

Asif Chaudhary · Answer 1 · 2020-02-17T10:42:31.903

0

  var myfiles = document.getElementById("myfiles");
                    var file_paths = [];
                    var files = myfiles.files;
                    var new_directory_name =$('#directory_name').val();
                    var data = new FormData();
                    data.append('new_directory_name',new_directory_name);
                    data.append('action', 'upload_folder_to_server');
                    data.append('data_room_id', 55);
                    data.append('username', 'saurabh');
                    for (i = 0; i < files.length; i++) {
                        data.append('file' + i, files[i]);
                        file_paths.push(files[i].webkitRelativePath);
                        console.log(files[i].webkitRelativePath);
                    }
                    //file_paths = JSON.stringify(file_paths);
                    console.log(file_paths);
                    data.append('file_paths', file_paths);

replace with this and try

var myfiles = document.getElementById("myfiles");
var file_paths = [];
var files = myfiles.files;
var new_directory_name =$('#directory_name').val();
var data = new FormData();
data.set('new_directory_name',new_directory_name);
data.set('action', 'upload_folder_to_server');
data.set('data_room_id', 55);
data.set('username', 'saurabh');
for (i = 0; i < files.length; i++) {
data.set('file' + i, files[i]);
file_paths.push(files[i].webkitRelativePath);
console.log(files[i].webkitRelativePath);
}
data.set('file_paths', file_paths);

edited Feb 17 '20 at 10:42

answered Feb 17 '20 at 08:05

Asif Chaudhary

61
6

WEX i tried your above code but it did not solve my issue, getting blank array as output output: Array ( ) – Do Not Panic Feb 17 '20 at 08:14
I see your string you can `explode (string,',')` to get array – Asif Chaudhary Feb 17 '20 at 08:21
please check my question i have post both output in question 1st output in JavaScript which i am getting in array format and 2nd output in PHP script which i am getting in string format – Do Not Panic Feb 17 '20 at 08:23
Hi I updated my answer check you can do like I posted. – Asif Chaudhary Feb 17 '20 at 08:28
Hi WEX i know i can achieved this with simple php explode but why data is converting from array to string in php. is it only solution to my problem? if yes please explain why – Do Not Panic Feb 17 '20 at 09:29
can you share with me what's the out of this ? `console.log(file_paths);` – Asif Chaudhary Feb 17 '20 at 09:34
i have added javascript output in question please check , 'javascript output:' – Do Not Panic Feb 17 '20 at 09:39
Array(3) [ "first folder/second folder/third folder/upload_groupmembers_additonal_login_sample(7).xlsx", "first folder/second folder/upload_groupmembers_additonal_login_sample(7).xlsx", "first folder/upload_groupmembers_additonal_login_sample(7).xlsx" ] – Do Not Panic Feb 17 '20 at 09:39
I updated my question see I think the value you are passing to `data.append('file_paths', file_paths);` thats convert this to string – Asif Chaudhary Feb 17 '20 at 09:48
`var data = new FormData().serializeArray();` update your code like – Asif Chaudhary Feb 17 '20 at 09:51
Using above code giving error in browser console, new FormData(...)).serializeArray is not a function – Do Not Panic Feb 17 '20 at 10:14
Hi I edit my answer kindly have a look its working fine for me . I used many time and I got perfect array – Asif Chaudhary Feb 17 '20 at 10:43
i tried WEX , but in PHP output still converts to string format – Do Not Panic Feb 17 '20 at 11:15
can I see the live URL to inspect easily.? – Asif Chaudhary Feb 17 '20 at 11:32
this is string so that's why you are getting string. `var_dump($_POST['file_paths']);` – Asif Chaudhary Feb 17 '20 at 11:38

Ludolfyn · Answer 2 · 2020-03-27T11:01:18.857

You should be able to do it with JSON.stringify() and json_decode().

Stringify it before sending it with JS:

const jsonArr = JSON.stringify(data);

Parse it when you receive it on the PHP end:

$parsedArr = json_decode($_POST['file_paths']);

OR

What you can do is to convert the string to an array when you receive it on the PHP end.
All you need to do is to simply add this:

$str = isset($_POST['file_paths']) ? $_POST['file_paths'] : ''; // Use condition to check if there is a post request with that name coming in
$arr = explode(",", $str);

In the first parameter of the explode() function you can specify where you want the string to split. Read more here.

send javascript array variable to php script using jquery ajax (getting string as output instead of array)

2 Answers2