Dúvida Dropzone.js + MySql + PHP

25/08/2019

0

Eu sou iniciante e comecei a desenvolver um site para uma possível ERP, a nível de estudos. O nível de complexidade desse tipo de sistemas é elevado, e eu dedico grande parte do meu tempo no estudo de todas as linhas de código que eu vou encontrando, editando e adaptando de acordo com a minha necessidade.

Resultado: Aprendo bastante mas muitas vezes caio em uma verdadeira salada de frutas, com frutas podres, e não consigo encontrar os frutos necessários em boas condições para poder fazer uma nova salada de frutas.

Deixando a metáfora de lado, eu estou desenvolvendo um formulário para envio de demandas, nesse formulário o usuário administrador vai através do painel, digitar o título, o conteúdo da demanda e "dropar" arquivos, caso houver, através do dropzone.js.

A nível de ambientação:
Eu criei duas tabelas, a que iria receber os dados do formulário da demanda e o que iria receber os arquivos.
Como eu precisava referenciar que determinado arquivo pertencia a determinada demanda, eu coloquei um campo chamado "IDREFERENTE" na tabela dos arquivos, através dele, eu deveria gravar a ID da demanda a qual a imagem pertencia.

1º Problema [Resolvido]:

O dropzone vem como padrão inserido em uma classe no form, quando eu tentava adicionar os inputs, acabava ficando dentro do dropzone, porém eu consegui colocar o dropzone dentro da <div> e solucionar o primeiro problema, através do código:

$(function() {
    $("div#myDropZone").dropzone({
        url : "upload.php"
    });
});


2º Problema [Resolvido]:

Após diversas tentativas, descobri que não conseguiria enviar os dados separados, já que o dropzone enviaria através do javascript para o php, e meu formulário enviaria direto do html para o php. Então, descobri que era possível armazenar os outros dados do formulário no javascript e enviar direto para o arquivo upload.php.
Eu consegui desta forma:

