n8n-nodes-binary-to-url 0.0.1 → 0.0.2

package/dist/drivers/S3Storage.js

@@ -1,86 +1,194 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S3Storage = void 0;
-const client_s3_1 = require("@aws-sdk/client-s3");
-const stream_1 = require("stream");
 class S3Storage {
     constructor(config) {
-        this.s3Client = new client_s3_1.S3Client({
-            region: config.region,
-            credentials: {
-                accessKeyId: config.accessKeyId,
-                secretAccessKey: config.secretAccessKey,
-            },
-            endpoint: config.endpoint,
-            forcePathStyle: config.forcePathStyle ?? false,
-        });
-        this.bucket = config.bucket;
-    }
-    async uploadStream(stream, contentType, metadata) {
+        this.config = config;
+    }
+    async uploadStream(data, contentType, metadata) {
         const fileKey = this.generateFileKey(contentType);
+        const endpoint = this.getEndpoint();
+        const url = `${endpoint}/${this.config.bucket}/${fileKey}`;
+        const headers = {
+            'Content-Type': contentType,
+            'x-amz-content-sha256': 'UNSIGNED-PAYLOAD',
+        };
+        if (metadata) {
+            Object.entries(metadata).forEach(([key, value]) => {
+                headers[`x-amz-meta-${key}`] = value;
+            });
+        }
+        const authorization = await this.generateAuthorization('PUT', `/${this.config.bucket}/${fileKey}`, headers);
         try {
-            const command = new client_s3_1.PutObjectCommand({
-                Bucket: this.bucket,
-                Key: fileKey,
-                Body: stream,
-                ContentType: contentType,
-                Metadata: metadata || {},
+            const response = await fetch(url, {
+                method: 'PUT',
+                headers: {
+                    ...headers,
+                    Authorization: authorization,
+                },
+                body: data,
             });
-            await this.s3Client.send(command);
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`S3 upload failed: ${response.status} ${response.statusText} - ${errorText}`);
+            }
             return {
                 fileKey,
                 contentType,
             };
         }
         catch (error) {
-            if (error instanceof client_s3_1.S3ServiceException) {
-                if (error.name === 'NoSuchBucket') {
-                    throw new Error(`S3 bucket "${this.bucket}" does not exist or is not accessible`);
-                }
-                if (error.name === 'AccessDenied') {
-                    throw new Error(`Access denied to S3 bucket "${this.bucket}". Check your credentials and bucket permissions`);
-                }
-                throw new Error(`S3 upload failed: ${error.message}`);
+            if (error instanceof Error) {
+                throw error;
             }
-            throw error;
+            throw new Error(`S3 upload failed: ${String(error)}`);
         }
     }
     async downloadStream(fileKey) {
+        const endpoint = this.getEndpoint();
+        const url = `${endpoint}/${this.config.bucket}/${fileKey}`;
+        const authorization = await this.generateAuthorization('GET', `/${this.config.bucket}/${fileKey}`, {});
         try {
-            const command = new client_s3_1.GetObjectCommand({
-                Bucket: this.bucket,
-                Key: fileKey,
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    Authorization: authorization,
+                },
             });
-            const response = await this.s3Client.send(command);
-            if (!response.Body) {
-                throw new Error(`File not found: ${fileKey}`);
+            if (!response.ok) {
+                if (response.status === 404) {
+                    throw new Error(`File not found: ${fileKey}`);
+                }
+                if (response.status === 403) {
+                    throw new Error(`Access denied to bucket "${this.config.bucket}". Check your credentials`);
+                }
+                throw new Error(`S3 download failed: ${response.status} ${response.statusText}`);
             }
-            const body = response.Body;
-            const stream = body instanceof stream_1.Readable ? body : stream_1.Readable.from(response.Body);
+            const contentType = response.headers.get('content-type') || 'application/octet-stream';
+            const arrayBuffer = await response.arrayBuffer();
+            const data = Buffer.from(arrayBuffer);
             return {
-                stream,
-                contentType: response.ContentType || 'application/octet-stream',
+                data,
+                contentType,
             };
         }
         catch (error) {
-            if (error instanceof client_s3_1.S3ServiceException) {
-                if (error.name === 'NoSuchKey' || error.name === 'NotFound') {
-                    throw new Error(`File not found: ${fileKey}`);
-                }
-                if (error.name === 'AccessDenied') {
-                    throw new Error(`Access denied to S3 bucket "${this.bucket}". Check your credentials and bucket permissions`);
-                }
-                throw new Error(`S3 download failed: ${error.message}`);
+            if (error instanceof Error) {
+                throw error;
             }
-            throw error;
+            throw new Error(`S3 download failed: ${String(error)}`);
         }
     }
     async deleteFile(fileKey) {
-        const command = new client_s3_1.DeleteObjectCommand({
-            Bucket: this.bucket,
-            Key: fileKey,
-        });
-        await this.s3Client.send(command);
+        const endpoint = this.getEndpoint();
+        const url = `${endpoint}/${this.config.bucket}/${fileKey}`;
+        const authorization = await this.generateAuthorization('DELETE', `/${this.config.bucket}/${fileKey}`, {});
+        try {
+            const response = await fetch(url, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: authorization,
+                },
+            });
+            if (!response.ok && response.status !== 204) {
+                throw new Error(`S3 delete failed: ${response.status} ${response.statusText}`);
+            }
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                throw error;
+            }
+            throw new Error(`S3 delete failed: ${String(error)}`);
+        }
+    }
+    getEndpoint() {
+        if (this.config.endpoint) {
+            return this.config.endpoint;
+        }
+        if (this.config.forcePathStyle) {
+            return `https://s3.${this.config.region}.amazonaws.com`;
+        }
+        return `https://${this.config.bucket}.s3.${this.config.region}.amazonaws.com`;
+    }
+    async generateAuthorization(method, path, headers) {
+        const now = new Date();
+        const amzDate = this.getAmzDate(now);
+        const dateStamp = this.getDateStamp(now);
+        // Canonical request
+        const canonicalHeaders = this.getCanonicalHeaders(headers);
+        const signedHeaders = this.getSignedHeaders(headers);
+        const payloadHash = 'UNSIGNED-PAYLOAD';
+        const canonicalRequest = [
+            method,
+            path,
+            '', // Query string
+            canonicalHeaders,
+            signedHeaders,
+            payloadHash,
+        ].join('\n');
+        const canonicalRequestHash = await this.sha256(canonicalRequest);
+        // String to sign
+        const credentialScope = `${dateStamp}/${this.config.region}/s3/aws4_request`;
+        const stringToSign = ['AWS4-HMAC-SHA256', amzDate, credentialScope, canonicalRequestHash].join('\n');
+        // Calculate signature
+        const signingKey = await this.getSigningKey(dateStamp);
+        const signature = await this.hmac(signingKey, stringToSign);
+        // Authorization header
+        return `AWS4-HMAC-SHA256 Credential=${this.config.accessKeyId}/${credentialScope}, SignedHeaders=${signedHeaders}, Signature=${signature}`;
+    }
+    getAmzDate(date) {
+        return date
+            .toISOString()
+            .replace(/[:-]|.\d{3}/g, '')
+            .replace(/T/, 'T');
+    }
+    getDateStamp(date) {
+        return date.toISOString().substring(0, 10).replace(/-/g, '');
+    }
+    getCanonicalHeaders(headers) {
+        const canonicalHeaders = [];
+        const lowerCaseHeaders = {};
+        for (const [key, value] of Object.entries(headers)) {
+            lowerCaseHeaders[key.toLowerCase()] = value.trim();
+        }
+        for (const [key, value] of Object.entries(lowerCaseHeaders).sort()) {
+            canonicalHeaders.push(`${key}:${value}\n`);
+        }
+        return canonicalHeaders.join('');
+    }
+    getSignedHeaders(headers) {
+        const lowerCaseHeaders = Object.keys(headers).map((h) => h.toLowerCase());
+        return lowerCaseHeaders.sort().join(';');
+    }
+    async sha256(message) {
+        const encoder = new TextEncoder();
+        const data = encoder.encode(message);
+        const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+    }
+    async hmac(key, message) {
+        const cryptoKey = await crypto.subtle.importKey('raw', key, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
+        const encoder = new TextEncoder();
+        const data = encoder.encode(message);
+        const signature = await crypto.subtle.sign('HMAC', cryptoKey, data);
+        const signatureArray = Array.from(new Uint8Array(signature));
+        return signatureArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+    }
+    async getSigningKey(dateStamp) {
+        const kDate = await this.hmacSha256(`AWS4${this.config.secretAccessKey}`, dateStamp);
+        const kRegion = await this.hmacSha256(kDate, this.config.region);
+        const kService = await this.hmacSha256(kRegion, 's3');
+        const kSigning = await this.hmacSha256(kService, 'aws4_request');
+        return kSigning;
+    }
+    async hmacSha256(key, message) {
+        const keyBuffer = typeof key === 'string' ? Buffer.from(key) : key;
+        const encoder = new TextEncoder();
+        const data = encoder.encode(message);
+        const cryptoKey = await crypto.subtle.importKey('raw', keyBuffer, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
+        const signature = await crypto.subtle.sign('HMAC', cryptoKey, data);
+        return Buffer.from(signature);
     }
     generateFileKey(contentType) {
         const ext = this.getExtensionFromMimeType(contentType);

package/dist/drivers/index.d.ts

@@ -1,15 +1,13 @@
 import { IExecuteFunctions, IWebhookFunctions } from 'n8n-workflow';
 export { S3Storage } from './S3Storage';
 export type { StorageConfig as S3StorageConfig } from './S3Storage';
-export { SupabaseStorage } from './SupabaseStorage';
-export type { SupabaseConfig } from './SupabaseStorage';
 export interface StorageDriver {
-    uploadStream(stream: any, contentType: string, metadata?: Record<string, string>): Promise<{
+    uploadStream(data: Buffer, contentType: string, metadata?: Record<string, string>): Promise<{
         fileKey: string;
         contentType: string;
     }>;
     downloadStream(fileKey: string): Promise<{
-        stream: any;
+        data: Buffer;
         contentType: string;
     }>;
     deleteFile(fileKey: string): Promise<void>;

package/dist/drivers/index.js

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SupabaseStorage = exports.S3Storage = void 0;
+exports.S3Storage = void 0;
 exports.createStorageDriver = createStorageDriver;
 const S3Storage_1 = require("./S3Storage");
-const SupabaseStorage_1 = require("./SupabaseStorage");
 var S3Storage_2 = require("./S3Storage");
 Object.defineProperty(exports, "S3Storage", { enumerable: true, get: function () { return S3Storage_2.S3Storage; } });
-var SupabaseStorage_2 = require("./SupabaseStorage");
-Object.defineProperty(exports, "SupabaseStorage", { enumerable: true, get: function () { return SupabaseStorage_2.SupabaseStorage; } });
 async function createStorageDriver(context, storageDriver, bucket) {
     if (storageDriver === 's3') {
         const credentials = await context.getCredentials('awsS3Api');
@@ -27,18 +24,5 @@ async function createStorageDriver(context, storageDriver, bucket) {
         };
         return new S3Storage_1.S3Storage(config);
     }
-    else if (storageDriver === 'supabase') {
-        const credentials = await context.getCredentials('supabaseApi');
-        if (!credentials) {
-            throw new Error('Supabase credentials are required');
-        }
-        const projectUrl = context.getNodeParameter('projectUrl', 0);
-        const config = {
-            projectUrl,
-            apiKey: credentials.apiKey,
-            bucket,
-        };
-        return new SupabaseStorage_1.SupabaseStorage(config);
-    }
     throw new Error(`Unknown storage driver: ${storageDriver}`);
 }

package/dist/nodes/BinaryBridge/BinaryBridge.node.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BinaryBridge = void 0;
 const n8n_workflow_1 = require("n8n-workflow");
-const stream_1 = require("stream");
 const drivers_1 = require("../../drivers");
-const file_type_1 = require("file-type");
 const MAX_FILE_SIZE = 100 * 1024 * 1024;
 const ALLOWED_MIME_TYPES = [
     'image/jpeg',
@@ -44,7 +42,7 @@ class BinaryBridge {
             group: ['transform'],
             version: 1,
             subtitle: '={{$parameter["operation"]}}',
-            description: 'Upload binary files to storage and proxy them via public URL',
+            description: 'Upload binary files to S3 storage and proxy them via public URL',
             defaults: {
                 name: 'Binary Bridge',
             },
@@ -56,11 +54,6 @@ class BinaryBridge {
                     displayName: 'AWS S3 Credentials',
                     required: true,
                 },
-                {
-                    name: 'supabaseApi',
-                    displayName: 'Supabase Credentials',
-                    required: true,
-                },
             ],
             webhooks: [
                 {
@@ -83,11 +76,6 @@ class BinaryBridge {
                             value: 's3',
                             description: 'Use AWS S3 or S3-compatible storage (Alibaba OSS, Tencent COS, MinIO, etc.)',
                         },
-                        {
-                            name: 'Supabase',
-                            value: 'supabase',
-                            description: 'Use Supabase Storage',
-                        },
                     ],
                     default: 's3',
                 },
@@ -181,20 +169,6 @@ class BinaryBridge {
                     },
                     description: 'Use path-style addressing (for MinIO, DigitalOcean Spaces, etc.)',
                 },
-                {
-                    displayName: 'Project URL',
-                    name: 'projectUrl',
-                    type: 'string',
-                    default: '',
-                    required: true,
-                    displayOptions: {
-                        show: {
-                            storageDriver: ['supabase'],
-                        },
-                    },
-                    placeholder: 'https://your-project.supabase.co',
-                    description: 'Supabase project URL',
-                },
             ],
         };
     }
@@ -217,7 +191,6 @@ class BinaryBridge {
             throw new n8n_workflow_1.NodeOperationError(this.getNode(), `Unknown operation: ${operation}`);
         }
         catch (error) {
-            // Enhance error messages with context
             if (error instanceof Error) {
                 throw new n8n_workflow_1.NodeOperationError(this.getNode(), `Operation failed: ${error.message}`);
             }
@@ -278,11 +251,11 @@ class BinaryBridge {
             };
         }
         try {
-            const { stream, contentType } = await storage.downloadStream(fileKey);
+            const { data, contentType } = await storage.downloadStream(fileKey);
             return {
                 webhookResponse: {
                     status: 200,
-                    body: stream,
+                    body: data.toString('base64'),
                     headers: {
                         'Content-Type': contentType,
                         'Cache-Control': 'public, max-age=86400',
@@ -315,18 +288,8 @@ async function handleUpload(context, items, storage) {
             throw new n8n_workflow_1.NodeOperationError(context.getNode(), `No binary data found in property "${binaryPropertyName}"`);
         }
         const buffer = Buffer.from(binaryData.data, 'base64');
-        // Try to detect MIME type from file signature using file-type
-        let contentType = binaryData.mimeType || 'application/octet-stream';
-        try {
-            const detection = await (0, file_type_1.fileTypeFromBuffer)(buffer);
-            if (detection) {
-                contentType = detection.mime;
-            }
-        }
-        catch (error) {
-            // Fall back to provided MIME type or default
-            console.warn(`Failed to detect MIME type: ${error instanceof Error ? error.message : String(error)}`);
-        }
+        // Use provided MIME type or default
+        const contentType = binaryData.mimeType || 'application/octet-stream';
         if (!ALLOWED_MIME_TYPES.includes(contentType)) {
             throw new n8n_workflow_1.NodeOperationError(context.getNode(), `MIME type "${contentType}" is not allowed. Allowed types: ${ALLOWED_MIME_TYPES.join(', ')}`);
         }
@@ -334,8 +297,7 @@ async function handleUpload(context, items, storage) {
         if (fileSize > MAX_FILE_SIZE) {
             throw new n8n_workflow_1.NodeOperationError(context.getNode(), `File size exceeds maximum limit of ${MAX_FILE_SIZE / 1024 / 1024}MB`);
         }
-        const uploadStream = stream_1.Readable.from(buffer);
-        const result = await storage.uploadStream(uploadStream, contentType);
+        const result = await storage.uploadStream(buffer, contentType);
         const proxyUrl = `${webhookBaseUrl}/${result.fileKey}`;
         returnData.push({
             json: {

package/dist/nodes/BinaryBridge/BinaryBridge.node.ts

@@ -7,9 +7,7 @@ import {
   INodeExecutionData,
   NodeOperationError,
 } from 'n8n-workflow';
-import { Readable } from 'stream';
 import { createStorageDriver, StorageDriver } from '../../drivers';
-import { fileTypeFromBuffer } from 'file-type';
 
 const MAX_FILE_SIZE = 100 * 1024 * 1024;
 const ALLOWED_MIME_TYPES = [
@@ -50,7 +48,7 @@ export class BinaryBridge implements INodeType {
     group: ['transform'],
     version: 1,
     subtitle: '={{$parameter["operation"]}}',
-    description: 'Upload binary files to storage and proxy them via public URL',
+    description: 'Upload binary files to S3 storage and proxy them via public URL',
     defaults: {
       name: 'Binary Bridge',
     },
@@ -62,11 +60,6 @@ export class BinaryBridge implements INodeType {
         displayName: 'AWS S3 Credentials',
         required: true,
       },
-      {
-        name: 'supabaseApi',
-        displayName: 'Supabase Credentials',
-        required: true,
-      },
     ],
     webhooks: [
       {
@@ -90,11 +83,6 @@ export class BinaryBridge implements INodeType {
             description:
               'Use AWS S3 or S3-compatible storage (Alibaba OSS, Tencent COS, MinIO, etc.)',
           },
-          {
-            name: 'Supabase',
-            value: 'supabase',
-            description: 'Use Supabase Storage',
-          },
         ],
         default: 's3',
       },
@@ -189,20 +177,6 @@ export class BinaryBridge implements INodeType {
         },
         description: 'Use path-style addressing (for MinIO, DigitalOcean Spaces, etc.)',
       },
-      {
-        displayName: 'Project URL',
-        name: 'projectUrl',
-        type: 'string',
-        default: '',
-        required: true,
-        displayOptions: {
-          show: {
-            storageDriver: ['supabase'],
-          },
-        },
-        placeholder: 'https://your-project.supabase.co',
-        description: 'Supabase project URL',
-      },
     ],
   };
 
@@ -227,7 +201,6 @@ export class BinaryBridge implements INodeType {
 
       throw new NodeOperationError(this.getNode(), `Unknown operation: ${operation}`);
     } catch (error) {
-      // Enhance error messages with context
       if (error instanceof Error) {
         throw new NodeOperationError(this.getNode(), `Operation failed: ${error.message}`);
       }
@@ -294,12 +267,12 @@ export class BinaryBridge implements INodeType {
     }
 
     try {
-      const { stream, contentType } = await storage.downloadStream(fileKey);
+      const { data, contentType } = await storage.downloadStream(fileKey);
 
       return {
         webhookResponse: {
           status: 200,
-          body: stream,
+          body: data.toString('base64'),
           headers: {
             'Content-Type': contentType,
             'Cache-Control': 'public, max-age=86400',
@@ -343,19 +316,8 @@ async function handleUpload(
 
     const buffer = Buffer.from(binaryData.data, 'base64');
 
-    // Try to detect MIME type from file signature using file-type
-    let contentType = binaryData.mimeType || 'application/octet-stream';
-    try {
-      const detection = await fileTypeFromBuffer(buffer);
-      if (detection) {
-        contentType = detection.mime;
-      }
-    } catch (error) {
-      // Fall back to provided MIME type or default
-      console.warn(
-        `Failed to detect MIME type: ${error instanceof Error ? error.message : String(error)}`
-      );
-    }
+    // Use provided MIME type or default
+    const contentType = binaryData.mimeType || 'application/octet-stream';
 
     if (!ALLOWED_MIME_TYPES.includes(contentType)) {
       throw new NodeOperationError(
@@ -372,9 +334,7 @@ async function handleUpload(
       );
     }
 
-    const uploadStream = Readable.from(buffer);
-
-    const result = await storage.uploadStream(uploadStream, contentType);
+    const result = await storage.uploadStream(buffer, contentType);
 
     const proxyUrl = `${webhookBaseUrl}/${result.fileKey}`;
 

package/dist/nodes/BinaryBridge/BinaryBridge.svg

@@ -1,5 +1,97 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-  <polyline points="17 8 12 3 7 8" />
-  <line x1="12" y1="3" x2="12" y2="15" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <defs>
+    <!-- Gradient for the cloud -->
+    <linearGradient id="cloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
+    </linearGradient>
+
+    <!-- Gradient for the file -->
+    <linearGradient id="fileGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#60A5FA;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:1" />
+    </linearGradient>
+
+    <!-- Gradient for the bridge/connection -->
+    <linearGradient id="bridgeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#34D399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10B981;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background circle with subtle gradient -->
+  <circle cx="32" cy="32" r="30" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="2"/>
+
+  <!-- Cloud Storage Icon -->
+  <g transform="translate(16, 12)">
+    <!-- Cloud shape -->
+    <path d="M6 14
+             C2 14 0 12 0 9
+             C0 6 2 4 5 4
+             C5.5 1.5 8 0 11 0
+             C14.5 0 17.5 2 18.5 5
+             C21 5 23 7 23 9.5
+             C23 12 21 14 18 14
+             Z"
+          fill="url(#cloudGradient)"
+          opacity="0.9"/>
+
+    <!-- S3/Storage lines -->
+    <path d="M4 9 C4 9 8 11 11.5 11 C15 11 19 9 19 9"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          opacity="0.6"/>
+    <path d="M4 11 C4 11 8 13 11.5 13 C15 13 19 11 19 11"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          opacity="0.6"/>
+  </g>
+
+  <!-- Binary File Icon -->
+  <g transform="translate(22, 26)">
+    <!-- File background -->
+    <rect x="0" y="0" width="20" height="26" rx="2" fill="url(#fileGradient)"/>
+
+    <!-- File corner fold -->
+    <path d="M14 0 L20 6 L14 6 Z" fill="#2563EB" opacity="0.5"/>
+
+    <!-- Binary code representation -->
+    <g fill="white" opacity="0.9">
+      <rect x="4" y="10" width="2" height="2" rx="0.5"/>
+      <rect x="8" y="10" width="2" height="2" rx="0.5"/>
+      <rect x="4" y="14" width="2" height="2" rx="0.5"/>
+      <rect x="8" y="14" width="2" height="2" rx="0.5"/>
+      <rect x="10" y="10" width="2" height="2" rx="0.5"/>
+      <rect x="14" y="10" width="2" height="2" rx="0.5"/>
+      <rect x="10" y="14" width="2" height="2" rx="0.5"/>
+      <rect x="14" y="14" width="2" height="2" rx="0.5"/>
+
+      <!-- Bottom row -->
+      <rect x="4" y="18" width="12" height="2" rx="1"/>
+    </g>
+  </g>
+
+  <!-- Connection/Bridge arrows -->
+  <g transform="translate(6, 38)">
+    <!-- Arrow pointing up (upload) -->
+    <path d="M8 12 L8 4 M4 8 L8 4 L12 8"
+          stroke="url(#bridgeGradient)"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"/>
+
+    <!-- Arrow pointing down (download) -->
+    <path d="M20 4 L20 12 M16 8 L20 12 L24 8"
+          stroke="url(#bridgeGradient)"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"/>
+
+    <!-- Connection dots -->
+    <circle cx="14" cy="8" r="2" fill="#10B981" opacity="0.6"/>
+  </g>
 </svg>