Javascript Upload de foto não salva na pasta

Air-Gear · 1 de novembro de 2021

Olá!

Eu estou trabalhando um código que faz um upload de uma foto e salva numa pasta na hospedagem. Eu fiz o esquema de escolher somente fotos e mostrar o nome e os dados do arquivo e ate aí tudo bem, mas eu não conseguir salvar na pasta "upload". Inspecionei o código e não apontou um erro exato. Seguem o código:

solicitacao-compras.html

<div class="row">
                
                <div class="col-sm-12 col-md-2">
                    <div class="upload_form_cont">
                        <label>Foto</label>
                        <img id="preview" />                                                
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 ">
                    
                    <div class="upload_form_cont">                       
                        <form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload">
                            <div>
                                <div><label for="image_file">Selecione o arquivo de imagem</label></div>
                                <div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div>
                            </div>
                            <div>
                                <input type="button" value="Upload" onclick="startUploading()" />
                            </div>
                            <div id="fileinfo">
                                <div id="filename"></div>
                                <div id="filesize"></div>
                                <div id="filetype"></div>
                                <div id="filedim"></div>
                            </div>
                            <div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div>
                            <div id="error2">Ocorreu um erro ao enviar o arquivo</div>
                            <div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div>
                            <div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div>
                            <div id="progress_info">
                                <div id="progress"></div>
                                <div id="progress_percent">&nbsp;</div>
                                <div class="clear_both"></div>
                                <div>
                                    <div id="speed">&nbsp;</div>
                                    <div id="remaining">&nbsp;</div>
                                    <div id="b_transfered">&nbsp;</div>
                                    <div class="clear_both"></div>
                                </div>
                                <div id="upload_response"></div>
                            </div>
                            
                        </form>
                    </div>

                </div>
            </div>

upload-foto.js

var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = '';
function secondsToTime(secs) { // vamos usar esta função para converter os segundos no formato de hora normal
    var hr = Math.floor(secs / 3600);
    var min = Math.floor((secs - (hr * 3600))/60);
    var sec = Math.floor(secs - (hr * 3600) -  (min * 60));
    if (hr < 10) {hr = "0" + hr; }
    if (min < 10) {min = "0" + min;}
    if (sec < 10) {sec = "0" + sec;}
    if (hr) {hr = "00";}
    return hr + ':' + min + ':' + sec;
};
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
function fileSelected() {
    // esconder diferentes avisos
    document.getElementById('upload_response').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('error2').style.display = 'none';
    document.getElementById('abort').style.display = 'none';
    document.getElementById('warnsize').style.display = 'none';
    // obter o elemento de arquivo selecionado
    var oFile = document.getElementById('image_file').files[0];
    // filtro para arquivos de imagem
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
    if (! rFilter.test(oFile.type)) {
        document.getElementById('error').style.display = 'block';
        return;
    }
    // pequeno teste para o tamanho do arquivo
    if (oFile.size > iMaxFilesize) {
        document.getElementById('warnsize').style.display = 'block';
        return;
    }
    // obter elemento de visualização
    var oImage = document.getElementById('preview');
    // preparar HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e){
        // e.target.result contém o DataURL que usaremos como fonte da imagem
        oImage.src = e.target.result;
        oImage.onload = function () { // binding onload event
            // vamos exibir algumas informações de imagem personalizada aqui
            sResultFileSize = bytesToSize(oFile.size);
            document.getElementById('fileinfo').style.display = 'block';
            document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
            document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
            document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
            document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
        };
    };
    // ler o arquivo selecionado como DataURL
    oReader.readAsDataURL(oFile);
}
function startUploading() {
    // limpar todos os estados de temperatura
    iPreviousBytesLoaded = 0;
    document.getElementById('upload_response').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('error2').style.display = 'none';
    document.getElementById('abort').style.display = 'none';
    document.getElementById('warnsize').style.display = 'none';
    document.getElementById('progress_percent').innerHTML = '';
    var oProgress = document.getElementById('progress');
    oProgress.style.display = 'block';
    oProgress.style.width = '0px';
    // obter dados do formulário para POSTAGEM
    //var vFD = document.getElementById ('upload_form'). getFormData ();// para FF3
    var vFD = new FormData(document.getElementById('upload_form'));
    // crie o objeto XMLHttpRequest, adicionando alguns ouvintes de evento e POSTANDO nossos dados
    var oXHR = new XMLHttpRequest();
    oXHR.upload.addEventListener('progress', uploadProgress, false);
    oXHR.addEventListener('load', uploadFinish, false);
    oXHR.addEventListener('error', uploadError, false);
    oXHR.addEventListener('abort', uploadAbort, false);
    //oXHR.open('POST', 'upload.php', true);
    oXHR.send(vFD);
    // definir cronômetro interno
    oTimer = setInterval(doInnerUpdates, 300);
}
function doInnerUpdates() { // vamos usar esta função para mostrar a velocidade de upload
    var iCB = iBytesUploaded;
    var iDiff = iCB - iPreviousBytesLoaded;
    // se nada novo carregado - sair
    if (iDiff == 0)
        return;
    iPreviousBytesLoaded = iCB;
    iDiff = iDiff * 2;
    var iBytesRem = iBytesTotal - iPreviousBytesLoaded;
    var secondsRemaining = iBytesRem / iDiff;
    // atualizar informação de velocidade
    var iSpeed = iDiff.toString() + 'B/s';
    if (iDiff > 1024 * 1024) {
        iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';
    } else if (iDiff > 1024) {
        iSpeed =  (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';
    }
    document.getElementById('speed').innerHTML = iSpeed;
    document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);
}
function uploadProgress(e) { // processo de upload em andamento
    if (e.lengthComputable) {
        iBytesUploaded = e.loaded;
        iBytesTotal = e.total;
        var iPercentComplete = Math.round(e.loaded * 100 / e.total);
        var iBytesTransfered = bytesToSize(iBytesUploaded);
        document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';
        document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';
        document.getElementById('b_transfered').innerHTML = iBytesTransfered;
        if (iPercentComplete == 100) {
            var oUploadResponse = document.getElementById('upload_response');
            oUploadResponse.innerHTML = '<h1>Aguarde ... processando</h1>';
            oUploadResponse.style.display = 'block';
        }
    } else {
        document.getElementById('progress').innerHTML = 'unable to compute';
    }
}

