diff --git a/app/templates/app/base_dashboard.html b/app/templates/app/base_dashboard.html
index b8281931e7b8fae10fe76dd0477fee586206fcb2..c74bd589eb745d75b89cb9f1560428d76b24e4fb 100644
--- 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;">
diff --git a/app/templates/unggah.html b/app/templates/unggah.html
index 5f9a0c1da2c7b2303e9c869fe6704d35bb22e4d7..b6668bb76ef6c9b73303b640bff5fb20d1168478 100644
--- 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 %}
diff --git a/staticfiles/css/button.css b/staticfiles/css/button.css
index 90a8a87a089ed75ec7f3eda8a752f03fdf10b3e6..8ea2c9fe4fff979bcd96c0dedb3921ae5c782594 100755
--- 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
diff --git a/staticfiles/js/upload-preview.js b/staticfiles/js/upload-preview.js
new file mode 100644
index 0000000000000000000000000000000000000000..c424f70d2de26b0c31676d1e0435928f92ef20c7
--- /dev/null
+++ b/staticfiles/js/upload-preview.js
@@ -0,0 +1,22 @@
+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