API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 10th, 2018
302
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.24 KB | None | 0 0
raw download clone embed print report
  1. <form method='POST' enctype="multipart/form-data" autocomplete="off"> {% csrf_token %}
  2.         <div class="form-container" style="box-shadow: 0 0 5px black;">
  3.             <div class="container">
  4.                 <div class="row">
  5.                     <div class="file-input col-md-6">
  6.                         <fieldset>
  7.                             <legend>Files</legend>
  8.                             <div class="field-wrapper-video field-wrapper">
  9.                                 {% if form.media.errors %}
  10.                                     {% for error in form.media.errors %}
  11.                                         <small class = "error-element-video error-element"><strong>{{ error|escape }}</strong></small>
  12.                                     {% endfor %}
  13.                                 {% endif %}
  14.                                 <label class="label-video form-label" for="{{ form.media.id_for_label }}">Video:</label>
  15.                                 <div>
  16.                                     <div id="dropContainerVideo" style="border:1px dashed grey;height:16vh;">
  17.                                         <input type="file" id="fileInputVideo" name="media" style="display:none; z-index:1;"/>
  18.                                         <div id="video-drop-text" style="z-index:0; text-align:center; vertical-align: middle; line-height: 16vh;">
  19.                                             <small unselectable="on" class="non-select"> Drop File Here </small>
  20.                                         </div>
  21.                                     </div>
  22.                                 </div>
  23.                                 <div class="progess-bar">
  24.                                     <div class="progress-bar-container">
  25.                                         <progress id="progressbar" value="0" max ="100" style="width:30vw"></progress><br>
  26.                                         <p id="status"></p><br>
  27.                                         <p id="loaded"></p>
  28.                                     </div>
  29.                                 </div>
  30.                                 <script>
  31.                                     dropContainerVideo.addEventListener("click", clickFile)
  32.                                     function clickFile(){
  33.                                         document.getElementById("fileInputVideo").click();
  34.                                     }
  35.  
  36.                                     dropContainerVideo.ondragover = dropContainerVideo.ondragenter = function(evt) {
  37.                                         dropContainerVideo.setAttribute("contenteditable", true);
  38.                                         evt.preventDefault();
  39.                                     };
  40.  
  41.                                     dropContainerVideo.ondrop = function(evt) {
  42.                                         evt.preventDefault();
  43.                                         fileInputVideo.files = evt.dataTransfer.files;
  44.                                         var fullPath = document.getElementById('fileInputVideo').value;
  45.                                         if (fullPath) {
  46.                                             var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
  47.                                             var filename = fullPath.substring(startIndex);
  48.                                             if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
  49.                                                 filename = filename.substring(1);
  50.                                             }
  51.  
  52.                                         }
  53.                                         document.getElementById('video-drop-text').innerHTML = "<small>"+ filename +"</small>";
  54.                                         dropContainerVideo.removeAttribute("contenteditable", true);
  55.                                     };
  56.  
  57.                                     fileInputVideo.onchange = function(evt){
  58.                                         fileInputVideo.files = evt.dataTransfer.files;
  59.                                         var fullPath = document.getElementById('fileInputVideo').value;
  60.                                         if (fullPath) {
  61.                                             var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
  62.                                             var filename = fullPath.substring(startIndex);
  63.                                             if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
  64.                                                 filename = filename.substring(1);
  65.                                             }
  66.  
  67.                                         }
  68.                                         document.getElementById('video-drop-text').innerHTML = "<small>"+ filename +"</small>";
  69.                                     }
  70.  
  71.  
  72.                                 </script>
  73.                             </div>
  74.                             <div class="field-wrapper-thumbnail field-wrapper">
  75.                                 {% if form.thumbnail.errors %}
  76.                                     {% for error in form.thumbnail.errors %}
  77.                                         <small class = "error-element-thumbnail error-element"><strong>{{ error|escape }}</strong></small>
  78.                                     {% endfor %}
  79.                                 {% endif %}
  80.                                 <label class="label-thumbnail form-label" for="{{ form.thumbnail.id_for_label }}">Thumbnail:</label>
  81.                                 <!-- <input id="thumbnail" type="file" name="thumbnail"  class="input input-thumbnail form-control"> -->
  82.                                 <div>
  83.                                     <div id="dropContainerThumbnail" style="border:1px dashed grey;height:16vh;">
  84.                                         <input type="file" id="fileInputThumbnail" name="thumbnail" style="display:none; z-index:1;"/>
  85.                                         <div id="thumbnail-drop-text" style="z-index:0; text-align:center; vertical-align: middle; line-height: 16vh;">
  86.                                             <small unselectable="on" class="non-select"> Drop File Here </small>
  87.                                         </div>
  88.                                     </div>
  89.  
  90.                                 </div>
  91.                                 <script>
  92.                                     dropContainerThumbnail.addEventListener("click", clickFile)
  93.                                     function clickFile(){
  94.                                         document.getElementById("fileInputThumbnail").click();
  95.                                     }
  96.  
  97.                                     dropContainerThumbnail.ondragover = dropContainerThumbnail.ondragenter = function(evt) {
  98.                                         dropContainerThumbnail.setAttribute("contenteditable", true);
  99.                                         evt.preventDefault();
  100.                                     };
  101.  
  102.                                     dropContainerThumbnail.ondrop = function(evt) {
  103.                                         evt.preventDefault();
  104.                                         fileInputThumbnail.files = evt.dataTransfer.files;
  105.                                         var fullPath = document.getElementById('fileInputThumbnail').value;
  106.                                         if (fullPath) {
  107.                                             var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
  108.                                             var filename = fullPath.substring(startIndex);
  109.                                             if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
  110.                                                 filename = filename.substring(1);
  111.                                             }
  112.  
  113.                                         }
  114.                                         document.getElementById('thumbnail-drop-text').innerHTML = "<small>"+ filename +"</small>";
  115.                                         dropContainerThumbnail.removeAttribute("contenteditable", true);
  116.                                     };
  117.  
  118.                                     fileInputThumbnail.onchange = function(evt){
  119.                                         var fullPath = document.getElementById('fileInputThumbnail').value;
  120.                                         if (fullPath) {
  121.                                             var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
  122.                                             var filename = fullPath.substring(startIndex);
  123.                                             if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
  124.                                                 filename = filename.substring(1);
  125.                                             }
  126.  
  127.                                         }
  128.                                         document.getElementById('thumbnail-drop-text').innerHTML = "<small>"+ filename +"</small>";
  129.                                     }
  130.  
  131.  
  132.                                 </script>
  133.                             </div>
  134.  
  135.                             <small>
  136.                                 Show list of thumbnails chosen at random from uploaded video file
  137.                             </small>
  138.                         </fieldset>
  139.                     </div>
  140.  
  141.                     <div class="detail-input col-md-6">
  142.                         <fieldset>
  143.                             <legend>Details</legend>
  144.                             <div class="field-wrapper-title field-wrapper">
  145.                                 {% if form.title.errors %}
  146.                                 <ol class="error-list-title error-list">
  147.                                     {% for error in form.title.errors %}
  148.                                         <li class = "error-list-element-title error-list-element"><strong>{{ error|escape }}</strong></li>
  149.                                     {% endfor %}
  150.                                  </ol>
  151.                                 {% endif %}
  152.                                  <div class="row">
  153.                                     <div class="col-md-4">
  154.                                         <label class="label-title form-label" for="{{ form.title.id_for_label }}">Title:</label>
  155.                                     </div>
  156.                                     <div class="col-md-4">
  157.                                         <input id="title" type="textfield" name="title" class="input input-title form-control" autocomplete="off" placeholder="Video Title">
  158.                                     </div>
  159.                                 </div>
  160.                             </div>
  161.                             <br>
  162.                             <div class="field-wrapper-description field-wrapper">
  163.                                 {% if form.description.errors %}
  164.                                 <ol class="error-list-description error-list">
  165.                                     {% for error in form.description.errors %}
  166.                                         <li class = "error-list-element-description error-list-element"><strong>{{ error|escape }}</strong></li>
  167.                                     {% endfor %}
  168.                                  </ol>
  169.                                 {% endif %}
  170.                                 <div class="row">
  171.                                     <div class="col-md-4">
  172.                                         <label class="label-description form-label" for="{{ form.description.id_for_label }}">Description:</label>
  173.                                     </div>
  174.                                     <div class="col-md-4">
  175.                                         <textarea id="description" name="description" class="input input-description form-control" autocomplete="off" placeholder="Description shown in view page"></textarea>
  176.                                     </div>
  177.                                 </div>
  178.                             </div>
  179.                             <div class="row">
  180.                                 <div class="col-md-4">
  181.                                 </div>
  182.                                 <div class="col-md-8">
  183.                                     <small>checkbox for copying description to list</small>
  184.                                 </div>
  185.                             </div>
  186.                             <div class="field-wrapper-description_short field-wrapper">
  187.                                 {% if form.description_short.errors %}
  188.                                 <ol class="error-list-description_short error-list">
  189.                                     {% for error in form.description_short.errors %}
  190.                                         <li class = "error-list-element-description_short error-list-element"><strong>{{ error|escape }}</strong></li>
  191.                                     {% endfor %}
  192.                                  </ol>
  193.                                 {% endif %}
  194.                                 <div class="row">
  195.                                     <div class="col-md-4">
  196.                                         <label class="label-description_short form-label" for="{{ form.description_short.id_for_label }}">Search Description:</label>
  197.                                     </div>
  198.                                     <div class="col-md-4">
  199.                                         <textarea id="description_short" onkeyup="textCounter(this,'counter-description_short',300);" maxlength="300" name="description_short" class="input input-description_short form-control" autocomplete="off" placeholder="Description shown in search page"></textarea>
  200.                                     </div>
  201.                                 </div>
  202.                             </div>
  203.                             <div class="row">
  204.                                 <div class="col-md-4">
  205.                                 </div>
  206.                                 <div class="col-md-8">
  207.                                     <small id="counter-label-description_short">Characters remaining: </small><small id="counter-description_short">300</small>
  208.                                 </div>
  209.                             </div>
  210.                             <script>
  211.                                 function textCounter(field,field2,maxlimit)
  212.                                 {
  213.                                     var countfield = document.getElementById(field2);
  214.                                     if ( field.value.length > maxlimit ) {
  215.                                         field.value = field.value.substring( 0, maxlimit );
  216.                                         return false;
  217.                                     } else {
  218.                                         document.getElementById("counter-description_short").innerHTML = maxlimit - field.value.length;
  219.                                     }
  220.                                     if (maxlimit - field.value.length < 50){
  221.                                        document.getElementById("counter-description_short").style.color = "darkred";
  222.                                        document.getElementById("counter-label-description_short").style.color = "darkred";
  223.                                    } else {
  224.                                        document.getElementById("counter-description_short").style.color = "black";
  225.                                        document.getElementById("counter-label-description_short").style.color = "black";
  226.                                    }
  227.                                }
  228.                            </script>
  229.                             <div class="field-wrapper-category field-wrapper">
  230.                                 {% if form.category.errors %}
  231.                                 <ol class="error-list-category error-list">
  232.                                     {% for error in form.category.errors %}
  233.                                         <li class = "error-list-element-category error-list-element"><strong>{{ error|escape }}</strong></li>
  234.                                     {% endfor %}
  235.                                  </ol>
  236.                                 {% endif %}
  237.                                 <div class="row">
  238.                                     <div class="col-md-4">
  239.                                         <label class="label-category form-label" for="{{ form.category.id_for_label }}">Category:</label>
  240.                                     </div>
  241.                                     <div class="col-md-4">
  242.                                          <select id="category" name="category" class="input input-category form-control">
  243.                                             {% for obj in categories%}
  244.                                                 <option value="{{obj.pk}}">{{ obj.description.capitalize }}</option>
  245.                                             {% endfor %}
  246.                                          </select>
  247.                                     </div>
  248.                                 </div>
  249.                             </div>
  250.                             <br>
  251.                             <div class="field-wrapper-time field-wrapper">
  252.                                 {% if form.time.errors %}
  253.                                 <ol class="error-list-time error-list">
  254.                                     {% for error in form.time.errors %}
  255.                                         <li class = "error-list-element-time error-list-element"><strong>{{ error|escape }}</strong></li>
  256.                                     {% endfor %}
  257.                                  </ol>
  258.                                 {% endif %}
  259.                                 <div class="row">
  260.                                     <div class="col-md-4">
  261.                                         <label class="label-time form-label" for="{{ form.time.id_for_label }}">Time:</label>
  262.                                     </div>
  263.                                     <div class="col-md-4">
  264.                                         <input id="time" type="number" name="time" class="input input-time form-control" autocomplete="off">
  265.                                     </div>
  266.                                 </div>
  267.                             </div>
  268.                             <br>
  269.                             <div class="field-wrapper-type field-wrapper">
  270.                                 {% if form.type.errors %}
  271.                                 <ol class="error-list-type error-list">
  272.                                     {% for error in form.type.errors %}
  273.                                         <li class = "error-list-element-type error-list-element"><strong>{{ error|escape }}</strong></li>
  274.                                     {% endfor %}
  275.                                  </ol>
  276.                                 {% endif %}
  277.                                 <div class="row">
  278.                                     <div class="col-md-4">
  279.                                         <label class="label-type form-label" for="{{ form.type.id_for_label }}">Type:</label>
  280.                                     </div>
  281.                                     <div class="col-md-4">
  282.                                          <select id="type" name="type" class="input input-type form-control">
  283.                                              <option value="0" selected>Public</option>
  284.                                              <option value="1">Private</option>
  285.                                              <option value="2">Linkable</option>
  286.                                          </select>
  287.                                     </div>
  288.                                 </div>
  289.                             </div>
  290.                             <br>
  291.                             {{ form.non_field_errors }}
  292.                         </fieldset>
  293.                     </div>
  294.                 </div>
  295.                 <div class="row">
  296.                     <div class="col-md-8">
  297.                         <small>here we will say something like accept the fucking terms and agreements when uploading </small>
  298.                     </div>
  299.                     <div class="col-md-2">
  300.                         <button type="submit" class="submit-button btn btn-primary" >Save</button>
  301.                     </div>
  302.                 </div>
  303.                 <br>
  304.             </div>
  305.         </div>
  306.     </form>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!