Upload multiple files using multiple input fields

Question

I have several input fields in my view that are like this

<head>
<title>Upload Form</title>
</head>
<body>
<?php echo form_open_multipart('info/normal_upload');?>

<input type="file" name="one" size="20" />
<input type="file" name="two" size="30" />
<input type="file" name="three" size="40" />

<br /><br />
<input type="submit" value="upload" />

</form>

</body>
</html>

I am uploading the files like this

        $config['upload_path'] = realpath(FCPATH.'uploads');
        $config['allowed_types']= "gif|jpg|png|jpeg|pdf";
        $config['overwrite'] = TRUE;
        $config['max_size'] = "2048000"; 
        $config['max_height'] = "5000";
        $config['max_width'] = "5000";
        $this->load->library('upload', $config);
        

        if ( ! $this->upload->do_upload('one'))
        {
                $error = array('error' => $this->upload->display_errors());

                $this->load->view('normal_upload', $error);
        }
         if ( ! $this->upload->do_upload('two'))
        {
                $error = array('error' => $this->upload->display_errors());

                //$this->load->view('normal_upload', $error);
        }
         if ( ! $this->upload->do_upload('three'))
        {
                $error = array('error' => $this->upload->display_errors());

                //$this->load->view('normal_upload', $error);
        }
        else
        {
          $data = array('upload_data' => $this->upload->data());
          echo $data['upload_data']['full_path'].'<br/>';

          //$this->load->view('normal_upload', $data);
                
        }

I would like to get the file names,paths of all files uploaded. If i select files in all form fields, the files are getting uploaded but this:

echo $data['upload_data']['full_path'].'<br/>';

only gets one file path. How can i get the file paths and rename the files uploaded?

That still outputs the last file uploaded.

Gandalf
– Gandalf

2020-07-22 14:11:23 +00:00
Commented Jul 22, 2020 at 14:11 — Gandalf
– Gandalf, Commented Jul 22, 2020 at 14:11
Thats what i am doing.

Gandalf
– Gandalf

2020-07-22 14:22:26 +00:00
Commented Jul 22, 2020 at 14:22 — Gandalf
– Gandalf, Commented Jul 22, 2020 at 14:22
You can try it yourself. That only outputs only one file.

Gandalf
– Gandalf

2020-07-22 14:32:53 +00:00
Commented Jul 22, 2020 at 14:32 — Gandalf
– Gandalf, Commented Jul 22, 2020 at 14:32

marcogmonteiro · Accepted Answer · 2020-07-22 17:21:36Z

1

Loading the library with $this->load->library('upload', $config); works when you're uploading just one file. However when you're uploading more than one file you need to reinitialize the library with the config.

More information about this here:

https://codeigniter.com/userguide3/libraries/file_uploading.html#initializing-the-upload-class

Like so:

$this->load->library('upload');
$this->upload->initialize($config);
if ( ! $this->upload->do_upload('one'))
{
        $error = array('error' => $this->upload->display_errors());

        $this->load->view('normal_upload', $error);
}
$data['one'] = array('upload_data' => $this->upload->data());
$this->upload->initialize($config);
 if ( ! $this->upload->do_upload('two'))
{
        $error = array('error' => $this->upload->display_errors());

        //$this->load->view('normal_upload', $error);
}
 $data['two'] = array('upload_data' => $this->upload->data());
 $this->upload->initialize($config);
 if ( ! $this->upload->do_upload('three'))
{
        $error = array('error' => $this->upload->display_errors());

        //$this->load->view('normal_upload', $error);
}
$data['three'] = array('upload_data' => $this->upload->data());

Then you can access the file data with something like:

$data['one']['upload_data']['full_path'];
$data['two']['upload_data']['full_path'];
$data['three']['upload_data']['full_path'];

edited Jul 22, 2020 at 17:21

marcogmonteiro

2,1571 gold badge17 silver badges26 bronze badges

answered Jul 22, 2020 at 14:42

Barbara Bettencourt Cravo

266 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gandalf Over a year ago

The code could upload the way it was. Its fetching the file names to manipulate them some way that was the problem.

marcogmonteiro Over a year ago

@Gandalf added a way where that can be done with the default Codeigniter methods. It's been approved by mods.

Gandalf Over a year ago

@marcogmonteiro Let me have a look before accepting that as an answer.

marcogmonteiro Over a year ago

@Gandalf one of my edits to the answer is still pending review :)

Gandalf · Accepted Answer · 2020-07-23 10:40:23Z

Turns out its not that straight forward. The following code:

Uploads image files and pdfs only, only images and pdfs are allowed
Renames uploaded files
Strips all spaces in uploaded files

