How to upload a CSV file and save it into an multidimensional array?

Question

Basically, I need a way to upload a CSV file and save it into a multidimensional array as the title says.

I have searched far and wide online, and I found a jQuery-csv add on here: https://github.com/evanplaice/jquery-csv

That jQuery library can handle converting the CSV file into a multidimensional array, although it is the upload part I am having real trouble with.

I am having difficulty on how to interact PHP and jQuery together. I know for a fact that PHP is always called first at the server, then jQuery/Javascript at the client side. Therefore, I am very confused on how to allow a used to upload a CSV file via PHP, save the location, pass it to jQuery, and then save it there.

I am sure this is most probably a simple task, although I could not find my answer anywhere.

So here is how I would like to do it:

Upload the file with PHP
Save the CSV into a string with either PHP or jQuery
Parse the CSV into a a multidimensional array using $.csv.toArrays(csv); from jQuery-csv add on

All help and suggestions is greatly appreciated, thanks!

JQuery wont read your server side stored file, you will have to output your CSV file as your array (JSON) in your HTML and jQuery can pick it from there — Hanky Panky, Aug 21 '13 at 06:15
why are u using jquery to to parse it. Why don't u upload it with a simple php form, parse it to csvn using a csv library. Later you can use an iframe or something to transfer the file to the server asynchronously — SoWhat, Aug 21 '13 at 06:20
@ØHankyPankyØ - That sounds far better. I am not required to keep the CSV file stored anywhere. I just need to save its contents. How would I go about doing that? — Fizzix, Aug 21 '13 at 06:26
Just upload the file and parse it server side. Do this first using standard HTML form uploads. If necessary, go for the more advanced AJAX upload (keyword you should probably google) later on. — deceze, Aug 21 '13 at 06:27
@deceze - Not to sure how to go about that. Extremely new to jQuery and AJAX. — Fizzix, Aug 21 '13 at 06:37
Then start without using AJAX. Get *something* to work first. Enhance it later using AJAX **after you have followed some tutorials on it and learned what it is.** — deceze, Aug 21 '13 at 06:48

score 2 · Accepted Answer · edited May 23 '17 at 10:25

Create a simple file upload form in html which will upload a file to your php script yourscript.php via post when the submit button is pressed. Make sure to name your file type input something nice because you will need to reference that name in php

<form action="yourscript.php" method="post" enctype="multipart/form-data">
 <input type="file" name="upload_file" />
 <input type="submit" />
</form>

PHP yourscript.php

<?php
$csv_array = Array();
$file = fopen($_FILES['upload_file']['tmp_name'], 'r');
if($file){
    while (($line = fgetcsv($file)) !== FALSE) {
      //$line is an array of the csv elements
      array_push($csv_array,$line);
    }
    fclose($file);
}
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>var your_array = <?php echo json_encode($csv_array); ?></script>
</head>
<body>

</body>
</html>

from How to create an array from a CSV file using PHP and the fgetcsv function

Things get a little trickier when you start using ajax to handle file uploads so i suggest you learn how ajax works before attempting to use ajax to do file uploading

Thanks for that. I tried to test it, although it is refusing to work when I attempt to print out `your_array`, nothing is printed. Any thoughts? — Fizzix, Aug 21 '13 at 07:52
Seems as if it is maybe entering an infinite loop since the browser window doesn't stop loading..? — Fizzix, Aug 21 '13 at 07:58
You are right. updated with working code calls fopen on the file from its temporary directory and includes check that file exists — DGS, Aug 21 '13 at 09:01

How to upload a CSV file and save it into an multidimensional array?

1 Answers1