Blog astuces web et SEO

Une nouvelle version beaucoup plus optimisée pour l’envoi de plusieurs fichiers en même temps en utilisant codeIgniter est disponible ici

Hi all,

C’est vraiment ennuyant d’envoyer les fichiers un par un quand on a plusieurs fichier à uploader comme par exemple des images pour une galerie.

Heureusement, que HTML 5 permet maintenant l’envoi de plusieurs fichiers en même temps en utilisant l’attribut « multiple » qui est supporté par la majorité des navigateurs web.

<input type="file" name="img" multiple>

Pour se servir de cet attribut pour uploader des fichiers en utilisant le framework PHP CodeIgniter dans sa version 3, on a besoin de quelques restructuration pour pouvoir uploader les fichiers correctement et en toute sécurité en utilisant la fonctionnalité (library) d’upload de fichier native de codeIgniter (system/libraries/Upload.php).

Au début, on va créer le formulaire d’upload (on peut créer le formulaire d’upload en utilisant le « Form helper » de CI mais ici je vais faire simple et créer un simple formulaire HTML):

<form action="/gallery/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="images[]" multiple="multiple">
    <button class="btn btn-success">Submit</button>
</form>

Une fois on a créé la vue, on passe maintenant aux choses sérieuses: le controller

Si on fait un var_dump() de l’array $_FILES reçu après l’envoi du formulaire, on aura quelque chose comme ça:

array (size=1)
  'images' => 
    array (size=5)
      'name' => 
        array (size=4)
          0 => string '363421CB-B134-4707-A760-034DC7A7159B.JPG' (length=40)
          1 => string '7406286B-F289-42DF-9EF1-52BBE3EC16C9.JPG' (length=40)
          2 => string 'BA02FF38-FCFE-4E28-A2E5-FDD78D6EDF21.JPG' (length=40)
          3 => string 'C0A39E48-99BD-42D9-A1E4-55EAC40238D7.JPG' (length=40)
      'type' => 
        array (size=4)
          0 => string 'image/jpeg' (length=10)
          1 => string 'image/jpeg' (length=10)
          2 => string 'image/jpeg' (length=10)
          3 => string 'image/jpeg' (length=10)
      'tmp_name' => 
        array (size=4)
          0 => string 'C:\wamp\tmp\phpABB9.tmp' (length=23)
          1 => string 'C:\wamp\tmp\phpABBA.tmp' (length=23)
          2 => string 'C:\wamp\tmp\phpABBB.tmp' (length=23)
          3 => string 'C:\wamp\tmp\phpABCC.tmp' (length=23)
      'error' => 
        array (size=4)
          0 => int 0
          1 => int 0
          2 => int 0
          3 => int 0
      'size' => 
        array (size=4)
          0 => int 473916
          1 => int 656229
          2 => int 681062
          3 => int 462068

Nous avons donc besoin de restructurer le tableau (array) pour le passer ensuite à la fonctionnalité d’upload.

Tout ce qu’il nous faut c’est quelques foreach et le tour est joué:

/* 
First we create formated array for files to upload
we clean $_FILES array because we need it later
the upload library is using it for upload	
*/
$uploaded_files = $_FILES;
$_FILES = array();
foreach ($uploaded_files as $file):
	foreach ($file['name'] as $key => $value):
		$_FILES['file'.$key]['name'] = $value;
	endforeach;
	foreach ($file['type'] as $keyz => $valuez):
		$_FILES['file'.$keyz]['type'] = $valuez;
	endforeach;		
	foreach ($file['tmp_name'] as $keyx => $valuex):
		$_FILES['file'.$keyx]['tmp_name'] = $valuex;
	endforeach;
	foreach ($file['error'] as $keyq => $valueq):
		$_FILES['file'.$keyq]['error'] = $valueq;
	endforeach;
	foreach ($file['size'] as $keyt => $valuet):
		$_FILES['file'.$keyt]['size'] = $valuet;
	endforeach;
endforeach;

