fix: Fix crash when uploading attachment

client/src/components/CardModal/Attachments/Attachments.jsx

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
-import { Button, Grid } from 'semantic-ui-react';
+import { Button } from 'semantic-ui-react';
 import { useToggle } from '../../../lib/hooks';
 
 import Item from './Item';
@@ -57,17 +58,27 @@ const Attachments = React.memo(
     }, [toggleAllVisible]);
 
     const galleryItemsNode = items.map((item, index) => {
-      const props = item.image
-        ? item.image
-        : {
-            content: (
-              <Grid verticalAlign="middle" className={styles.contentWrapper}>
-                <Grid.Column textAlign="center" className={styles.content}>
-                  {t('common.thereIsNoPreviewAvailableForThisAttachment')}
-                </Grid.Column>
-              </Grid>
-            ),
-          };
+      const isPdf = item.url && item.url.endsWith('.pdf');
+
+      let props;
+      if (item.image) {
+        props = item.image;
+      } else {
+        props = {
+          content: isPdf ? (
+            // eslint-disable-next-line jsx-a11y/alt-text
+            <object
+              data={item.url}
+              type="application/pdf"
+              className={classNames(styles.content, styles.contentPdf)}
+            />
+          ) : (
+            <span className={classNames(styles.content, styles.contentError)}>
+              {t('common.thereIsNoPreviewAvailableForThisAttachment')}
+            </span>
+          ),
+        };
+      }
 
       const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
 
@@ -88,7 +99,7 @@ const Attachments = React.memo(
                 createdAt={item.createdAt}
                 isCover={item.isCover}
                 isPersisted={item.isPersisted}
-                onClick={item.image ? open : undefined}
+                onClick={item.image || isPdf ? open : undefined}
                 onCoverSelect={() => handleCoverSelect(item.id)}
                 onCoverDeselect={handleCoverDeselect}
                 onUpdate={(data) => handleUpdate(item.id, data)}

client/src/components/CardModal/Attachments/Attachments.module.scss

@@ -1,12 +1,24 @@
 :global(#app) {
   .content {
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .contentPdf {
+    height: 100%;
+    width: 1120px;
+  }
+
+  .contentError {
     color: #fff;
     font-size: 20px;
     font-weight: 700;
-  }
-
-  .contentWrapper {
-    height: 100%;
+    height: 20px;
+    width: 470px;
   }
 
   .toggleButton {
@@ -25,4 +37,4 @@
       color: #092d42;
     }
   }
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "private": true,
   "homepage": "https://plankanban.github.io/planka",
   "repository": {

server/api/controllers/boards/create.js

@@ -33,11 +33,6 @@ module.exports = {
   },
 
   async fn(inputs) {
-    // TODO: allow over HTTP without subscription
-    if (!this.req.isSocket) {
-      return this.res.badRequest();
-    }
-
     const { currentUser } = this.req;
 
     const project = await Project.findOne(inputs.projectId);
@@ -61,7 +56,9 @@ module.exports = {
       this.req,
     );
 
-    sails.sockets.join(this.req, `board:${board.id}`); // TODO: only when subscription needed
+    if (this.req.isSocket) {
+      sails.sockets.join(this.req, `board:${board.id}`); // TODO: only when subscription needed
+    }
 
     return {
       item: board,

server/api/controllers/boards/show.js

@@ -20,11 +20,6 @@ module.exports = {
   },
 
   async fn(inputs) {
-    // TODO: allow over HTTP without subscription
-    if (!this.req.isSocket) {
-      return this.res.badRequest();
-    }
-
     const { currentUser } = this.req;
 
     const { board, project } = await sails.helpers.boards
@@ -77,7 +72,9 @@ module.exports = {
       card.isSubscribed = isSubscribedByCardId[card.id] || false; // eslint-disable-line no-param-reassign
     });
 
-    sails.sockets.join(this.req, `board:${board.id}`); // TODO: only when subscription needed
+    if (this.req.isSocket) {
+      sails.sockets.join(this.req, `board:${board.id}`); // TODO: only when subscription needed
+    }
 
     return {
       item: board,