Merge pull request #1 from duck4i/feat/code-merge

Feat/code merge

Author: duck4i

README.md

@@ -0,0 +1,69 @@
+# Folders for Claude.AI
+
+This small extension injects the Folder upload button next to file upload to allow for multiple file uploads at once, while respecting Claude's supported file formats. 
+
+![screenshot](doc/screenshot.png)
+
+## Under the limit
+
+If your folder has up to 5 files, each file would be uploaded as is with no modifications.
+
+## Combined folder contents 
+
+Since Claude has a 5 file upload limit, if your folder contains more files, the folder will be combined into a single file, preserving the directory structure and file names.
+
+For example if your folder looks like this:
+
+```
+.
+└── ClaudeFoldersTest
+    ├── file1.txt
+    ├── file2.txt
+    ├── subfolder
+    │   └── file3.txt
+    ├── subfolder2
+    │   ├── file4.txt
+    │   └── file5.txt
+    └── subfolder3
+        └── file6.txt
+
+5 directories, 6 files
+
+```
+
+The extension will then upload a file named `ClaudeFoldersTest-combined.txt` with contents like this:
+
+```
+[File]: file1.txt
+contents of file 1
+
+[File]: file2.txt
+contents of file 2
+
+[File]: subfolder/file3.txt
+contents of file 3 in subfolder
+
+[File]: subfolder2/file4.txt
+contents of file 4
+
+[File]: subfolder2/file5.txt
+contents of file 5
+
+[File]: subfolder3/file6.txt
+contents of file 6
+```
+
+This is very useful for programming needs as it allows you to combine all your code files into a single file to feed Claude.
+
+## Ignored files 
+
+To include some safety considerations all files that are starting with `.filename` are ignored (.env files for example) and not sent to Claude.
+
+Additionally, in the combined mode where there is more than 5 files, images are uploaded only as <image_content> excluding the file's actual content to keep the context length reasonable.
+
+# Installation 
+
+To install the extension to Chrome:
+* Checkout or download the git repository from the releases.
+* Navigate to `chrome://extensions/` URL.
+* Click `Load unpacked` and point to the downloaded location.

content.js

@@ -1,3 +1,5 @@
+// content.js
+
 function getAcceptedFileTypes() {
     const fileInput = document.querySelector('input[data-testid="file-upload"]');
     if (!fileInput) {
@@ -46,7 +48,7 @@ function injectFolderUploadButton() {
 
     const folderUploadButton = document.createElement('button');
     folderUploadButton.id = 'claude-folder-upload';
-    folderUploadButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-up"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg>';
+    folderUploadButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-up"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg>';
     folderUploadButton.title = 'Upload Folder';
     folderUploadButton.setAttribute('aria-label', 'Upload folder');
 
@@ -96,25 +98,61 @@ function injectFolderUploadButton() {
         }
 
         try {
-            const dataTransfer = new DataTransfer();
-
-            allowedFiles.forEach(file => {
-                try {
-                    dataTransfer.items.add(file);
-                } catch (e) {
-                    console.warn('Failed to add file:', file.name, e);
+            let combinedContent = '';
+            const rootFolderName = allowedFiles[0].webkitRelativePath.split('/')[0];
+
+            if (allowedFiles.length > 5) {
+                // Sort files to maintain folder structure
+                allowedFiles.sort((a, b) => a.webkitRelativePath.localeCompare(b.webkitRelativePath));
+
+                let currentPath = '';
+                for (const file of allowedFiles) {
+                    const relativePath = file.webkitRelativePath.slice(rootFolderName.length + 1);
+                    const folderPath = relativePath.split('/').slice(0, -1).join('/');
+
+                    // Only add folder path if it has changed
+                    if (folderPath !== currentPath) {
+                        currentPath = folderPath;
+                    }
+
+                    // Format the file entry
+                    combinedContent += `[File]: ${currentPath ? `${currentPath}/` : ''}${file.name}\n`;
+
+                    if (file.type.startsWith('image/')) {
+                        combinedContent += '<image_content>\n';
+                    } else {
+                        const content = await file.text();
+                        combinedContent += `${content}\n`;
+                    }
                 }
-            });
 
-            originalInput.files = dataTransfer.files;
-            originalInput.dispatchEvent(new Event('change', { bubbles: true }));
+                const combinedFile = new File([combinedContent.trim()], `${rootFolderName}_combined.txt`, { type: 'text/plain' });
+
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(combinedFile);
+                originalInput.files = dataTransfer.files;
+                originalInput.dispatchEvent(new Event('change', { bubbles: true }));
+
+                showToast(`Successfully combined ${allowedFiles.length} files into one .txt file`);
+            } else {
+                const dataTransfer = new DataTransfer();
+                allowedFiles.forEach(file => {
+                    try {
+                        dataTransfer.items.add(file);
+                    } catch (e) {
+                        console.warn('Failed to add file:', file.name, e);
+                    }
+                });
+
+                originalInput.files = dataTransfer.files;
+                originalInput.dispatchEvent(new Event('change', { bubbles: true }));
+
+                showToast(`Successfully added ${allowedFiles.length} file${allowedFiles.length === 1 ? '' : 's'}`);
+            }
 
-            const fileCount = allowedFiles.length;
-            let message = `Successfully added ${fileCount} file${fileCount === 1 ? '' : 's'} from folder`;
             if (ignoredCount > 0) {
-                message += `. ${ignoredCount} file${ignoredCount === 1 ? '' : 's'} starting with . were ignored for safety.`;
+                showToast(`${ignoredCount} file${ignoredCount === 1 ? '' : 's'} starting with . were ignored for safety.`, 5000);
             }
-            showToast(message);
         } catch (error) {
             console.error('Error processing files:', error);
             showToast('An error occurred while processing the files. Please try again with fewer files.');