Maintenant nous avons un array formaté que nous pouvons utiliser pour uploader les fichiers. Voilà ce qu’un var_dump($_FILES) donne:

array (size=4)
  'file0' => 
    array (size=5)
      'name' => string '363421CB-B134-4707-A760-034DC7A7159B.JPG' (length=40)
      'type' => string 'image/jpeg' (length=10)
      'tmp_name' => string 'C:\wamp\tmp\php77A3.tmp' (length=23)
      'error' => int 0
      'size' => int 473916
  'file1' => 
    array (size=5)
      'name' => string '7406286B-F289-42DF-9EF1-52BBE3EC16C9.JPG' (length=40)
      'type' => string 'image/jpeg' (length=10)
      'tmp_name' => string 'C:\wamp\tmp\php77A4.tmp' (length=23)
      'error' => int 0
      'size' => int 656229
  'file2' => 
    array (size=5)
      'name' => string 'BA02FF38-FCFE-4E28-A2E5-FDD78D6EDF21.JPG' (length=40)
      'type' => string 'image/jpeg' (length=10)
      'tmp_name' => string 'C:\wamp\tmp\php77B5.tmp' (length=23)
      'error' => int 0
      'size' => int 681062
  'file3' => 
    array (size=5)
      'name' => string 'C0A39E48-99BD-42D9-A1E4-55EAC40238D7.JPG' (length=40)
      'type' => string 'image/jpeg' (length=10)
      'tmp_name' => string 'C:\wamp\tmp\php77B6.tmp' (length=23)
      'error' => int 0
      'size' => int 462068

Il ne nous reste que d’initialiser la librairie « upload » avec notre configuration:

// we load upload library with our config
$upload_dir = $this->config->item('upl_dir');
$config['upload_path'] = $upload_dir.'uploads\\';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size']     = '2048';
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);

La dernière étape consiste à faire un boucle foreach pour envoyer les fichiers un par un:

// now we can loop and upload files
foreach($_FILES as $fa => $za):
    if ( ! $this->upload->do_upload($fa)):
    	// if we have errors we add'em to error array
        $error[$fa] = array('error' => $this->upload->display_errors());
    else:
    	// save upload result into upload_data array
        $upload_data[$fa] = $this->upload->data();
    endif;
endforeach;

Voici le code complet pour uploader plusieurs fichiers en même temps avec HTML 5 et CodeIgniter 3

<form action="/profile/galleryupload" method="post" enctype="multipart/form-data">
    <input type="file" name="images[]" multiple="multiple">
    <button class="btn btn-success">Submit</button>
</form>

/* 
First we create formated array for files to upload
we clean $_FILES array because we need it later
the upload library is using it for upload	
*/
$uploaded_files = $_FILES;
$_FILES = array();
foreach ($uploaded_files as $file):
	foreach ($file['name'] as $key => $value):
		$_FILES['file'.$key]['name'] = $value;
	endforeach;
	foreach ($file['type'] as $keyz => $valuez):
		$_FILES['file'.$keyz]['type'] = $valuez;
	endforeach;		
	foreach ($file['tmp_name'] as $keyx => $valuex):
		$_FILES['file'.$keyx]['tmp_name'] = $valuex;
	endforeach;
	foreach ($file['error'] as $keyq => $valueq):
		$_FILES['file'.$keyq]['error'] = $valueq;
	endforeach;
	foreach ($file['size'] as $keyt => $valuet):
		$_FILES['file'.$keyt]['size'] = $valuet;
	endforeach;
endforeach;

// we load upload library with our config
$upload_dir = $this->config->item('upl_dir');
$config['upload_path'] = $upload_dir.'uploads\\';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size']     = '2048';
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);

// now we can loop and upload files
foreach($_FILES as $fa => $za):
    if ( ! $this->upload->do_upload($fa)):
    	// if we have errors we add'em to error array
        $error[$fa] = array('error' => $this->upload->display_errors());
    else:
    	// save upload result into upload_data array
        $upload_data[$fa] = $this->upload->data();
    endif;
endforeach;