Search code examples
javascriptdropzone

Posting additional data with Dropzone and params

I am using Dropzone and the bootstrap example to upload files. I want to also POST additional data. I have tried a number of variations after reading the answers to other questions but I can't quite get the syntax right to get the data from the input statement as I am not very experienced with javascript.

I have two fields

<input type="text" name="firstname" id="firstname">
<input type="text" name="lastname" id="lastname">

and I have tried to add params

params: {
  firstname: ?????,
  lastname: ?????,
},

I know that the method works as if I use

params: {
  firstname: "abcde",
  lastname: "vwxyz",
},

then abcde and vwxyz are posted. I just can't get the data from the input statements to POST.

Solution

  • The question is divided to 2.

    1. How to get the values of the inputs.
    2. How to pass params to Dropzone.

    The answers:

    1. Using document.querySelector and .value (See this this answer).
    2. Since the inputs are empty when you initlize Dropzone, params should be a function that retrieve the values when you need them (e.g. click start).
    params: () => ({
  firstname: document.querySelector('#firstname').value,
  lastname: document.querySelector('#lastname').value,
}),

    https://jsbin.com/neteker/edit?js,output

    More info about params