Integrating Dropzone js into existing HTML form with other fields

Question

I currently have a HTML form which users fill in details of an advert they wish to post  I now want to be able to add a dropzone for uploading images of the item for sale   I have found Dropzone js which seems to do most of what I need  However  when looking into the documentation  it appears that you need to specify the class of the whole form as dropzone  as opposed to just the input element   This then means that my entire form becomes the dropzone   Is it possible to use the dropzone in just part of my form  i e  by only specifying the element as class  dropzone   rather than the whole form   I could use separate forms  but I want the user to be able to submit it all with one button   Alternatively  is there another library that can do this   Many thanks

User · Answer

Here is my sample  is based on Django   Dropzone  View has select required  and submit    lt form action   share upload   class  dropzone  id  uploadDropzone  gt         csrf token             lt select id  warehouse  required gt               lt option value    gt Select a warehouse lt  option gt                     for warehouse in warehouses                         lt option value   forloop counter0   gt   warehouse warehousename   lt  option gt                     endfor             lt  select gt       lt button id  submit-upload btn  type  submit  gt upload lt  button gt   lt  form gt    lt script src     static   js libs dropzone dropzone js      gt  lt  script gt   lt script src  https   code jquery com jquery-3 1 0 min js  gt  lt  script gt   lt script gt      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                                       lt  script gt

User · Answer

Further to what sqram was saying  Dropzone has an additional undocumented option   hiddenInputContainer    All you have to do is set this option to the selector of the form you want the hidden file field to be appended to   And voila   The   dz-hidden-input  file field that Dropzone normally adds to the body magically moves into your form   No altering the Dropzone source code   Now while this works to move the Dropzone file field into your form  the field has no name   So you will need to add    this hiddenFileInput setAttribute  name    field name        to dropzone js after this line    this hiddenFileInput   document createElement  input      around line 547

User · Answer

I have a more automated solution for this    HTML    lt form role  form  enctype  multipart form-data  action      url     method      method     gt         csrf field            lt  -- You can add extra form fields here -- gt        lt input hidden id  file  name  file   gt        lt  -- You can add extra form fields here -- gt        lt div class  dropzone dropzone-file-area  id  fileUpload  gt           lt div class  dz-default dz-message  gt               lt h3 class  sbold  gt Drop files here to upload lt  h3 gt               lt span gt You can also click to open file browser lt  span gt           lt  div gt       lt  div gt        lt  -- You can add extra form fields here -- gt        lt button type  submit  gt Submit lt  button gt   lt  form gt    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       No need to disable DropZone Discovery and the normal form submit will be able to send the file with any other form fields through standard form serialization    This mechanism stores the file contents as base64 string in the hidden input field when it gets processed  You can decode it back to binary string in PHP through the standard base64 decode   method   I don t know whether this method will get compromised with large files but it works with  40MB files

User · Answer

Enyo s tutorial is excellent   I found that the sample script in the tutorial worked well for a button embedded in the dropzone  i e   the form element   If you wish to have the button outside the form element  I was able to accomplish it using a click event   First  the HTML    lt form id  my-awesome-dropzone  action   upload  class  dropzone  gt         lt div class  dropzone-previews  gt  lt  div gt       lt div class  fallback  gt   lt  -- this is the fallback if JS isn t working -- gt           lt input name  file  type  file  multiple   gt       lt  div gt    lt  form gt   lt button type  submit  id  submit-all  class  btn btn-primary btn-xs  gt Upload the file lt  button gt    Then  the script tag      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

User · Answer