function salvarFoto(e){
    const express = require('express');    
    const multer = require('multer');
    const app = express();   
    var port = 3000;

    var storage = multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './upload')
        },
        filename: function (req, file, cb) {
            cb(null, file.originalname)
        }
    })
    var upload = multer({ storage: storage })

    app.use('/a',express.static('/b'));

    app.use(express.static(__dirname + '/public'));
    app.use('/uploads', express.static('../upload'));

    app.post('/profile-upload', upload.single('image_file'), function (req, res, next) {
        console.log(JSON.stringify(req.file))
        var response = '<a href="/">Home</a><br>'
        response += "Arquivos enviados com sucesso.<br>"
        response += `<img src="${req.file.path}" /><br>`
        return res.send(response)
    })

    app.listen(port,() => console.log(`Server running on port ${port}!`))
}

function uploadFinish(e) { // upload concluído com sucesso
    var oUploadResponse = document.getElementById('upload_response');
    oUploadResponse.innerHTML = e.target.responseText;
    oUploadResponse.style.display = 'block';
    document.getElementById('progress_percent').innerHTML = '100%';
    document.getElementById('progress').style.width = '400px';
    document.getElementById('filesize').innerHTML = sResultFileSize;
    document.getElementById('remaining').innerHTML = '| 00:00:00';
    clearInterval(oTimer);
    salvarFoto();
}
function uploadError(e) { // erro de upload
    document.getElementById('error2').style.display = 'block';
    clearInterval(oTimer);
}
function uploadAbort(e) { // upload abortado
    document.getElementById('abort').style.display = 'block';
    clearInterval(oTimer);
}

Air-Gear · 12 de novembro de 2021

Bom, eu não fiquei parado e acabei utilizando PHP para fazer isso porque não achei outra solução melhor. Segue o código:

upload.php

<?php

$id_url = $_GET['id'];

function bytesToSize1024($bytes, $precision = 2) {
    $unit = array('B','KB','MB');
    return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}

$sFileName = $_FILES['image_file']['name'];
$sFileType = $_FILES['image_file']['type'];
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1);

$TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION);

//Local da pasta
$_UP['pasta'] = '../upload/';


if ($_FILES['image_file']['error'] != 0) {
  die("Não foi possível fazer o upload, erro:" . $_UP['erros'][$_FILES['image_file']['error']]);
  exit; // Para a execução do script
}

// O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta
// Primeiro verifica se deve trocar o nome do arquivo   
$unixTime = time();
$timeZone = new \DateTimeZone('America/Sao_Paulo');

$time = new \DateTime();
$time->setTimestamp($unixTime)->setTimezone($timeZone);

$formattedTime = $time->format('d-m-Y_l_h-i-s-a');
   
$aleatorio = rand();

if($TipoExtensao == 'pdf'){
  $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf';
}else{  
  $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg';
}

// Depois verifica se é possível mover o arquivo para a pasta escolhida
if (move_uploaded_file($_FILES['image_file']['tmp_name'], $_UP['pasta'] . $nome_final)) {
    // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo
    echo "Upload efetuado com sucesso!";
  } else {
    // Não foi possível fazer o upload, provavelmente a pasta está incorreta
    echo "Não foi possível enviar o arquivo, tente novamente";
  }  
//Fim do novo código

echo <<<EOF
<p></p>
<p>Tipo: {$sFileType}</p>
<p>Tamanho: {$sFileSize}</p>

EOF;

O $id_url = $_GET['id']; do upload.php pega o id do usuário no qual é lido no oXHR.open('POST', 'app/views/upload.php?id='+buscarID); que está no arquivo upload-foto.js. O id vai ser utilizado pra renomear o arquivo.

O $_UP['pasta'] = '../upload/'; especifica o local onde a imagem vai ser salva.