Dropzone.options.myDropzone= {
    url: ''upload.php'',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: ''image/*'',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that ''this'' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("uploadfiles").addEventListener("click", function(e) {
            // Make sure that the form isn''t actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("demanda", jQuery("#demanda").val());
            formData.append("titulo", jQuery("#titulo").val());
        });
    }
}


3º Problema [NÃO RESOLVIDO]:

Enfim consegui enviar os dados do formulário, fazer upload dos arquivos e gravar no banco de dados, tudo referenciado, bonitinho.
Porém, nem tudo é perfeito, mas só quando fazia upload de uma imagem.
Percebi que quando fazia upload de arquivos acima de 1MB, entrava valores em branco na tabela das demandas, e não entrava nada na tabela dos arquivos.

4º Problema [NÃO RESOLVIDO]:

Preciso enviar o FORM independentemente se houver arquivo ou não.
Eu não consigo enviar o formulário sem o arquivo.

5º Problema [NÃO RESOLVIDO]:

Depois que eu conseguir solucionar o problema 3 e 4, eu vou precisar redirecionar para a página da demanda. Eu tenho capacidade de criar essa página, mas minha afinidade com o javascript não me permite criar um redirecionamento após todo o processo concluído.

OBS.: Tem uns problemas resolvidos que deixei para ajudar a comunidade, caso alguém se encontrar nessa mesma situação.
Vou deixar abaixo os arquivos que eu considero fundamentais para interpretar o código, caso alguém tenha necessidade de utilizar o sistema, e para facilitar o entendimento dos meus problemas.

Aguardo ansiosamente uma resposta!!

NOVADEMANDA.PHP


<form id="formToggleLine" action="upload.php" enctype="multipart/form-data" method="POST" class="form-horizontal no-margin form-border">
							<div class="form-group">
								<label class="col-lg-2 control-label">Usuário Requerente</label>
								<div class="col-lg-10">
									<p class="form-control-static"><?php echo mb_convert_encoding($idLogado, ''utf-8'', ''iso-8859-1'');?> (<?php echo mb_convert_encoding($emailLogado, ''utf-8'', ''iso-8859-1'');?>)</p>
								</div><!-- /.col -->
							</div><!-- /form-group -->
							<div class="form-group">
								<label class="col-lg-2 control-label">Título da demanda</label>
								<div class="col-lg-10">
									<input id="titulo" class="form-control" type="text" name="titulo" placeholder="Seja breve...">
								</div><!-- /.col -->
							</div><!-- /form-group -->
							<div class="form-group">
								<label class="col-lg-2 control-label">Demanda</label>
								<div class="col-lg-10">
									<textarea id="demanda" name="demanda" placeholder="Explique detalhadamente..." class="form-control" rows="6"></textarea>					
								</div><!-- /.col -->
							</div><!-- /form-group -->

						<fieldset class="form-horizontal form-border">
							<div class="form-group">
								<label class="col-lg-2 control-label">Dropzone</label>
									<div class="col-lg-10">
 										<div id="myDropZone" class="dropzone" >
               							</div>
               						</div>
               					</label>
               				</div>
               			</fieldset>
	<div class="form-group">
						<div class="col-lg-offset-2 col-lg-10">
							<input type="submit" id="uploadfiles" name="cadastrar" class="btn btn-primary" value="Salvar">
						</div><!-- /.col -->
					</div><!-- /form-group -->
				

							
						</form>


UPLOAD.PHP

$titulo 		= trim(strip_tags($_POST[''titulo'']));
	$demanda 		= trim(strip_tags($_POST[''demanda'']));
	
	$insert = "INSERT into demandas (titulo, demanda, idrequerente) VALUES (:titulo, :demanda, :idrequerente)";
	try{
		$result = $conexao->prepare($insert);
		$result->bindParam('':titulo'', $titulo, PDO::PARAM_STR);
		$result->bindParam('':demanda'', $demanda, PDO::PARAM_STR);
		$result->bindParam('':idrequerente'', $idLogado, PDO::PARAM_STR);
		$result->execute();
		$idspo = $conexao->lastInsertId();
		$contar = $result->rowCount();
		if($contar>0){
			echo '''';
		}else{
			echo '''';
			}
		}catch(PDOException $e){
		echo $e;
	}



date_default_timezone_set(''America/Sao_Paulo'');
    $extensaopermitida = array("jpg", "jpge", "png", "tiff", "ppt", "pps", "xls", "xlsx", "doc", "docm", "docx", "pdf", "txt"); 
	$uploaded_images = array();

if (!empty($_FILES)) {
   foreach($_FILES[''upload_images''][''name''] as $key=>$val){  
   		$filename = $_FILES[''upload_images''][''name''][$key];
		$extensao = pathinfo($filename, PATHINFO_EXTENSION);
		$novonome = rand().".$extensao";      
        $upload_dir = "uploads/";
        $upload_file = $upload_dir.$novonome;

        	if(move_uploaded_file($_FILES[''upload_images''][''tmp_name''][$key],$upload_file)){

            	$uploaded_images[] = $upload_file;
				$insert_sql = "INSERT INTO uploads(id, file_name, upload_time, nome, iddemanda) VALUES ('''', ''".$novonome."'', ''".date("H:i:s")."'', ''".$filename."'', ''".$idspo."'')";
				try{
					$resultado = $conexao->prepare($insert_sql);			
					$resultado->execute();
				}catch(PDOException $e){
					echo ''ERROR: '' . $e->getMessage();
				}
				echo '''';
        	}
        
    }
}


DROPZONE.JS

O dropzone não foi devido o tamanho da publicação, mas já citei acima o essencial para compreensão.
José

José

Responder

Posts

26/08/2019

José

Atualização:

Consegui arrumar editando meu php.ini
upload_max_filesize=2M alterei para 20M

Depois de muito pesquisar, um erro simples me custou horas. Fica a lição para vocês não cometerem esse tipo de erro!!
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar