scratch – Rev 21

Subversion Repositories:
Rev:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="quick asset upload">
    <meta name="author" content="Wizardry and Steamworks">
    <link rel="icon" href="favicon.ico">

    <title>Quickload</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/bootstrap/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/bootstrap/html5shiv.min.js"></script>
      <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    
    <!-- DropZone -->
    <link href="css/dropzone/dropzone.min.css" rel="stylesheet">
    <!-- Local style -->
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>

    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Quickload</h1>
        <p>Asset sharing platform.</p>
      </div>
      
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Files</a></li>
      </ul>
      
      <div class="panel panel-default">
          <div class="panel-heading">
              <div id="actions" class="row">
                <div class="col-lg-5">
                    <div class="btn-group btn-group-justified" role="group">
                      <!-- The fileinput-button span is used to style the file input field as button -->
                      <div class="btn-group" role="group">
                          <button id="uploadbutton" type="button" class="btn btn-default">
                              <i class="glyphicon glyphicon-plus"></i>
                              <span>Add...</span>
                          </button>
                      </div>
                      <div class="btn-group" role="group">
                          <button type="submit" class="btn btn-default start">
                              <i class="glyphicon glyphicon-upload"></i>
                              <span>Upload</span>
                          </button>
                      </div>
                      <div class="btn-group" role="group">
                          <button type="reset" class="btn btn-default cancel">
                              <i class="glyphicon glyphicon-ban-circle"></i>
                              <span>Cancel</span>
                          </button>
                      </div>
                    </div>
                </div>
              </div>
          </div>
          <div class="panel-body" id="uploadpanel">
              <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 src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
                  </div>
                  <div>
                      <p id="name" class="name" data-dz-name></p>
                      <div class="input-group">
                          <input id="URL" type="text" class="form-control" readonly>
                          <span class="input-group-btn">
                              <button id="btn-clipboard" class="btn btn-default" type="button"><img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard"></button>
                          </span>
                      </div>
                      <strong class="error text-danger" data-dz-errormessage></strong>
                  </div>
                  <div>
                      <p class="size" data-dz-size></p>
                      <div id="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>
                  </div>
                  <div>
                    <button id="start" class="btn btn-default start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Upload</span>
                    </button>
                    <button id="cancel" data-dz-remove class="btn btn-default cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                    <button id="remove" data-dz-remove class="btn btn-danger remove">
                      <i class="glyphicon glyphicon-remove"></i>
                      <span>Remove</span>
                    </button>
                  </div>
                </div>

              </div>
            </div>
            <!-- The global file processing state -->
            <div 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>
             </div>
      </div>

    </div> <!-- /container -->
    
    <div id="footer">
        <div class="container">
            <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
        </div>
    </div>

    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
    
    <!-- DropZone -->
    <script src="js/dropzone/dropzone.min.js"></script>
    <!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> -->
    <!-- Clipboard -->
    <script src="js/clipboard/clipboard.min.js"></script>
    <script>
    $(document).ready(function(){
        // 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('.panel-body', { // Make the whole body a dropzone
            url: "upload.php", // Set the url
            paramName: "file",
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            //parallelUploads: 20,
            previewTemplate: previewTemplate,
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Container to display the previews
            clickable: [
                "#uploadbutton",
                "#uploadpanel"
            ],
            //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
        }).on("addedfile", (file) => {
            // Hookup the start button
            file.previewElement.querySelector(".start").onclick = () => { 
                myDropzone.enqueueFile(file);
            };
        }).on("totaluploadprogress", (progress) => {
            document
                .querySelector("#total-progress .progress-bar")
                    .style
                    .width = progress + "%";
        }).on("sending", (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");
        }).on("queuecomplete", (progress) => {
            document.querySelector("#total-progress")
                .style
                .opacity = "0";
        }).on("success", (file, data) => {
            
            var boxURLID = '_' + Math
                .random()
                .toString(36)
                .substr(2, 9);
            file
                .previewElement
                .querySelector("#URL")
                .value = data;
                
            file
                .previewElement
                .querySelector("#URL")
                .setAttribute('id', boxURLID)
                  
            // Clipboard button.
            clipButtonID = '_' + Math
                .random()
                .toString(36)
                .substr(2, 9);
            file
                .previewElement
                .querySelector("#btn-clipboard")
                .setAttribute('data-clipboard-target', '#' + boxURLID)
            
            file
                .previewElement
                .querySelector("#btn-clipboard")
                .setAttribute('id', clipButtonID);

            file
                .previewElement
                .querySelector(".start")
                .setAttribute("disabled", "disabled");
            file
                .previewElement
                .querySelector(".cancel")
                .setAttribute("disabled", "disabled");
                
            new Clipboard('#' + clipButtonID);
        });
        
        document.querySelector("#actions .start").onclick = () => {
            myDropzone.enqueueFiles(
                myDropzone
                    .getFilesWithStatus(Dropzone.ADDED));
        };
        
        document.querySelector("#actions .cancel").onclick = () => {
            myDropzone.removeAllFiles(true);
        };
    });
    </script>
  </body>
</html>