CODEWITHSUNDEEP
javascriptjquerydropzone.js
Maxime Flament
Maxime Flament

Reputation: 751

Dropzone : Uncaught Error: No URL provided

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.

Upvotes: 2

Views: 10495

Answers (3)

Maxime Flament
Maxime Flament

Reputation: 751

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.

Upvotes: 0

Vandolph Reyes
Vandolph Reyes

Reputation: 620

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

Upvotes: 1

R&#233;mi Levassor
R&#233;mi Levassor

Reputation: 151

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?

Upvotes: 0

Related Questions