Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="jquery-ui.min.css" rel="stylesheet"/>
​
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.css"  rel="stylesheet" type="text/css">
​
     <!-- Latest compiled and minified CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" >
    <!-- Optional theme -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet" >
​
    <script src="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.js"></script>
    <!--<script src="mydropzone.js"></script>-->  
    <script>
      Dropzone.autoDiscover = false;
    </script>
​
</head>
<body>
<?php
// Initialize the session
  session_start();
  $appid = "98765";
  $_SESSION['appid'] = $appid;
  $schid = "101";
  $_SESSION['schid'] = $schid;
​
?>
<div class="box centered editor">
    <div class="boxContent">
        <form id="myForm" name="myForm" id="myForm">
        <label class="editor-label">First Name <span class="mandatory"> *</span></label>
        <div class="editor-field">
          <input type="text" name="firstname" id="firstname">
        </div>
            <div class="separator"></div>
            <label class="editor-label">Last Name <span class="mandatory"> *</span></label>
            <div class="editor-field">
          <input type="text" name="lastname" id="lastname">
            </div>
          </form>
            <br>  
        <div class="container" >
            <div class='content'>
                <br>
                <div id="actions" class="row">
                  <div class="col-lg-7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>Browse files...</span>
                    </span>
                  </div>
                  <div class="col-lg-5">
                    <!-- The global file processing state -->
                    <span class="fileupload-process">
                      <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                      </div>
                    </span>
                  </div>
                </div>
​
                <div class="table table-striped files" id="previews">
                  <div id="template" class="file-row">
                    <!-- This is used as the file preview template -->
                    <div>
                        <span class="preview"><img data-dz-thumbnail /></span>
                    </div>
                    <div>
                        <p class="name" data-dz-name></p>
                        <strong class="error text-danger" data-dz-errormessage></strong>
                    </div>
                    <div>
                        <p class="size" data-dz-size></p>
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                          <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                        </div>
                    </div>
                    <div>
                      <button class="btn btn-primary start">
                          <i class="glyphicon glyphicon-upload"></i>
                          <span>Start</span>
                      </button>
                      <button data-dz-remove class="btn btn-danger delete">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Remove</span>
                      </button>
                    </div>
                  </div>
                </div>
​
                <div id="actions" class="row">
                  <div class="col-lg-7">
​
                    <button type="submit" class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start upload</span>
                    </button>
​
                  </div>
                  <div class="col-lg-5">
                    <!-- The global file processing state -->
                    <span class="fileupload-process">
                      <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                      </div>
                    </span>
                  </div>
                </div>             
​
            <br>
            <p></p>
            </div> 
        </div>
    </div>
</div>
​
</body>
</html>
 
// Get the template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
​
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
  //url: "http://www.the-url-you-want-to-use.com/dropzone.php", // Set the url
  url: "upload.php", // Set the url
  method: "POST",
  params: () => ({
    firstname: document.querySelector('#firstname').value,
    lastname: document.querySelector('#lastname').value,
  }),
  /*params: {
                         firstname: "abcde",
                         lastname: "vwxyz",
                    },*/
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  createImageThumbnails: false,
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});
​
myDropzone.on("addedfile", function(file) {
  // Hookup the start button
  file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
​
// Update the total progress bar
myDropzone.on("totaluploadprogress", function(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("sending", function(file, xhr, formData) {
                    formdata.append("firstname", $('#firstname').val());
                  });*/
​
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
  document.querySelector("#total-progress").style.opacity = "0";
});
​
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
  myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
// document.querySelector("#actions .cancel").onclick = function() {
//   myDropzone.removeAllFiles(true);
// };
myDropzone.on("queuecomplete", function(file) {
  // Message when finished
  alert('Files have been uploaded')
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
moshfeupro
0viewers