How do I call a Javascript function when I click a “Submit” button?

Question

I am trying to implement Drag and Drop file upload functionality into a webpage. I have this javascript function in a dropzone.js file:

Dropzone.prototype.processFile = function(file) {
  this.filesProcessing.push(file);
  file.processing = true;
  this.emit("processingfile", file);
  return this.uploadFile(file);
};

And I have this in my html file:

<script src="dropzone.js"></script>
<input type="submit" class="btn" value="Submit" />

I downloaded the Dropzone.js file from http://www.dropzonejs.com to implement in my page. The Dropzone has the functionality to either start uploading files as soon as they are dropped onto the page or wait until the user calls the function mentioned above.

How do I call the function when I click the "Submit" button? I'm pretty unfamiliar with how the dropzone thing really works. The instructions from the creator of dropzone.js say I should call "myDropzone.processFile(file);" if I don't want the dropzone to immediately start uploading as soon as files are dropped into the element, but I'm not sure how to call this from my html button.

Answer 1

<div id="previews" class="dropzone-previews"></div>


<button id="clickable">Click me to select files</button>

<script>
  new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/upload/url", // Set the url
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: "#clickable" // Define the element that should be used as click trigger to select files.
  });
</script>

Answer 2

Try this out, it worked for me:

<form id="my-dropzone" class="dropzone" action="file-upload.php"></form>
<input type="button" value="Upload Files" onclick="uploadClicked()" />
<script type="text/javascript" src="dropzone.js"></script>
<script type="text/javascript">
    Dropzone.options.myDropzone = {
        maxFilesize: 2, // MB,
        enqueueForUpload: false
    };

    function uploadClicked() {
        var dz = Dropzone.forElement("#my-dropzone");
        for (var i = 0; i < dz.files.length; i++) {
            dz.filesQueue.push(dz.files[i]);
        }
    dz.processQueue();
    }
</script>

Answer 3

Here's a link to a tutorial on the subject: http://bit.ly/1jVOKfd

I found that the sample script in the tutorial worked well for a button embedded in the dropzone (ie, 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:

      <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>

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();
                }
            );

        }

      }

Answer 4

There must be some initialization code for dropzone, that might have been called in onLoad event. first disable that and then call the

document.getElementById("btnSubmit").onclick = Dropzone.prototype.processFile ;

Answer 5

<script>
function js_fun()
{
//do manipulations here and return true on success and false on failure 
}
</script>
<form method='get' onsubmit='return js_fun()'>
<input type='submit'/>
</form>