Múltiplos Uploads com PHP, Mysql e Ajax - #12 Validação de Dados

Na aula de hoje faremos as validações nos tipos de arquivos enviados pelo usuário, verificando se eles atendem aos requisitos do sistema.

Validação de arquivos

Vamos iniciar nossa validação pelo frontend, trabalhando diretamente no html:

<div class="fields"><label class="filesLabel" for="files"><input type="file" name="files[]" id="files" accept="image/*" multiple>Enviar arquivos</label></div>

No código acima estamos definindo que aceitaremos apenas arquivos do tipo imagem (jpg, png...).

Precisamos também fazer a validação no lado servidor. Vamos abrir a ClassUpload e implementar as atualizações. Primeiramente testaremos as extensões do arquivo, para isso pegaremos a extensão com o método abaixo:

#Get file extension
private function getExtension()
{
    $ext=explode(".",$this->getAbsFile());
    $ext=end($ext);
    return $ext;
}

Criaremos também um atributo com getters and setters para receber os erros de validação:

private $erro=[];
public function getErro(){return $this->erro;}
public function setErro($erro){
    if(!in_array($erro,$this->getErro())){
        array_push($this->erro,$erro);
    }
}

Podemos também fazer outras validações como por exemplo do tamanho do arquivo.

#Move files
public function moveFiles()
{
    if($this->getExtension() === 'png' || $this->getExtension() === 'jpg'){
        if($this->getFile()['size'][$this->getCount()] < 700000){
            move_uploaded_file($this->getFile()['tmp_name'][$this->getCount()],$this->getAbsFile());
            $this->insertDB("files", "?,?,?", array(0, $this->ads->getNextId(), $this->getAbsFile()));
        }else{
            $this->setErro('Pelo menos um dos arquivos tem mais de 700kb');
        }
    }else{
        $this->setErro('Pelo menos um dos arquivos não é do tipo png');
    }
}

No javascript vamos implementar o método onloadend:

//Upload
function upload() {
    let ajax=new XMLHttpRequest();
    let formData=new FormData(doc.querySelector('#form'));
    ajax.open('POST',getRoot()+'controllers/controllerUpload');
    ajax.onloadend=function(){
      let divFiles=doc.querySelector('.divFiles');
      divFiles.style.display='block';
      divFiles.innerHTML=ajax.responseText;
    };
    ajax.send(formData);
}
if(doc.querySelector('#files')){
    let files=doc.querySelector('#files');
    files.addEventListener('change',upload,false);
}

Por hoje é só! Sucesso nos códigos e na vida!