title: Applying DropZone bootstrap example under React JS
body: <p>I am trying to apply <a href="http://www.dropzonejs.com/bootstrap.html" rel="nofollow noreferrer">Dropzone bootstrap example</a> under ReactJS as shown in the code below.  </p>
  
  <p>But for some reason, the Start Upload / Cancel Upload and progress bars are behaving in an inconsistent way.</p>
  
  <p>Example 1: Progress bar shows endless progress even if I cancelled all files to be uploaded.
  Example 2: Start upload single file won't do anything.</p>
  
  <p>Can someone please tell me what I am doing wrong/missing here and how can I make this work just like the example? </p>
  
  <p>Note: Based on first reply if possible using Refs</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  @connect((state) =&gt; state)
  export default class DZUploader extends React.Component {
  
    componentDidMount() {
  
    let previewNode = document.querySelector("#template");
    previewNode.id = "";
  
    let previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);
  
    let myDropzone = new Dropzone(document.body, {
      url: "/target-url", // Set the url
      paramName: "file", // The name that will be used to transfer the file
      maxFilesize: 2, // MB
      thumbnailWidth: 80,
      thumbnailHeight: 80,
      parallelUploads: 20,
      previewTemplate: previewTemplate,
      autoQueue: false,
      previewsContainer: "#previews",
      clickable: ".fileinput-button",
    });
  
    myDropzone.on('addedfile', function(file){
      console.log(file);
      file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
    });
  
    myDropzone.on('totaluploadprogress', function(progress){
      console.log(progress);
      document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    });
  
    myDropzone.on('sending', function(file){
      // Show the total progress bar when upload starts
      document.querySelector("#total-progress").style.opacity = "1";
      // And disable the start button
      file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });
  
    myDropzone.on('queuecomplete', function(progress){
      document.querySelector("#total-progress").style.opacity = "0";
    });
  
    document.querySelector("#actions .start").onclick = function() {
      myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    };
    document.querySelector("#actions .cancel").onclick = function() {
      myDropzone.removeAllFiles(true);
    };
  
  
    }
  
    render() {
      return (
        &lt;div&gt;
  
            &lt;div id="actions" className="row"&gt;
  
                &lt;div className="col-lg-7"&gt;
                  &lt;span className="btn btn-success fileinput-button dz-clickable"&gt;
                      &lt;i className="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
                      &lt;span&gt;Add files...&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;button type="submit" className="btn btn-primary start"&gt;
                      &lt;i className="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="reset" className="btn btn-warning cancel"&gt;
                      &lt;i className="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel upload&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div className="col-lg-5"&gt;
                  &lt;span className="fileupload-process"&gt;
                    &lt;div id="total-progress" className="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"&gt;
                      &lt;div className="progress-bar progress-bar-success" data-dz-uploadprogress=""&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/span&gt;
                &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;div className="table table-striped" className="files" id="previews"&gt;
              &lt;div id="template" className="file-row"&gt;
                &lt;div&gt;
                    &lt;span className="preview"&gt;&lt;img data-dz-thumbnail /&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;p className="name" data-dz-name&gt;&lt;/p&gt;
                    &lt;strong className="error text-danger" data-dz-errormessage&gt;&lt;/strong&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;p className="size" data-dz-size&gt;&lt;/p&gt;
                    &lt;div className="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"&gt;
                      &lt;div className="progress-bar progress-bar-success" data-dz-uploadprogress&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;button className="btn btn-primary start"&gt;
                      &lt;i className="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button data-dz-remove className="btn btn-warning cancel"&gt;
                      &lt;i className="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button data-dz-remove className="btn btn-danger delete"&gt;
                    &lt;i className="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                    &lt;span&gt;Delete&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>