Integrando o Dropzone.js ao formulário HTML existente com outros campos

Atualmente, tenho um formulário HTML em que os usuários preenchem os detalhes de um anúncio que desejam publicar. Agora, desejo poder adicionar um dropzone para fazer upload de imagens do item à venda.

Eu encontrei o Dropzone.js que parece fazer a maior parte do que eu preciso. No entanto, ao examinar a documentação, parece que você precisa especificar a classe de todo o formulário como dropzone(em vez de apenas o elemento de entrada ). Isso significa que todo o meu formulário se torna o dropzone .

É possível usar o dropzone em apenas parte do meu formulário, ou seja, especificando apenas o elemento como classe "dropzone" , em vez de todo o formulário?

Eu poderia usar formulários separados, mas quero que o usuário possa enviar tudo com um botão.

Como alternativa, existe outra biblioteca que pode fazer isso?

Muito Obrigado

Aqui está outra maneira de fazer isso: adicione um divno seu formulário com um nome de classe dropzone e implemente o dropzone programaticamente.

HTML:

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

Nota: Desativando a descoberta automática, caso contrário, o Dropzone tentará anexar duas vezes

Artigo do blog : Dropzone js + Asp.net: Maneira fácil de fazer upload de imagens em massa

Eu tive exatamente o mesmo problema e descobri que a resposta de Varan Sinayee foi a única que realmente resolveu a pergunta original. Essa resposta pode ser simplificada, então aqui está uma versão mais simples.

Os passos são:

1. Crie um formulário normal (não esqueça o método e enctype args, pois isso não é mais tratado pelo dropzone).

2. Coloque uma div dentro com o class="dropzone"(é assim que o Dropzone se liga a ele) e id="yourDropzoneName"(usado para alterar as opções).

3. Defina as opções do Dropzone, para definir o URL onde o formulário e os arquivos serão publicados, desative o autoProcessQueue (para que isso aconteça apenas quando o usuário pressionar 'enviar') e permita vários uploads (se necessário).

4. Defina a função init para usar o Dropzone em vez do comportamento padrão quando o botão Enviar for clicado.

5. Ainda na função init, use o manipulador de eventos "sendmultiple" para enviar os dados do formulário junto com os arquivos.

Voilà! Agora você pode recuperar os dados como faria com um formulário normal, em $ _POST e $ _FILES (no exemplo, isso aconteceria em upload.php)

HTML

<form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

JS

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("submit-all").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("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}

O "dropzone.js" é a biblioteca mais comum para o upload de imagens. Se você deseja que o "dropzone.js" seja apenas parte do seu formulário, execute as seguintes etapas:

1) para o lado do cliente:

HTML:

    <form action="/" enctype="multipart/form-data" method="POST">
        <input type="text" id ="Username" name ="Username" />
        <div class="dropzone" id="my-dropzone" name="mainFileUploader">
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </div>
    </form>
    <div>
        <button type="submit" id="submit-all"> upload </button>
    </div>

JQuery:

    <script>
        Dropzone.options.myDropzone = {
            url: "/Account/Create",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",

            init: function () {

                var submitButton = document.querySelector("#submit-all");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

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

                    // Create the remove button
                    var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                    // Listen to the click event
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        wrapperThis.removeFile(file);
                        // If you want to the delete the file on the server as well,
                        // you can do the AJAX request here.
                    });

                    // Add the button to the file preview element.
                    file.previewElement.appendChild(removeButton);
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("Username", $("#Username").val());
                });
            }
        };
    </script>

2) para o lado do servidor:

ASP.Net MVC

    [HttpPost]
    public ActionResult Create()
    {
        var postedUsername = Request.Form["Username"].ToString();
        foreach (var imageFile in Request.Files)
        {

        }

        return Json(new { status = true, Message = "Account created." });
    }

O tutorial do Enyo é excelente.

Descobri que o script de exemplo no tutorial funcionava bem para um botão incorporado no dropzone (ou seja, o elemento do formulário). Se você deseja ter o botão fora do elemento do formulário, consegui fazê-lo usando um evento click:

Primeiro, o HTML:

<form id="my-awesome-dropzone" action="/upload" class="dropzone">  
    <div class="dropzone-previews"></div>
    <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
    </div>

</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

Em seguida, a tag de script ....

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
    }
}

Além do que o sqram estava dizendo, o Dropzone possui uma opção adicional não documentada, "hiddenInputContainer". Tudo o que você precisa fazer é definir essa opção para o seletor do formulário ao qual você deseja que o campo do arquivo oculto seja anexado. E pronto! O campo do arquivo ".dz-hidden-input" que o Dropzone normalmente adiciona ao corpo se move magicamente para o seu formulário. Não é possível alterar o código-fonte do Dropzone.

Agora, enquanto isso funciona para mover o campo do arquivo Dropzone para o seu formulário, o campo não tem nome. Então você precisará adicionar:

_this.hiddenFileInput.setAttribute("name", "field_name[]");

para dropzone.js após esta linha:

_this.hiddenFileInput = document.createElement("input");

em torno da linha 547.

Eu tenho uma solução mais automatizada para isso.

HTML:

<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
    {{ csrf_field() }}

    <!-- You can add extra form fields here -->

    <input hidden id="file" name="file"/>

    <!-- You can add extra form fields here -->

    <div class="dropzone dropzone-file-area" id="fileUpload">
        <div class="dz-default dz-message">
            <h3 class="sbold">Drop files here to upload</h3>
            <span>You can also click to open file browser</span>
        </div>
    </div>

    <!-- You can add extra form fields here -->

    <button type="submit">Submit</button>
</form>

JavaScript:

Dropzone.options.fileUpload = {
    url: 'blackHole.php',
    addRemoveLinks: true,
    accept: function(file) {
        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);
        fileReader.onloadend = function() {

            let content = fileReader.result;
            $('#file').val(content);
            file.previewElement.classList.add("dz-success");
        }
        file.previewElement.classList.add("dz-complete");
    }
}

Laravel:

// Get file content
$file = base64_decode(request('file'));

Não há necessidade de desativar o DropZone Discovery e o envio normal do formulário poderá enviar o arquivo com outros campos através da serialização padrão.

Esse mecanismo armazena o conteúdo do arquivo como string base64 no campo de entrada oculto quando é processado. Você pode decodificá-lo de volta à string binária no PHP através do base64_decode()método padrão .

Não sei se esse método será comprometido com arquivos grandes, mas funciona com ~ 40 MB.

Você pode modificar os dados do formulário capturando o evento 'send' no seu dropzone.

dropZone.on('sending', function(data, xhr, formData){
        formData.append('fieldname', 'value');
});

Para enviar todos os arquivos juntamente com outros dados do formulário em uma única solicitação, você pode copiar os inputnós ocultos temporários do Dropzone.js no seu formulário. Você pode fazer isso no addedfilesmanipulador de eventos:

var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
  // Input node with selected files. It will be removed from document shortly in order to
  // give user ability to choose another set of files.
  var usedInput = myDropzone.hiddenFileInput;
  // Append it to form after stack become empty, because if you append it earlier
  // it will be removed from its parent node by Dropzone.js.
  setTimeout(() => {
    // myForm - is form node that you want to submit.
    myForm.appendChild(usedInput);
    // Set some unique name in order to submit data.
    usedInput.name = "foo";
  }, 0);
});

Obviamente, essa é uma solução alternativa dependente dos detalhes da implementação. Código fonte relacionado .

Quero contribuir com uma resposta aqui, pois também enfrentei o mesmo problema - queremos que o elemento $ _FILES esteja disponível como parte da mesma postagem em outro formulário. Minha resposta é baseada em @mrtnmgs, no entanto, observa os comentários adicionados a essa pergunta.

Em primeiro lugar: o Dropzone publica seus dados via ajax

Só porque você usa a formData.appendopção ainda significa que você deve enfrentar as ações de UX - isto é, tudo acontece nos bastidores e não é um post de formulário típico. Os dados são lançados no seu urlparâmetro.

Segundo: se você deseja imitar uma postagem de formulário, será necessário armazenar os dados postados

Isso requer que o código do servidor armazene sua $_POSTou $_FILESem uma sessão disponível para o usuário em outro carregamento de página, pois o usuário não irá para a página em que os dados publicados são recebidos.

Terceiro: você precisa redirecionar o usuário para a página em que esses dados são acionados

Agora que você publicou seus dados, os armazenou em uma sessão, é necessário exibi-los / ação para o usuário em uma página adicional. Você precisa enviar o usuário para essa página também.

Então, para o meu exemplo:

[Código do Dropzone: usa o Jquery]

$('#dropArea').dropzone({
    url:        base_url+'admin/saveProject',
    maxFiles:   1,
    uploadMultiple: false,
    autoProcessQueue:false,
    addRemoveLinks: true,
    init:       function(){
        dzClosure = this;

        $('#projectActionBtn').on('click',function(e) {
            dzClosure.processQueue(); /* My button isn't a submit */
        });

        // My project only has 1 file hence not sendingmultiple
        dzClosure.on('sending', function(data, xhr, formData) {
            $('#add_user input[type="text"],#add_user textarea').each(function(){
                formData.append($(this).attr('name'),$(this).val());
            })
        });

        dzClosure.on('complete',function(){
            window.location.href = base_url+'admin/saveProject';
        })
    },
});

Este é apenas outro exemplo de como você pode usar o Dropzone.js em um formulário existente.

dropzone.js:

 init: function() {

   this.on("success", function(file, responseText) {
     //alert("HELLO ?" + responseText); 
     mylittlefix(responseText);
   });

   return noop;
 },

Então, mais tarde no arquivo eu coloquei

function mylittlefix(responseText) {
  $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}

Isso pressupõe que você tenha uma div com o ID #botofformdessa maneira. Ao fazer o upload, você pode usar os nomes dos arquivos enviados.

Nota: meu script de upload retornou oenuploadedfilename.jpeg dubblenote, você também precisaria criar um script de limpeza que verifique o diretório de upload em busca de arquivos não utilizados e os exclua ..se em um formulário não autenticado de front-end :)

Aqui está o meu exemplo, é baseado no Django + Dropzone. A exibição selecionou (obrigatório) e enviou.

<form action="/share/upload/" class="dropzone" id="uploadDropzone">
    {% csrf_token %}
        <select id="warehouse" required>
            <option value="">Select a warehouse</option>
                {% for warehouse in warehouses %}
                    <option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
                {% endfor %}
        </select>
    <button id="submit-upload btn" type="submit">upload</button>
</form>

<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    var filename = "";

    Dropzone.options.uploadDropzone = {
        paramName: "file",  // The name that will be used to transfer the file,
        maxFilesize: 250,   // MB
        autoProcessQueue: false,
        accept: function(file, done) {
            console.log(file.name);
            filename = file.name;
            done();    // !Very important
        },
        init: function() {
            var myDropzone = this,
            submitButton = document.querySelector("[type=submit]");

            submitButton.addEventListener('click', function(e) {
                var isValid = document.querySelector('#warehouse').reportValidity();
                e.preventDefault();
                e.stopPropagation();
                if (isValid)
                    myDropzone.processQueue();
            });

            this.on('sendingmultiple', function(data, xhr, formData) {
                formData.append("warehouse", jQuery("#warehouse option:selected").val());
            });
        }
    };
</script>