Acrescentei salvar PDF também e vai ser salvo como PDF enquanto todas as imagens vão ser salvas como JPG. O $TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION); pega o tipo de extensão do arquivo e é utilizado no if($TipoExtensao == 'pdf'){

No mais, resolvido a questão do upload da foto e salvar na pasta upload. Agora eu preciso que salve não uma, mas varias fotos e PDFs de uma vez.

GabrielSennaMs · 13 de novembro de 2021

@Air-Gear

Acho que isso pode te ajudar

<?php

if ($_SERVER['REQUEST_METHOD'] == "POST")
{
    $files         = [];
    $request_files = $_FILES['files'];
    $num_temp_file = 0;

    if (is_array($request_files) and count($request_files) > 0)
    {
        $num_temp_file = count($request_files['tmp_name']);
    }

    if ($num_temp_file > 0)
    {
        for ($num = 0; $num < $num_temp_file; $num++)
        {
            $file = array();

            foreach ($request_files as $index => $array)
            {
                $file[$index] = $array[$num];
            }

            array_push($files, $file);
        }
    }
  
    print_r($files);
}

?>
<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <form action="/" method="post" enctype="multipart/form-data">
            <input accept="image/*" type="file" name="files[]" multiple>
            <button type="submit" >
                Upload
            </button>
        </form>
    </body>
</html>

Air-Gear · 16 de novembro de 2021

Bom no final eu conseguir fazer e utilizei o EOF pra achar os erros e ter noção do que o código faz, além de claro conseguir salvar varias imagens de formatos diferentes mais PDF ao mesmo tempo. No código renomeia todos os arquivos mantendo o formato PDF e colocando todas as imagens em JPG. Código pronto e concluído.

<?php
function bytesToSize1024($bytes, $precision = 2) {
  $unit = array('B','KB','MB');
  return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}

//Pega o id do usuário logado
$id_url = $_GET['id'];

// Numero de campos de upload
$numeroCampos = count($_FILES['image_file']['name']);

// Tamanho máximo do arquivo (em bytes)
$tamanhoMaximo = 1024*1024*2;

// Extensões aceitas
$extensoes = array(".jpg", "jpeg", ".gif", ".png", ".pdf", ".bmp", ".pdf", ".tiff");

//Local da pasta
$_UP['pasta'] = '../upload/';

$substituir = false;

for ($i = 0; $i < $numeroCampos; $i++) {
   // Informações do arquivo enviado
  $sFileName = $_FILES['image_file']['name'][$i];
  $sSize = $_FILES['image_file']['size'][$i];
  $sFileSize = bytesToSize1024($sSize, 1);
  $nomeTemporario = $_FILES['image_file']['tmp_name'][$i];

  // Verifica se o arquivo foi colocado no campo
  if (!empty($sFileName)) {
    
    $erro = false;

    // Verifica se o tamanho do arquivo é maior que o permitido
    if ($sSize > $tamanhoMaximo) {
        $erro = "O arquivo " . $sFileName . " não deve ultrapassar " . $tamanhoMaximo. " bytes";
    }

    // Verifica se a extensão está entre as aceitas
    elseif (!in_array(strrchr($sFileName, "."), $extensoes)) {
        $erro = "A extensão do arquivo <b>" . $sFileName . "</b> não é válida";
    }

    // Verifica se o arquivo existe e se é para substituir
    elseif (file_exists($_UP['pasta'] . $sFileName) and !$substituir) {
        $erro = "O arquivo <b>" . $sFileName . "</b> já existe";
    }

    else{
      //Pega a extensão do arquivo
      $TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION);

      // O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta
      // Primeiro verifica se deve trocar o nome do arquivo   
      $unixTime = time();
      $timeZone = new \DateTimeZone('America/Sao_Paulo');

      $time = new \DateTime();
      $time->setTimestamp($unixTime)->setTimezone($timeZone);

      $formattedTime = $time->format('d-m-Y_l_h-i-s-a');
          
      $aleatorio = rand();

      if($TipoExtensao == 'pdf'){
        $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf';
      }else{  
        $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg';
      }

      // Depois verifica se é possível mover o arquivo para a pasta escolhida
      if (move_uploaded_file($nomeTemporario, $_UP['pasta'] . $nome_final)) {
        // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo
        echo "Upload do arquivo ".$sFileName." foi efetuado com sucesso!";
      } else {
        // Não foi possível fazer o upload, provavelmente a pasta está incorreta
        echo "Não foi possível enviar o arquivo, tente novamente";
      }  
    }

    echo <<<EOF
<p></p>
<p>Nome: {$sFileName} Tamanho: {$sFileSize}</p>
<p>{$erro}</p>
<p></br></p>
<p>Posição: {$i}</p>
<p>Algum erro?: {$erro}</p>
<p>Nome Inicial: {$sFileName}</p>
<p>Nome Temporário: {$nomeTemporario}</p>
<p>Nome Final: {$nome_final}</p>
<p>Tamanho: {$sFileSize}</p>
<p></br></p>

EOF;
  }else{
    echo "Selecione algum arquivo de imagem ou PDF para fazero upload.";
  }
}
echo <<<EOF
<p></p>
<p>Número de arquivos adicionados no upload: {$numeroCampos}</p>



EOF;