I had the exact same problem and found that Varan Sinayee s answer was the only one that actually solved the original question  That answer can be simplified though  so here s a simpler version   The steps are    Create a normal form  don t forget the method and enctype args since this is not handled by dropzone anymore   Put a div inside with the class  dropzone   that s how Dropzone attaches to it  and id  yourDropzoneName   used to change the options   Set Dropzone s options  to set the url where the form and files will be posted  deactivate autoProcessQueue  so it only happens when user presses  submit   and allow multiple uploads  if you need it   Set the init function to use Dropzone instead of the default behavior when the submit button is clicked  Still in the init function  use the  sendingmultiple  event handler to send the form data along wih the files    Voil     You can now retrieve the data like you would with a normal form  in   POST and   FILES  in the example this would happen in upload php   HTML   lt form action  upload php  enctype  multipart form-data  method  POST  gt       lt input type  text  id   firstname  name   firstname    gt       lt input type  text  id   lastname  name   lastname    gt       lt div class  dropzone  id  myDropzone  gt  lt  div gt       lt button type  submit  id  submit-all  gt  upload  lt  button gt   lt  form gt    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

User · Answer

In order to submit all files alongside with other form data in a single request you can copy Dropzone js temporary hidden input nodes into your form  You can do this within addedfiles event handler   var myDropzone   new Dropzone  myDivSelector     url       autoProcessQueue  false     myDropzone on  addedfiles        gt         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      gt           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         Obviosly this is a workaround dependent on implementation details  Related source code

User · Answer

This is just another example of how you can use Dropzone js in an existing form     dropzone js     init  function         this on  success   function file  responseText           alert  HELLO      responseText         mylittlefix responseText              return noop        Then  later in the file I put   function mylittlefix responseText          botofform   append   lt input type  hidden  name  files    value     responseText     gt         This assumes you have a div with id  botofform that way when uploading you can use the uploaded files  names    Note  my upload script returned theuploadedfilename jpeg dubblenote you also would need to make a cleanup script that checks the upload directory for files not in use and deletes them   if in a front end non authenticated form

User · Answer

You can modify the formData by catching the  sending  event from your dropzone   dropZone on  sending   function data  xhr  formData           formData append  fieldname    value

User · Answer

I want to contribute an answer here as I too have faced the same issue - we want the   FILES element available as part of the same post as another form  My answer is based on  mrtnmgs however notes the comments added to that question   Firstly  Dropzone posts its data via ajax  Just because you use the formData append option still means that you must tackle the UX actions - i e  this all happens behind the scenes and isn t a typical form post  Data is posted to your url parameter   Secondly  If you therefore want to mimic a form post you will need to store the posted data  This requires server side code to store your   POST or   FILES in a session which is available to the user on another page load as the user will not go to the page where the posted data is received   Thirdly  You need to redirect the user to the page where this data is actioned  Now you have posted your data  stored it in a session  you need to display action it for the user in an additional page  You need to send the user to that page as well   So for my example    Dropzone code  Uses 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

User · Answer

The  dropzone js  is the most common library for uploading images  If you want to have the  dropzone js  as just part of your form  you should do the following steps   1  for the client side   HTML         lt form action     enctype  multipart form-data  method  POST  gt           lt input type  text  id   Username  name   Username    gt           lt div class  dropzone  id  my-dropzone  name  mainFileUploader  gt               lt div class  fallback  gt                   lt input name  file  type  file  multiple   gt               lt  div gt           lt  div gt       lt  form gt       lt div gt           lt button type  submit  id  submit-all  gt  upload  lt  button gt       lt  div gt    JQuery        lt script gt          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   lt button class  btn btn-lg dark  gt Remove File lt  button gt                             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                                                       lt  script gt    2  for the server side   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

User · Answer

Here s another way to do it  add a div in your form with a classname dropzone  and implement dropzone programmatically   HTML      lt div id  dZUpload  class  dropzone  gt         lt div class  dz-default dz-message  gt  lt  div gt   lt  div gt    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                            Note   Disabling autoDiscover  otherwise Dropzone will try to attach twice  Blog Article    Dropzone js   Asp net  Easy way to upload Bulk images

[javascript] Integrating Dropzone.js into existing HTML form with other fields

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to file-upload

Examples related to dropzone.js