Advertisement
mcbrune

Django, dropzone HTML/CSS/JS

Jun 14th, 2016
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.16 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Delphix Self-Service Portal</title>
  6.  
  7. <link href="/static/css/dassp.css" type="text/css" rel="stylesheet">
  8. <link href="/static/css/dropzone.css" type="text/css" rel="stylesheet">
  9. </head>
  10. <body>
  11. <div class="container">
  12. <div style="margin-top:30px;" class="navbar"><img src="/static/img/delphix_logo.png" style="width:130px"></div>
  13. <div class="navbar">
  14. <div class="navbar-inner">
  15. <div style="position:absolute;" class="pull-left">
  16. <h2 style="margin:0px;" class="text-slim">Solution Architecture Portal</h2>
  17. </div>
  18. <ul class="nav pull-right">
  19. <li class="active"><a href="#"><span class="text-bold">NEW SIZING</span></a></li>
  20. </ul>
  21. </div>
  22. </div>
  23. <div style="margin-top:60px;" class="panel">
  24. <div style="padding:60px" class="panel-body">
  25. <h3 style="margin:0px; margin-bottom:20px !important;" class="text-slim">Self-Service Sizing</h3>
  26. <form action="/sizeEstimate/" id="myDropzone" method="post" enctype="multipart/form-data">
  27. <input type='hidden' name='csrfmiddlewaretoken' value='PaY5K4eoVKhPA6IzQssk4AwMsaTPSS3x' />
  28.  
  29. <input type="hidden" name="_token" value="tokenized value">
  30. <input name="company_name" placeholder="Customer Name" class="i-delphix form-control">
  31. <input name="email_addr" placeholder="Email" style="margin-top:10px;" class="i-delphix form-control">
  32.  
  33. <div id="myDropzone" class="dropzone dz-delphix">
  34. <div class="fallback">
  35. <input type="file" name="docfile">
  36. </div>
  37. </div>
  38. <div style="margin-top:30px;" class="text-center">
  39. <button type="submit" class="btn btn-danger text-slim">SUBMIT</button>
  40. </div>
  41. </form>
  42. </div>
  43. </div>
  44. <div class="navbar">&nbsp;</div>
  45. </div>
  46. <p>None</p>
  47.  
  48. <script src="/static/js/jquery.min.js"></script>
  49. <script src="/static/js/dropzone.js"></script>
  50. <script type="text/javascript">
  51. <script var docfile = "";
  52. </script>
  53.  
  54. Dropzone.options.myDropzone =
  55. {
  56. paramName: "docfile",
  57. url: "index.html",
  58. dictDefaultMessage: "Drop the sizing files here or click to upload.",
  59. dictRemoveFile: "Remove",
  60.  
  61. // Prevents Dropzone from uploading dropped files immediately
  62.  
  63. autoProcessQueue : false,
  64.  
  65. init : function()
  66. {
  67. var submitButton = document.querySelector("#submit-all")
  68. myDropzone = this;
  69.  
  70. submitButton.addEventListener("click", function()
  71. {
  72. myDropzone.processQueue();
  73. myDropzone.preventDefault();
  74. myDropzonee.stopPropagation();
  75. // Tell Dropzone to process all queued files.
  76. });
  77.  
  78. // You might want to show the submit button only when
  79. // files are dropped here:
  80. this.on("addedfile", function()
  81. {
  82. // Show submit button here and/or inform user to click it.
  83. });
  84.  
  85. }
  86. };
  87. </script>
  88. </body>
  89. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement