5 files changed, 106 insertions(+), 2 deletions(-)

M src/App.vue
M src/components/DiscordiaForm.vue
A src/components/DiscordiaImage.vue
M src/components/DiscordiaPost.vue
M src/components/DiscordiaThread.vue

@@ 44,11 44,17 @@ export default {
         title: "Number Stations",
         body: "This is our first thread, yay!",
         date: new Date(),
+        filename: "placeholder.jpg",
+        fileurl: "https://via.placeholder.com/300x300",
+        fileinfo: "3.2MB 200x200",
         posts: [
           {
             id: "20035",
             author: "Paul Santorinis",
             date: new Date(),
+            filename: "placeholder.jpg",
+            fileurl: "https://via.placeholder.com/200x120",
+            fileinfo: "3.2MB 200x200" /* we need to generate this somehow */,
             is_replied_by: ["20036"],
             body: [
               new Map([


@@ 68,6 74,9 @@ export default {
             id: "20036",
             author: "Steve Kaketsis",
             date: new Date(),
+            filename: "placeholder.jpg",
+            fileurl: "https://via.placeholder.com/100x120",
+            fileinfo: "3.2MB 200x200" /* we need to generate this somehow */,
             is_replied_by: [],
             body: [
               new Map([

@@ 42,6 42,19 @@
       </span>
     </transition>
     <div class="discordia-form-input">
+      <label for="file">Image</label>
+      <input
+        type="file"
+        id="image"
+        name="image"
+        accept="image/png, image/jpeg"
+        enctype="multipart/form-data"
+        @change="handleImage"
+      />
+      <img v-if="preview_url" id="preview" :src="preview_url" />
+      <button v-if="image" @click="clearImage">☠</button>
+    </div>
+    <div class="discordia-form-input">
       <label for="password">Password</label>
       <input type="password" v-model="form.password" placeholder="For file deletion" />
     </div>


@@ 82,6 95,17 @@ export default {
       this.preview_url = "";
       document.getElementById("image").value = "";
     },
+
+    handleImage: function(e) {
+      const file = e.target.files[0];
+      this.preview_url = URL.createObjectURL(file);
+      this.image = true;
+    },
+    clearImage: function() {
+      document.getElementById("image").value = "";
+      this.image = false;
+      this.preview_url = "";
+    },
     enableTooltip: function() {
       this.tooltip = true;
     },

@@ 0,0 1,61 @@
+<!-- Copyright © 2020 Dimakakos Dimakis <me@bendersteed.tech>
+     
+     This program is free software; you can redistribute it and/or
+     modify it under the terms of the GNU General Public License as
+     published by the Free Software Foundation; either version 3 of the
+     License, or (at your option) any later version.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+     General Public License for more details.
+
+     You should have received a copy of the GNU General Public License
+     along with this program. If not, see
+     <http://www.gnu.org/licenses/>. -->
+
+<template>
+  <div v-if="fileurl" class="discordia-files">
+    <p class="discordia-fileinfo">
+      File:
+      <a :href="fileurl">{{ filename }}</a>
+      ({{ fileinfo }})
+      <!-- maybe incorporate imgopd and/or iqdb -->
+    </p>
+    <a :href="fileurl">
+      <img :src="fileurl" class="discordia-image" />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DiscordiaImage",
+  props: {
+    fileurl: String,
+    filename: String,
+    fileinfo: String
+  },
+  data: () => {
+    return {
+      toggle: false
+    };
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.discordia-fileinfo {
+  display: block;
+  margin: 0;
+}
+
+.discordia-image {
+  float: left;
+  display: block;
+  padding-top: 0.3em;
+  max-width: 94% !important;
+  margin: 0 20px 0 0;
+}
+</style>

@@ 35,6 35,7 @@
           >{{ ">>" + reply }}</a>
         </span>
       </div>
+      <discordia-image :fileurl="post.fileurl" :filename="post.filename" :fileinfo="post.fileinfo" />
       <div :ref="post.id" class="discordia-message">
         <p v-for="(p, index) in post.body" :key="index">
           <span v-for="(elt,index) in p.value" :key="index">


@@ 52,7 53,7 @@
         </p>
       </div>
       <form v-if="toggle" class="discordia-edit-post">
-        <input type="password" v-model="password" placeholder="For comment deletion" />
+        <input type="password" v-model="password" placeholder="For file deletion" />
         <button type="submit" @click.prevent="checkDeletion(password)">Delete Post</button>
       </form>
       <div v-if="wrong && toggle" class="discordia-wrong-password">


@@ 64,6 65,8 @@
 </template>
 
 <script>
+import DiscordiaImage from "./DiscordiaImage.vue";
+
 export default {
   name: "DiscordiaPost",
   props: {


@@ 78,7 81,7 @@ export default {
     };
   },
   components: {
-
+    DiscordiaImage
   },
   mounted() {
     document.addEventListener("mouseup", e => {

@@ 16,6 16,11 @@
 
 <template>
   <div class="discordia-thread-container">
+    <discordia-image
+      :fileurl="thread.fileurl"
+      :filename="thread.filename"
+      :fileinfo="thread.fileinfo"
+    />
     <div class="discordia-op-post">
       <div class="discordia-preample">{{ thread.title }} {{ dateString }} No.{{thread.id}}</div>
       <div class="discordia-message">{{ thread.body }}</div>


@@ 34,6 39,7 @@
 
 <script>
 import DiscordiaPost from "./DiscordiaPost.vue";
+import DiscordiaImage from "./DiscordiaImage.vue";
 
 export default {
   name: "DiscordiaThread",


@@ 42,6 48,7 @@ export default {
   },
   components: {
     DiscordiaPost,
+    DiscordiaImage
   },
   methods: {
     deletePost: function(post) {