Merge pull request #131 from hyperspacedev/copy-paste-image

[HD-4] Add copy and paste support for images to composer
hyperspacedev · Nov 24, 2019 · 14a06dd · 14a06dd
2 parents ee865cd + 8b1142f
commit 14a06dd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 30 deletions.
diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx
@@ -1,3 +1,3 @@
 import AudioPlayer from "./AudioPlayer";
 
-export default AudioPlayer;
+export default AudioPlayer;
diff --git a/src/pages/Compose.tsx b/src/pages/Compose.tsx
@@ -106,6 +106,25 @@ class Composer extends Component<any, IComposerState> {
                     : 99999999
             });
         });
+
+        window.addEventListener("paste", (evt: Event) => {
+            let thePasteEvent = evt as ClipboardEvent;
+            let fileList: File[] = [];
+            if (thePasteEvent.clipboardData != null) {
+                let clipitems = thePasteEvent.clipboardData.items;
+                if (clipitems != undefined) {
+                    for (let i = 0; i < clipitems.length; i++) {
+                        if (clipitems[i].type.indexOf("image") != -1) {
+                            let clipfile = clipitems[i].getAsFile();
+                            if (clipfile != null) {
+                                fileList.push(clipfile);
+                            }
+                        }
+                    }
+                    this.actuallyUploadMedia(fileList);
+                }
+            }
+        });
     }
 
     componentWillReceiveProps(props: any) {
@@ -176,35 +195,7 @@ class Composer extends Component<any, IComposerState> {
             multiple: false,
             accept: ".jpeg,.jpg,.png,.gif,.webm,.mp4,.mov,.ogg,.wav,.mp3,.flac"
         })
-            .then((media: FileList) => {
-                let mediaForm = new FormData();
-                mediaForm.append("file", media[0]);
-                this.props.enqueueSnackbar("Uploading media...", {
-                    persist: true,
-                    key: "media-upload"
-                });
-                this.client
-                    .post("/media", mediaForm)
-                    .then((resp: any) => {
-                        let attachment: Attachment = resp.data;
-                        let attachments = this.state.attachments;
-                        if (attachments) {
-                            attachments.push(attachment);
-                        } else {
-                            attachments = [attachment];
-                        }
-                        this.setState({ attachments });
-                        this.props.closeSnackbar("media-upload");
-                        this.props.enqueueSnackbar("Media uploaded.");
-                    })
-                    .catch((err: Error) => {
-                        this.props.closeSnackbar("media-upload");
-                        this.props.enqueueSnackbar(
-                            "Couldn't upload media: " + err.name,
-                            { variant: "error" }
-                        );
-                    });
-            })
+            .then((media: FileList) => this.actuallyUploadMedia(media))
             .catch((err: Error) => {
                 this.props.enqueueSnackbar("Couldn't get media: " + err.name, {
                     variant: "error"
@@ -213,6 +204,36 @@ class Composer extends Component<any, IComposerState> {
             });
     }
 
+    actuallyUploadMedia(media: FileList | File[]) {
+        let mediaForm = new FormData();
+        mediaForm.append("file", media[0]);
+        this.props.enqueueSnackbar("Uploading media...", {
+            persist: true,
+            key: "media-upload"
+        });
+        this.client
+            .post("/media", mediaForm)
+            .then((resp: any) => {
+                let attachment: Attachment = resp.data;
+                let attachments = this.state.attachments;
+                if (attachments) {
+                    attachments.push(attachment);
+                } else {
+                    attachments = [attachment];
+                }
+                this.setState({ attachments });
+                this.props.closeSnackbar("media-upload");
+                this.props.enqueueSnackbar("Media uploaded.");
+            })
+            .catch((err: Error) => {
+                this.props.closeSnackbar("media-upload");
+                this.props.enqueueSnackbar(
+                    "Couldn't upload media: " + err.name,
+                    { variant: "error" }
+                );
+            });
+    }
+
     getOnlyMediaIds() {
         let ids: string[] = [];
         if (this.state.attachments) {