Upload folders to server with JavaScript

January 28, 2021 by admin

My apologies because my first post did not meet the standards of the site

I replay my issue

Am trying to upload a folder with more than 200 files with JavaScript & php. The issue is that it’s just upload 21 files and stops after that showing the issue: undefined index 21.

my html file : home.html

<form method="POST" id="upload_folder_form">
    <div class="row">
       <input class="action" type="hidden" name="action" value="upload">
       <input class="parent_id" type="hidden" name="parent_id" value="0">
       <div class="form-group">
           <label for="nom">Folder</label>

           <input id="files[]" type="file" name="files[]" class="form-control"  webkitdirectory multiple>

       </div>
       <div class="form-group">
            <div class="col-lg-12">
                 <button type="submit" class="btn color-cmc pull-right" name="btn_envoi">
                      <i class="fa fa-upload"></i> Import
                </button>
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Annuler</button>
            </div>
       </div>
    </div>
</form>

my Javascripy file : Folder.js

$('#upload_folder_form').submit(function (e) {
        e.preventDefault();

        //récuperation des variables
        let form = $('#upload_folder_form');
        let action = $('.action').val();
        let parent_id = $('.parent_id').val();
        let redirect = "http://localhost/archivia/app/controllers/FolderController.php";

        const files = document.querySelector('[type=file]').files;
        let size = files.length;
        const formData = new FormData();

        formData.append('action', action);
        formData.append('parent_id', parent_id);
        formData.append('size', size);

        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            let fileParamName = `file${i}`;
            let filePathParamName = `filepath${i}`;
            formData.append(fileParamName, file);
            formData.append(filePathParamName, file.webkitRelativePath);
        }

        axios.post(redirect, formData).then(function (result) {
            console.log(result.data);
        });

        return false;
    });

My Php file : FolderController.php

function upload(){
    $path = "../../public/Archives CMC/";
    $size = $_POST['size'];

    var_dump($_FILES);

    for($i = 0; $i < $size; $i++){
        $folderpath = $path.dirname($_POST['filepath'.$i]);
        $file = $_FILES['file'.$i];
        $filename = $file['name'];
        $file_tmp = $file["tmp_name"];

        if (file_exists($path.$folderpath)){
            move_uploaded_file($file_tmp, $path.$folderpath.'/'.$filename);
        }else{
            mkdir($path.$folderpath,0644,true);
            move_uploaded_file($file_tmp, $path.$folderpath.'/'.$filename);
        }

    }


}

For a folder that gots more than 30 files, juste 20 will be uploaded

How can I come over it please???

Thanks