Upload image Php Bootstrap File Input (Undefined offset)

Question

I’m using the Plugin Bootstrap File Input

And it’s returning to me 'Notice: Undefined offset:'

Codes

<input id="file-upload" name="files[]" type="file" multiple>

Form already has the enctype="multipart/form-data">

Post:

$fdata = $_FILES['files'];
$uploads_dir = 'images/';
$img = array();
for ($i = 0; $i < count($fdata['name']); $i++) {

preg_match("/\.(gif|bmp|png|jpg|jpeg){1}$/i", $_FILES['files']['name'][$i], $ext);
$imagem_nome = md5(uniqid(time())) . "." . $ext[1];

$temp_name = $_FILES['files']['tmp_name'][$i];
move_uploaded_file($temp_name, "$uploads_dir"."$imagem_nome");
$img[] = $imagem_nome;
}

This is the Upload.

Even giving an echo in:

 echo $_FILES['files']['name']['0'];

Nothing appears

Answer 1

Here I included a isset(), to see if there was shipping:

$uploads_dir = 'images/';
$extok = array( 'jpg', 'jpeg', 'gif', 'png', 'bmp' );

$img = array();
if( isset( $_FILES['files'] ) ) {
   $fdata = $_FILES['files'];
   $count = count( $fdata['name'] );

   for ($i = 0; $i < $count; ++$i ) {
      $ext = pathinfo( $fdata['name'][$i], PATHINFO_EXTENSION);

      if( in_array( strtolower( $ext ), $extok ) ) { 
         $imagem_nome = uniqid().'.'.$ext;
         $temp_name = $fdata['tmp_name'][$i];

         move_uploaded_file($temp_name, $uploads_dir.$imagem_nome );
         $img[] = $imagem_nome;
      }
   }
}

I took advantage and replaced the extension Regex for an appropriate function, and checking the acceptable extensions.

I also took the MD5 from uniquid. The only thing that uniqid makes good, is to get a unique ID. Making MD5 of it, just spoiled the uniqid.

The time() within the uniqid() also does not make sense, was removed.

If you prefer, you can use multiple="multiple", not to leave an empty attribute:

<input id="file-upload" name="files[]" type="file" multiple="multiple">

Answer 2

Solved, I stopped using the Bootstrap File Input, in fact the same only works with Drag and Drop if the upload is done via Ajax.

I am using HTML5.

<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>

<input type="file" id="files" name="files[]"  multiple="multiple" />
<output id="list"></output>

Javascript:

  function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
 }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

In the Post

        if(count($_FILES['files']['name']) > 0)
        {
            for($i=0; $i<count($_FILES['files']['name']); $i++)
            {
                //Get the temp file path
                $tmpFilePath = $_FILES['files']['tmp_name'][$i];

                //Make sure we have a filepath
                if($tmpFilePath != "")
                {

                    $shortname = $_FILES['files']['name'][$i];
                    $filePath = "images/anuncios/" . date('d-m-Y-H-i-s').'-'.$_FILES['files']['name'][$i];
                    if(move_uploaded_file($tmpFilePath, $filePath))
                    {
                        $files[] = $shortname;
                        //insert into db
                        //use $shortname for the filename
                        //use $filePath for the relative url to the file
                    }
                }
            }
        }