Adding delete picture via pict-rs delete tokens. Fixes #505

6 files changed, 70 insertions, 20 deletions

diff --git a/docker/dev/docker-compose.yml b/docker/dev/docker-compose.yml
index 60b04beb..ab9ab7d8 100644
--- a/docker/dev/docker-compose.yml
+++ b/docker/dev/docker-compose.yml
@@ -28,7 +28,7 @@ services:
     restart: always
 
   pictrs:
-    image: asonix/pictrs:v0.1.0-r13
+    image: asonix/pictrs:v0.1.3-r1
     ports: 
       - "127.0.0.1:8537:8080"
     user: 991:991
diff --git a/server/src/api/post.rs b/server/src/api/post.rs
index 0e8a17e7..9eeb5158 100644
--- a/server/src/api/post.rs
+++ b/server/src/api/post.rs
@@ -116,8 +116,8 @@ impl Perform for Oper<CreatePost> {
       return Err(APIError::err("site_ban").into());
     }
 
-    // Fetch Iframely and Pictshare cached image
-    let (iframely_title, iframely_description, iframely_html, pictshare_thumbnail) =
+    // Fetch Iframely and pictrs cached image
+    let (iframely_title, iframely_description, iframely_html, pictrs_thumbnail) =
       fetch_iframely_and_pictrs_data(data.url.to_owned());
 
     let post_form = PostForm {
@@ -135,7 +135,7 @@ impl Perform for Oper<CreatePost> {
       embed_title: iframely_title,
       embed_description: iframely_description,
       embed_html: iframely_html,
-      thumbnail_url: pictshare_thumbnail,
+      thumbnail_url: pictrs_thumbnail,
     };
 
     let inserted_post = match Post::create(&conn, &post_form) {
@@ -450,8 +450,8 @@ impl Perform for Oper<EditPost> {
       return Err(APIError::err("site_ban").into());
     }
 
-    // Fetch Iframely and Pictshare cached image
-    let (iframely_title, iframely_description, iframely_html, pictshare_thumbnail) =
+    // Fetch Iframely and Pictrs cached image
+    let (iframely_title, iframely_description, iframely_html, pictrs_thumbnail) =
       fetch_iframely_and_pictrs_data(data.url.to_owned());
 
     let post_form = PostForm {
@@ -469,7 +469,7 @@ impl Perform for Oper<EditPost> {
       embed_title: iframely_title,
       embed_description: iframely_description,
       embed_html: iframely_html,
-      thumbnail_url: pictshare_thumbnail,
+      thumbnail_url: pictrs_thumbnail,
     };
 
     let _updated_post = match Post::update(&conn, data.edit_id, &post_form) {
diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx
index 7abab752..79aa91bd 100644
--- a/ui/src/components/comment-form.tsx
+++ b/ui/src/components/comment-form.tsx
@@ -18,6 +18,7 @@ import {
   setupTribute,
   wsJsonToRes,
   emojiPicker,
+  pictrsDeleteToast,
 } from '../utils';
 import { WebSocketService, UserService } from '../services';
 import autosize from 'autosize';
@@ -162,8 +163,9 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
               </button>
               {this.state.commentForm.content && (
                 <button
-                  className={`btn btn-sm mr-2 btn-secondary ${this.state
-                    .previewMode && 'active'}`}
+                  className={`btn btn-sm mr-2 btn-secondary ${
+                    this.state.previewMode && 'active'
+                  }`}
                   onClick={linkEvent(this, this.handlePreviewToggle)}
                 >
                   {i18n.t('preview')}
@@ -306,7 +308,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
 
     const imageUploadUrl = `/pictrs/image`;
     const formData = new FormData();
-    formData.append('file', file);
+    formData.append('images[]', file);
 
     i.state.imageLoading = true;
     i.setState(i.state);
@@ -317,16 +319,31 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     })
       .then(res => res.json())
       .then(res => {
-        let url = `${window.location.origin}/pictrs/${res.url}`;
-        let imageMarkdown =
-          res.filetype == 'mp4' ? `[vid](${url}/raw)` : `![](${url})`;
-        let content = i.state.commentForm.content;
-        content = content ? `${content}\n${imageMarkdown}` : imageMarkdown;
-        i.state.commentForm.content = content;
-        i.state.imageLoading = false;
-        i.setState(i.state);
-        let textarea: any = document.getElementById(i.id);
-        autosize.update(textarea);
+        console.log('pictrs upload:');
+        console.log(res);
+        if (res.msg == 'ok') {
+          let hash = res.files[0].file;
+          let url = `${window.location.origin}/pictrs/image/${hash}`;
+          let deleteToken = res.files[0].delete_token;
+          let deleteUrl = `${window.location.origin}/pictrs/image/delete/${deleteToken}/${hash}`;
+          let imageMarkdown = `![](${url})`;
+          let content = i.state.commentForm.content;
+          content = content ? `${content}\n${imageMarkdown}` : imageMarkdown;
+          i.state.commentForm.content = content;
+          i.state.imageLoading = false;
+          i.setState(i.state);
+          let textarea: any = document.getElementById(i.id);
+          autosize.update(textarea);
+          pictrsDeleteToast(
+            i18n.t('click_to_delete_picture'),
+            i18n.t('picture_deleted'),
+            deleteUrl
+          );
+        } else {
+          i.state.imageLoading = false;
+          i.setState(i.state);
+          toast(JSON.stringify(res), 'danger');
+        }
       })
       .catch(error => {
         i.state.imageLoading = false;
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 7811f918..d424538b 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -35,6 +35,7 @@ import {
   setupTribute,
   setupTippy,
   emojiPicker,
+  pictrsDeleteToast,
 } from '../utils';
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
@@ -536,9 +537,16 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         if (res.msg == 'ok') {
           let hash = res.files[0].file;
           let url = `${window.location.origin}/pictrs/image/${hash}`;
+          let deleteToken = res.files[0].delete_token;
+          let deleteUrl = `${window.location.origin}/pictrs/image/delete/${deleteToken}/${hash}`;
           i.state.postForm.url = url;
           i.state.imageLoading = false;
           i.setState(i.state);
+          pictrsDeleteToast(
+            i18n.t('click_to_delete_picture'),
+            i18n.t('picture_deleted'),
+            deleteUrl
+          );
         } else {
           i.state.imageLoading = false;
           i.setState(i.state);
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 2820bc48..570ea48c 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -487,6 +487,29 @@ export function toast(text: string, background: string = 'success') {
   }).showToast();
 }
 
+export function pictrsDeleteToast(
+  clickToDeleteText: string,
+  deletePictureText: string,
+  deleteUrl: string
+) {
+  let backgroundColor = `var(--light)`;
+  let toast = Toastify({
+    text: clickToDeleteText,
+    backgroundColor: backgroundColor,
+    gravity: 'top',
+    position: 'right',
+    duration: 0,
+    onClick: () => {
+      if (toast) {
+        window.location.replace(deleteUrl);
+        alert(deletePictureText);
+        toast.hideToast();
+      }
+    },
+    close: true,
+  }).showToast();
+}
+
 export function messageToastify(
   creator: string,
   avatar: string,
diff --git a/ui/translations/en.json b/ui/translations/en.json
index 87417223..22af4a8c 100644
--- a/ui/translations/en.json
+++ b/ui/translations/en.json
@@ -75,6 +75,8 @@
     "delete_account": "Delete Account",
     "delete_account_confirm":
       "Warning: this will permanently delete all your data. Enter your password to confirm.",
+    "click_to_delete_picture": "Click to delete picture.",
+    "picture_deleted": "Picture deleted.",
     "restore": "restore",
     "ban": "ban",
     "ban_from_site": "ban from site",