I have following form:

<form class="block-center" id="pdfForm" method="POST" action="form_threatment.php" enctype="multipart/form-data" style="margin-top: 30px;">    
  <div class="form-group push-50-t col-md-12">
    <div class="col-md-12">
      <div class="form-material form-material-primary">    
        <div class="dropzone dropzone-previews" id="pdfFile">
        </div>    
      </div>
    </div>
  </div>    
</div>

<div class="form-group push-50-t col-md-6">
  <div class="col-md-12">
    <div class="form-material form-material-primary">                               
      <input class="form-control" name="first_name" type="text" id="first_name" />
      <label for="first_name"><span class="asterix">*</span> Prénom : </label>                      
    </div>
  </div>
</div>

I include dropzone.js library like this :

<script src="assets/js/dropzone.js"></script>

And my own dropzone myDropzone.js :

<script src="assets/js/myDropzone.js"></script>

In the myDropzone.js file I have configured the div#pdfFile this way :

Dropzone.autoDiscover = false;

$(document).ready(function() {      

    Dropzone.options.pdfFile = {
        // url does not has to be written if we have wrote action in the form tag but i have mentioned here just for convenience sake 
        url: 'form_threatment.php',
        acceptedFiles: '.pdf',
        maxFilesize: 20,
        addRemoveLinks: true,
        autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button
        uploadMultiple: false,
        autoDiscover: false,
        paramName: 'pdf', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then by default it taked 'file' as paramName eg: $_FILE['file'] 
        previewsContainer: '#pdfFile', // we specify on which div id we must show the files
        clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 

        accept: function(file, done) {
            console.log("uploaded");
            done();
        },
        error: function(file, msg){
            alert(msg);
        },
        init: function() {
            var myDropzone = this;

            // #submit-all it the id of the submit button
            $("#submit-all").on("click", function(e) {
                var files = $('#pdfFile').get(0).dropzone.getAcceptedFiles();
                console.log(myDropzone);
                console.log(files);
                //e.preventDefault();
                //e.stopPropagation();
                myDropzone.processQueue(); // this will submit your form to the specified action path
                // after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual 
                //REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that

            });                                             
        }
    };
    Dropzone.options.pdfFile.init();
});

When loading the page, I get the error:

Uncaught Error: No URL provided.

Earlier, I had modified the dropzone.js file to setup the Dropzone options, but I reset the dropzone.js library file and decided to setup the options in myDropzone.js file.

When the options were set up in the dropzone.js file, I had no error but after I reset these, and setup them in myDropzone.js, I had this error, which makes me believe the options aren't initialized in myDropzone.js.

Fact is, the init() function works properly when I click on the #submit-all button.

Any idea on how to solve the problem please?

---

Okay, I solved the :

Uncaught Error: No URL provided.

by deleting it.

Now, when I submit, I get the following error:

Uncaught TypeError: myDropzone.processQueue is not a function

in the init() function.

Edit:

I solved the last previous error, by deleting the processQueue function, and blocking the Validate button of my upload page, until the PDF has not been uploaded succesfully. I know it's an ugly hack, but I didn't figure out another way to do it.

I have following form:

<form class="block-center" id="pdfForm" method="POST" action="form_threatment.php" enctype="multipart/form-data" style="margin-top: 30px;">    
  <div class="form-group push-50-t col-md-12">
    <div class="col-md-12">
      <div class="form-material form-material-primary">    
        <div class="dropzone dropzone-previews" id="pdfFile">
        </div>    
      </div>
    </div>
  </div>    
</div>

<div class="form-group push-50-t col-md-6">
  <div class="col-md-12">
    <div class="form-material form-material-primary">                               
      <input class="form-control" name="first_name" type="text" id="first_name" />
      <label for="first_name"><span class="asterix">*</span> Prénom : </label>                      
    </div>
  </div>
</div>

I include dropzone.js library like this :

<script src="assets/js/dropzone.js"></script>

And my own dropzone myDropzone.js :

<script src="assets/js/myDropzone.js"></script>

In the myDropzone.js file I have configured the div#pdfFile this way :

Dropzone.autoDiscover = false;

