From 0eba22b827956253486ae539b8173fa57f1a6de0 Mon Sep 17 00:00:00 2001
From: Josh Sudung <josh.sudung07@gmail.com>
Date: Fri, 30 Oct 2020 21:06:32 +0700
Subject: [PATCH] Implement document preview pre-upload Materi
---
app/templates/app/base_dashboard.html | 1 +
app/templates/unggah.html | 15 +++++++++++++++
staticfiles/css/button.css | 5 +++++
staticfiles/js/upload-preview.js | 22 ++++++++++++++++++++++
4 files changed, 43 insertions(+)
create mode 100644 staticfiles/js/upload-preview.js
diff --git a/app/templates/app/base_dashboard.html b/app/templates/app/base_dashboard.html
index b828193..c74bd58 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 5f9a0c1..b6668bb 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 90a8a87..8ea2c9f 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 0000000..c424f70
--- /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
--
GitLab