public function normal_upload(){
    $uploadLocation = "uploads/";
    $uploadMainTo = null;
    if(isset($_FILES['MainImage'])){
        
    $path = $_FILES['MainImage']['name']; // file means your input type file name
    $ext = pathinfo($path, PATHINFO_EXTENSION);
    
    if ($ext=="jpg" OR $ext=="jpeg" OR $ext=="gif" OR $ext=="png" OR $ext=="pdf") {
        echo "Upload successful";
    }else{
        // your invalid code here like...
        echo "Invalid image format. Only upload JPG or JPEG or GIF or PNG";
        header('Location: http://localhost/upload_app/info/nu');
    exit;
    }
    
    
      $main_image_name = $_FILES['MainImage']['name'];
      $main_image_size = $_FILES['MainImage']['size'];
      $main_image_tmp = $_FILES['MainImage']['tmp_name'];
      $uploadMainTo = $uploadLocation.sa(time().mt_rand(43,672882).bin2hex(random_bytes(16)).trim($main_image_name));
      $moveMain = move_uploaded_file($main_image_tmp,$uploadMainTo);
      
      
      echo $uploadMainTo.'<br/>';
    }
    
    $uploadSecondTo = null;
    if(isset($_FILES['SecondImage'])){
        
    $path = $_FILES['SecondImage']['name']; // file means your input type file name
    $ext = pathinfo($path, PATHINFO_EXTENSION);
    
    if ($ext=="jpg" OR $ext=="jpeg" OR $ext=="gif" OR $ext=="png" OR $ext=="pdf") {
        // your code here like...
        echo "Upload successful";
    }else{
        // your invalid code here like...
        echo "Invalid image format. Only upload JPG or JPEG or GIF or PNG";
        header('Location: http://localhost/upload_app/info/nu');
    exit;
    }
    
    
      $second_image_name = $_FILES['SecondImage']['name'];
      $second_image_size = $_FILES['SecondImage']['size'];
      $second_image_tmp = $_FILES['SecondImage']['tmp_name'];
      $uploadMainTo = $uploadLocation.sa(time().mt_rand(43,672882).bin2hex(random_bytes(16)).trim($main_image_name));
      $moveSecond = move_uploaded_file($second_image_tmp,$uploadSecondTo);
      echo $uploadSecondTo.'<br/>';
    }
    
    $uploadPdfTo = null;
    if(isset($_FILES['PDF'])){
    
    $path = $_FILES['PDF']['name']; // file means your input type file name
    $ext = pathinfo($path, PATHINFO_EXTENSION);
    
    if ($ext=="jpg" OR $ext=="jpeg" OR $ext=="gif" OR $ext=="png" OR $ext=="pdf") {
        // your code here like...
        echo "Upload successful";
    }else{
        // your invalid code here like...
        echo "Invalid image format. Only upload JPG or JPEG or GIF or PNG";
        header('Location: http://localhost/upload_app/info/nu');
    exit;
    }
    
    
      $pdf_name = $_FILES['PDF']['name'];
      $pdf_size = $_FILES['PDF']['size'];
      $pdf_tmp = $_FILES['PDF']['tmp_name'];
      $uploadMainTo = $uploadLocation.sa(time().mt_rand(43,672882).bin2hex(random_bytes(16)).trim($main_image_name));
      $movepdf = move_uploaded_file($pdf_tmp,$uploadPdfTo);
      echo $uploadPdfTo.'<br/>';
    }
    
    }

define a helper sa_helper.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

if ( ! function_exists('sa')){
function sa($string){
    return str_replace(' ', '', $string);
}
   }
?>

and this is your view

<head>
<title>Upload Form</title>
</head>
<body>
<?php echo form_open_multipart('info/normal_upload');?>

<input type="file" name="PDF">
<input type="file" name="MainImage">
<input type="file" name="SecondImage">

<br /><br />
<input type="submit" value="upload" />

</form>

</body>
</html>

To upload files using jquery, use this form, it works as well

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#form_img").submit(function(e){
            e.preventDefault();
            var formData = new FormData($("#form_img")[0]);

            $.ajax({
                url : $("#form_img").attr('action'),
                type : 'POST',
                data : formData,
                contentType : false,
                processData : false,
                success: function(resp) {
                    console.log(resp);                        
                }
            });
        });
    });

</script>

<form action="http://localhost/upload_app/info/normal_upload" id="form_img" method="GET" role="form" enctype="multipart/form-data">
<input type="file" name="PDF">
<input type="file" name="MainImage">
<input type="file" name="SecondImage">
  <button type="submit">Submit </button>
</form>

Collectives™ on Stack Overflow

Upload multiple files using multiple input fields

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related