Upload multiple image files in CodeIgniter using Ajax and PHP

Question

I'm having trouble uploading multiple image files to the server side. It would be great if someone could highlight what's wrong with the code.

Initially there is HTML code:

<label class="col-form-label"><h4>Upload Images</h4></label>
              <div id="image-preview-container">
                <!-- Preview images will be displayed here -->
              </div>
              <form id="uploadCert" enctype="multipart/form-data">
                <input type="file" id="images" name="images" multiple="multiple" accept="image/*" style="display: none;">
                <label for="images" class="btn btn-primary"> Add Image </label>
              </form>
            </div>

Define in JavaScript

var selectedImages = []; //list of files in array

And capture each selected file

$("#images").change(function () {
  var file = this.files[0];

  if (file) {
    ...

    // Append the container to the image preview container
    $("#image-preview-container").append(imageContainer);

    ..

    // Add the selected image file to the postData.images array
    selectedImages.push(file);
    
    $(this).val("");
  }
});

Use AJAX after submission

$('#addcart').click(function () {

        // Add other form fields to formData
        var formData = new FormData();
        ...
        formData.append("issuesBody", $("#fbody_").val());
        ...
        
        if (selectedImages.length > 0) {
            // Append each selected image to formData
            for (var i = 0; i < selectedImages.length; i++) {
                var image = selectedImages[i];
                if (image instanceof File) {
                  // If it's a File object, append it to formData
                  formData.append("images[]", image);

                }
            }
        } else {
            // If no selected images, set images[] to an empty array
            formData.append("images[]", []);
        }

        // Make the AJAX request
        event.preventDefault();
        $.ajax({
            url: "addcert",
            type: "POST",
            data: formData,
            dataType:"json",
            contentType:false,
            cache:false,
            processData: false,
            success: function(data){
                // Handle a successful response
                ...
            },
            error: function (xhr, status, error) {
                // Handle an error response
                ...
            }
        });

     });


});

In PHP

private function addNewCert(){
        // Capture POST data
        $issuesBody = $this->input->post('issuesBody'); 
        // Not sure if this is the way to capture the posted file data
        $images = $_FILES['images']; 

        // Upload images to the server
        $uploadedFiles = $this->uploadimg($images);

        //Check if image uploads were successful
        if ($uploadedFiles === false) {
            // Handle the case where image uploads failed
            ...
            echo json_encode($output);
            return;
        } ...

Finally during uploadimg() it always shows 'undefined' and the code here

private function uploadimg($images) {
        $uploadedFiles = array(); // captured uploaded file name

        // Loop through each uploaded file
        for ($i = 0; $i < count($images['name']); $i++) {
            // Generate a unique file name or use the original name
            $originalFileName = $images['name'][$i];
            $fileExtension = pathinfo($originalFileName, PATHINFO_EXTENSION);
            $file_name = uniqid() . '_' . $originalFileName;

            $config['upload_path'] = $this->uploadPath;
            $config['file_name'] = $file_name;
            $config['allowed_types'] = 'jpg|jpeg|png|gif'; 
            $config['max_size'] = 2048; 
            $config['encrypt_name'] = TRUE; 

            $this->load->library('upload', $config);

            // Perform the upload
            if ($this->upload->do_upload('images')) {
                $uploadedFiles[] = $file_name;
            } else {
                // Handle the case where an upload failed
                return false;
            }
        }

        return $uploadedFiles;
    }

Answer 1

Actually, there is more than one problem in the code. First, you should take the $this->load->library('upload',$config) statement out of the for loop. You need to create a single file from each file in the list to upload. If I remember correctly, the Codeigniter do_upload method does not work with multiple files. You can update your uploadimg method as follows:

private function uploadimg($images) {
    $uploadedFiles = array(); // captured uploaded file name

    $config = [
        'upload_path' => './testUploads/',
        'allowed_types' => 'jpg|jpeg|png|gif',
        'max_size' => 2048,
        'encrypt_name' => TRUE,
    ];
    $this->load->library('upload', $config);

    // Loop through each uploaded file
    for ($i = 0; $i < count($images['name']); $i++) {
        // Generate a unique file name or use the original name
        $originalFileName = $images['name'][$i];
        $fileExtension = pathinfo($originalFileName, PATHINFO_EXTENSION);
        $file_name = uniqid() . '_' . $originalFileName;

        $config['file_name'] = $file_name;
        $this->upload->initialize($config);

        $_FILES['singleImage']['name']     = $file_name;
        $_FILES['singleImage']['type']     = $images['type'][$i];
        $_FILES['singleImage']['tmp_name'] = $images['tmp_name'][$i];
        $_FILES['singleImage']['error']    = $images['error'][$i];
        $_FILES['singleImage']['size']     = $images['size'][$i];
        

        // Perform the upload
        if ($this->upload->do_upload('singleImage')) {
            $uploadedFiles[] = $file_name;
        } else {
            // Handle the case where an upload failed
            return false;
        }
    }

    return $uploadedFiles;
}

P.S I see, you are generating a more readable filename. If you want to find files with this naming structure, you should set the encrypt_name field in the configuration array to false.