Implement document preview pre-upload Materi

0eba22b8 · Josh Sudung · 3d35ca2e · 0eba22b8 · 0eba22b8 · 0eba22b8
Commit 0eba22b8 authored Oct 30, 2020 by Josh Sudung
--- a/app/templates/app/base_dashboard.html
+++ b/app/templates/app/base_dashboard.html
@@ -24,6 +24,7 @@
    <!-- Custom styles for this page -->
    <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
    {% block stylesheets %}{% endblock %}
+    {% block scripts %}{% endblock %}
 </head>

 <body id="page-top" style="font-family: 'Poppins', sans-serif;">

--- a/app/templates/unggah.html
+++ b/app/templates/unggah.html
@@ -5,6 +5,10 @@
 <title>Unggah Materi | Digipus</title>
 {% endblock %}

+{% block scripts %}
+<script src="{% static 'js/upload-preview.js' %}"></script>
+{% endblock %}
+
 {% block content %}
 <div class="container">
    <div class="col-20">
@@ -36,6 +40,17 @@
                    {% if field.help_text %}
                    <p class="help">{{ field.help_text|safe }}</p>
                    {% endif %}
+                    {% if field.name == 'cover' %}
+                    <div hidden id="frame_cover_parent" class="my-3">
+                      <div class="mb-2">Preview Cover:</div>
+                      <img id="frame_cover" class="constraint-frame" alt="Cover Preview" />
+                    </div>
+                    {% elif field.name == 'content' %}
+                    <div hidden id="frame_content_parent" class="my-3">
+                      <div class="mb-2">Preview Content:</div>
+                      <embed id="frame_content" width="550px" height="550px" />
+                    </div>
+                    {% endif %}
                </div>
            </div>
            {% endfor %}

--- a/staticfiles/css/button.css
+++ b/staticfiles/css/button.css
@@ -117,4 +117,9 @@
 .margin-content {
    margin: 0;
    padding: 0;
+}
+
+.constraint-frame {
+    max-width: 550px; 
+    max-height: 550px;
 }
\ No newline at end of file
--- a/staticfiles/js/upload-preview.js
+++ b/staticfiles/js/upload-preview.js
+window.onload = () => {
+  document.querySelector('input[name="cover"]').setAttribute("onchange", "preview('frame_cover')");
+  document.querySelector('input[name="content"]').setAttribute("onchange", "preview('frame_content')");
+}
+
+const preview = (elementClass) => {
+  let frame = document.getElementById(elementClass);
+  let frameParent = document.getElementById(`${elementClass}_parent`);
+  
+  // Embed elements need to be recreated on source change
+  if (frame.nodeName.toLowerCase() === 'embed') {
+    frameParent.removeChild(frame);
+    frameParent.insertAdjacentHTML(
+      'beforeend',
+      '<embed id="frame_content" width="550px" height="550px" />'
+    );
+    frame = document.getElementById(elementClass);
+  }
+
+  frame.src = URL.createObjectURL(event.target.files[0]);
+  frameParent.removeAttribute('hidden');
+}
\ No newline at end of file