$(document).ready(function() {      

    Dropzone.options.pdfFile = {
        // url does not has to be written if we have wrote action in the form tag but i have mentioned here just for convenience sake 
        url: 'form_threatment.php',
        acceptedFiles: '.pdf',
        maxFilesize: 20,
        addRemoveLinks: true,
        autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button
        uploadMultiple: false,
        autoDiscover: false,
        paramName: 'pdf', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then by default it taked 'file' as paramName eg: $_FILE['file'] 
        previewsContainer: '#pdfFile', // we specify on which div id we must show the files
        clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 

        accept: function(file, done) {
            console.log("uploaded");
            done();
        },
        error: function(file, msg){
            alert(msg);
        },
        init: function() {
            var myDropzone = this;

            // #submit-all it the id of the submit button
            $("#submit-all").on("click", function(e) {
                var files = $('#pdfFile').get(0).dropzone.getAcceptedFiles();
                console.log(myDropzone);
                console.log(files);
                //e.preventDefault();
                //e.stopPropagation();
                myDropzone.processQueue(); // this will submit your form to the specified action path
                // after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual 
                //REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that

            });                                             
        }
    };
    Dropzone.options.pdfFile.init();
});

When loading the page, I get the error:

Uncaught Error: No URL provided.

Earlier, I had modified the dropzone.js file to setup the Dropzone options, but I reset the dropzone.js library file and decided to setup the options in myDropzone.js file.

When the options were set up in the dropzone.js file, I had no error but after I reset these, and setup them in myDropzone.js, I had this error, which makes me believe the options aren't initialized in myDropzone.js.

Fact is, the init() function works properly when I click on the #submit-all button.

Any idea on how to solve the problem please?

---

Okay, I solved the :

Uncaught Error: No URL provided.

by deleting it.

Now, when I submit, I get the following error:

Uncaught TypeError: myDropzone.processQueue is not a function

in the init() function.

Edit:

I solved the last previous error, by deleting the processQueue function, and blocking the Validate button of my upload page, until the PDF has not been uploaded succesfully. I know it's an ugly hack, but I didn't figure out another way to do it.

• javascript
• jquery
• dropzone.js

Share Improve this question Follow edited Apr 28, 2017 at 22:46 Maxime Flament asked Aug 27, 2016 at 12:43 Maxime FlamentMaxime Flament 75122 gold badges77 silver badges2525 bronze badges 10

• Uncaught Error: No URL provided - any indication which line of code this error is on? – Jaromanda X Commented Aug 27, 2016 at 12:52
• It raises on line 440 of dropzone.js which is : if (!this.options.url) { throw new Error("No URL provided."); } This is in the function function Dropzone(element, options) of the dropzone.js library. Should I import myDropzone.js before dropzone.js ? – Maxime Flament Commented Aug 27, 2016 at 12:55
• definitely do not reverse the order of those two files - you certainly don't seem to set any options.url so it stands to reason you get that error – Jaromanda X Commented Aug 27, 2016 at 13:01
• I provided the url in myDropzone.js: url: 'form_threatment.php', + the form action is form_threatment.php too. – Maxime Flament Commented Aug 27, 2016 at 13:02
• no, that's options.pdfFile.url – Jaromanda X Commented Aug 27, 2016 at 13:03

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 1

Don't put your dropzone code inside jquery $(document).ready(function(){ });

I think of 3 things : Your main dropzone element (where you DROP) is #pdfForm And you want the previews in #pdfFiles. That said :

1) code must be Dropzone.options.pdfForm and not Dropzone.options.pdfFile

2) Dropzone.options.pdfForm is a right syntax when autodiscover is let to true (default). But if tou want autodiscover to false, you might try :
var myDropzone = new Dropzone("#pdfForm", { url: "form_threatment.php", other options... // JS : Dropzone class or $("#pdfForm").dropzone({ url: "form_threatment.php", other options... // JS : jquery style

3) If you specify "form_threatment.php" in JS, you don't have to do it in HTML. Then you can remove action="form_threatment.php" from the form

see also my other answer for possible problems with jQuery version 3 if you decide to use autodiscover=true (defalut) : Why is my dropzone javascript form not working?

After trying all proposals, I actually solved this doing an ugly work-around in my treatment_form.php :

I do 2 times threatment :

1. When receiving the PDF, I check everything is fine and I upload it to my server.
2. When the user submits the form, I verify the rest of the information in the form, and threat them knowing that the PDF has been uploaded.