Bom dia, Boa tarde ou Boa noite.

Estou desenvolvendo um processo no fluig, onde irei utilizar o recurso do dropzone.js para possibilitar o anexo de arquivos direto na capa do formulário.

O ponto é que com a utilização desse framework é possível fazer o upload dos arquivos. Porém, após o upload eu precisava que eles fossem salvos de alguma forma no formulário (igual acontece com os arquivos na aba "anexos").

OBS: O que tenho até agora é que os arquivos são enviados ao formulário, mas quando tento salvar eles desaparecem. Em anexo está como ele fica no formulário.

Minha dúvida nesse caso é: Como posso vincular os arquivos que são enviados/escolhidos na área do dropzone, no próprio formulário.

Código:

Parte HTML:

<form action="upload.php" class="dropzone" id="my-dropzone"></form>

Script 1:

<script type="text/javascript"> 
        $(document).ready(function() {          
            Dropzone.autoDiscover = false;
            $("#my-dropzone").dropzone({
                //url: "/file/post",
                addRemoveLinks : true,
                dictDefaultMessage: "Arraste seus arquivos para cá!",
                maxFilesize: 10,
                dictResponseError: 'Erro ao fazer o upload !'
            });
        })
</script>

Script 2:

<script>
Dropzone.options.myDropzone = {
            init: function() {
                thisDropzone = this;
                $.get('upload.php', function(data) {
                    $.each(data, function(key,value){
                        var mockFile = { name: value.name, size: value.size };
                        thisDropzone.emit("addedfile", mockFile);
                        thisDropzone.emit("thumbnail", mockFile, "http://fluig-hml.grupobarigui.com.br/portal/p/01/ecmnavigation?app_ecm_navigation_doc=29792"+value.name);
                    });
                });

                thisDropzone.on("addedfile", function(file) {

                var openButton = Dropzone.createElement("<button class='btn btn-sm btn-success' style='margin: 0 auto; margin-left: 10px'>Abrir</button>"); 
                var _this = this;

                openButton.addEventListener("click", function(e) {
                  e.preventDefault();
                  e.stopPropagation();
                  window.open("http://fluig-hml.grupobarigui.com.br/portal/p/01/ecmnavigation?app_ecm_navigation_doc=29792"+file.name);
                }); 
                file.previewElement.appendChild(openButton);
              }); 
            }
        };
</script>

PHP:

<?php


$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';

if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];
    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
    $targetFile =  $targetPath. $_FILES['file']['name'];
    move_uploaded_file($tempFile,$targetFile);

} else {

    $result  = array();
    $files = scandir($storeFolder);
    if ( false!==$files ) {
        foreach ( $files as $file ) {
            if ( '.'!=$file && '..'!=$file) {
                $obj['name'] = $file;
                $obj['size'] = filesize($storeFolder.$ds.$file);
                $result[] = $obj;
            }
        }
    }
    header('Content-type: text/json');
    header('Content-type: application/json');
    echo json_encode($result);
}
?>