ep_media_upload 0.1.0 → 0.1.1

package/README.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-A lightweight Etherpad plugin that adds file upload capability via an S3 presigned URL workflow. Upon successful upload, a hyperlink is inserted into the document using the same format as `ep_hyperlinked_text`, making the two plugins fully compatible.
+A lightweight Etherpad plugin that adds file upload capability via an S3 presigned URL workflow. Upon successful upload, a hyperlink is inserted into the document using the same format as `ep_hyperlinked_text`. NOTE: this currently REQUIRES ep_hyperlinked_text to work.
 
 ---
 
@@ -217,7 +217,7 @@ This ensures:
 
 - **Etherpad version**: Requires >= 1.8.6 (for ESM Settings module compatibility)
 - **Node.js version**: >= 18.0.0
-- **ep_hyperlinked_text**: Fully compatible – inserted links render/export identically
+- **ep_hyperlinked_text**: **Required** – this plugin uses the `hyperlink` attribute which ep_hyperlinked_text renders as clickable links
 - **Read-only pads**: Upload button automatically hidden
 
 ---

package/index.js

@@ -72,17 +72,26 @@ const _rateLimitCheck = (ip) => {
 /**
  * Validate padId to prevent path traversal and injection attacks.
  * Returns true if valid, false if invalid.
+ * 
+ * Etherpad pad IDs can contain various characters including:
+ * - Alphanumeric, hyphens, underscores
+ * - Dots and colons (common in pad names)
+ * - $ (for group pads, e.g., g.xxxxxxxx$padName)
+ * 
+ * We use a blocklist approach to reject only dangerous patterns.
  */
 const isValidPadId = (padId) => {
   if (!padId || typeof padId !== 'string') return false;
+  if (padId.length === 0 || padId.length > 500) return false; // Reasonable length limits
   // Reject path traversal sequences
   if (padId.includes('..')) return false;
   // Reject null bytes
   if (padId.includes('\0')) return false;
-  // Allow alphanumeric, hyphens, underscores, and $ (for group pads)
-  // This is permissive but still prevents dangerous characters
-  const safePattern = /^[a-zA-Z0-9_\-$]+$/;
-  return safePattern.test(padId);
+  // Reject slashes (forward and back) to prevent path manipulation
+  if (padId.includes('/') || padId.includes('\\')) return false;
+  // Reject control characters (ASCII 0-31)
+  if (/[\x00-\x1f]/.test(padId)) return false;
+  return true;
 };
 
 /**
@@ -330,13 +339,14 @@ exports.expressConfigure = (hookName, context) => {
       // This ensures files download with their original name instead of the UUID
       const originalFilename = path.basename(name);
       const safeFilename = originalFilename.replace(/[^\w\-_.]/g, '_'); // Sanitize for header
+      const contentDisposition = `attachment; filename="${safeFilename}"`;
 
       const putCommand = new PutObjectCommand({
         Bucket: bucket,
         Key: key,
         ContentType: type,
         // Force download instead of opening in browser
-        ContentDisposition: `attachment; filename="${safeFilename}"`,
+        ContentDisposition: contentDisposition,
       });
 
       const signedUrl = await getSignedUrl(s3Client, putCommand, { expiresIn: expires || 600 });
@@ -352,7 +362,14 @@ exports.expressConfigure = (hookName, context) => {
         publicUrl = new url.URL(key, s3Base).toString();
       }
 
-      return res.json({ signedUrl, publicUrl });
+      // Log upload request for audit trail
+      // Note: Never log tokens or session cookies - only non-sensitive identifiers
+      const userId = req.session?.user?.username || req.session?.authorId || 'anonymous';
+      logger.info(`[ep_media_upload] UPLOAD: user="${userId}" pad="${padId}" file="${originalFilename}" s3key="${key}"`);
+
+      // Return contentDisposition so client can include it in the PUT request
+      // (required because it's part of the presigned URL signature)
+      return res.json({ signedUrl, publicUrl, contentDisposition });
     } catch (err) {
       logger.error('[ep_media_upload] S3 presign error', err);
       return res.status(500).json({ error: 'Failed to generate presigned URL' });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep_media_upload",
-  "description": "beta - Upload files to S3 and insert hyperlinks into the pad. Compatible with ep_hyperlinked_text.",
-  "version": "0.1.0",
+  "description": "beta - Upload files to S3 and insert hyperlinks into the pad. Requires ep_hyperlinked_text.",
+  "version": "0.1.1",
   "author": {
     "name": "DCastelone",
     "url": "https://github.com/dcastelone"
@@ -12,7 +12,8 @@
     "@aws-sdk/s3-request-presigner": "^3.555.0"
   },
   "peerDependencies": {
-    "ep_etherpad-lite": ">=1.8.6"
+    "ep_etherpad-lite": ">=1.8.6",
+    "ep_hyperlinked_text": "*"
   },
   "engines": {
     "node": ">=18.0.0"

package/static/css/ep_media_upload.css

@@ -50,28 +50,6 @@
   }
 }
 
-/* Icons */
-.ep-media-upload-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.ep-media-upload-icon-success {
-  background-color: #e6f4ea;
-  color: #1e8e3e;
-}
-
-.ep-media-upload-icon-error {
-  background-color: #fce8e6;
-  color: #d93025;
-}
-
 /* Message text */
 .ep-media-upload-message {
   margin: 0;
@@ -107,9 +85,16 @@
   outline-offset: 2px;
 }
 
-/* Toolbar button icon - paperclip */
-.buttonicon-attachment::before {
-  content: "📎";
-  font-size: 16px;
+/* Toolbar button icon - upload file SVG */
+.buttonicon-attachment {
+  background-image: url('../images/upload-file-svgrepo-com.svg');
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 16px;
+  height: 16px;
 }
 
+.buttonicon-attachment::before {
+  content: "";
+}

package/static/images/upload-file-svgrepo-com.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M21,3H12.236L8.236,1H3C1.346,1,0,2.346,0,4V23H9v-2H2V9H22v12h-7v2h9V6c0-1.654-1.346-3-3-3ZM2,7v-3c0-.552,.449-1,1-1H7.764l4,2h9.236c.551,0,1,.448,1,1v1H2ZM13,15.003v7.997h-2V14.992l-2.291,2.301-1.414-1.414,3.298-3.298c.375-.376,.875-.583,1.406-.583h0c.531,0,1.031,.207,1.406,.584l3.298,3.297-1.414,1.414-2.291-2.29Z"/></svg>

package/static/js/clientHooks.js

@@ -18,19 +18,15 @@ let _aceContext = null;
 const showModal = (state = 'progress') => {
   const modal = $('#mediaUploadModal');
   const progressEl = $('#mediaUploadProgress');
-  const successEl = $('#mediaUploadSuccess');
   const errorEl = $('#mediaUploadError');
 
   // Hide all states
   progressEl.hide();
-  successEl.hide();
   errorEl.hide();
 
   // Show requested state
   if (state === 'progress') {
     progressEl.show();
-  } else if (state === 'success') {
-    successEl.show();
   } else if (state === 'error') {
     errorEl.show();
   }
@@ -43,18 +39,11 @@ const hideModal = () => {
 };
 
 const showError = (message) => {
-  $('.ep-media-upload-error-text').text(message);
+  const errorText = message || 'Upload failed.';
+  $('.ep-media-upload-error-text').text(errorText);
   showModal('error');
 };
 
-const showSuccess = () => {
-  showModal('success');
-  // Auto-hide after 1.5 seconds
-  setTimeout(() => {
-    hideModal();
-  }, 1500);
-};
-
 /**
  * Validate file against configured restrictions
  */
@@ -102,9 +91,15 @@ const uploadToS3 = async (file) => {
   }
 
   // Step 2: Upload directly to S3
+  // Must include Content-Disposition header as it's part of the presigned URL signature
+  const headers = { 'Content-Type': file.type };
+  if (presignResponse.contentDisposition) {
+    headers['Content-Disposition'] = presignResponse.contentDisposition;
+  }
+
   const uploadResponse = await fetch(presignResponse.signedUrl, {
     method: 'PUT',
-    headers: { 'Content-Type': file.type },
+    headers,
     body: file,
   });
 
@@ -172,12 +167,22 @@ const handleFileUpload = async (file, aceContext) => {
       ace.ace_doInsertMediaLink(publicUrl, file.name);
     }, 'insertMediaLink', true);
 
-    // Show success
-    showSuccess();
+    // Hide modal on success (no success message needed)
+    hideModal();
 
   } catch (err) {
     console.error('[ep_media_upload] Upload failed:', err);
-    const errorMsg = html10n.get('ep_media_upload.error.uploadFailed') || 'Upload failed. Please try again.';
+    // Extract error message from various error formats
+    let errorMsg = 'Upload failed.';
+    if (err.responseJSON && err.responseJSON.error) {
+      // jQuery AJAX error with JSON response
+      errorMsg = err.responseJSON.error;
+    } else if (err.message) {
+      // Standard Error object
+      errorMsg = err.message;
+    } else if (typeof err === 'string') {
+      errorMsg = err;
+    }
     showError(errorMsg);
   }
 };

package/templates/uploadModal.ejs

@@ -4,15 +4,9 @@
       <div class="ep-media-upload-spinner"></div>
       <p class="ep-media-upload-message" data-l10n-id="ep_media_upload.status.uploading">Uploading...</p>
     </div>
-    <div id="mediaUploadSuccess" class="ep-media-upload-state" style="display: none;">
-      <div class="ep-media-upload-icon ep-media-upload-icon-success">✓</div>
-      <p class="ep-media-upload-message" data-l10n-id="ep_media_upload.status.success">Upload complete!</p>
-    </div>
     <div id="mediaUploadError" class="ep-media-upload-state" style="display: none;">
-      <div class="ep-media-upload-icon ep-media-upload-icon-error">✕</div>
-      <p class="ep-media-upload-message ep-media-upload-error-text"></p>
+      <p class="ep-media-upload-message ep-media-upload-error-text">Upload failed.</p>
       <button id="mediaUploadErrorClose" class="ep-media-upload-btn" data-l10n-id="ep_media_upload.button.close">Close</button>
     </div>
   </div>
 </div>
-