DEV Community

Cover image for Introducing ChatGPT File Uploader Extended: A Chrome Extension for Easy File Processing (PDF, WORD, EXCEL and ZIP Files!)
ariburaco
ariburaco

Posted on • Originally published at mystickynotes.net

Introducing ChatGPT File Uploader Extended: A Chrome Extension for Easy File Processing (PDF, WORD, EXCEL and ZIP Files!)

Are you tired of manually processing various file types? Look no further! Introducing ChatGPT File Uploader Extended, a powerful open-source Chrome extension developed using React, TypeScript, and Vite. This extension revolutionizes the way you handle files by providing a chatbot-like conversation system for seamless file upload and processing. Whether you're dealing with text files, code snippets, documents, or spreadsheets, ChatGPT File Uploader Extended has got you covered.

Try the Extension

Features

ChatGPT File Uploader Extended offers the following features:

  • Upload and Process Different File Types: With support for various file formats including TXT, JS, PY, HTML, CSS, JSON, CSV, MD, TS, TSX, JSX, PDF, DOC, DOCX, XLS, and XLSX, you can easily upload and process files of different types using this extension.

  • Automatic Text Extraction: Say goodbye to manual extraction! The extension automatically extracts the text content from PDF, Word, and Excel files, saving you valuable time and effort.

  • Chunked Processing: To overcome the limitations of chatbots, ChatGPT File Uploader Extended implements chunked processing for large files. This ensures smooth processing by dividing the file into manageable chunks.

  • Configurable Chunk Size: You have control! The extension allows you to configure the chunk size according to your needs. Adjust the chunk size to optimize the conversation flow and achieve the desired processing speed.

  • Configurable Prompts: You have more control! The extension allows you also to configure each prompt while it is sending the parts.

  • Simulated Conversation Prompts: Enhance the user experience! ChatGPT File Uploader Extended generates conversation prompts based on the file context, simulating a natural chat-like interaction.

  • User-Friendly Interface: The extension provides a user-friendly interface for selecting files and monitoring the upload progress. You can easily track the status of your uploads and stay in control.

  • Supported on Google Chrome: ChatGPT File Uploader Extended is a browser extension designed specifically for Google Chrome, ensuring seamless integration with your browsing experience.

Installation

Follow these simple steps to install the ChatGPT File Uploader Extended Chrome extension:

  1. Clone the repository:
   git clone https://github.com/ariburaco/chatgpt-file-uploader
Enter fullscreen mode Exit fullscreen mode
  1. Navigate to the project directory:
   cd chatgpt-file-uploader
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies:
   pnpm install
Enter fullscreen mode Exit fullscreen mode
  1. Start the development environment:
   pnpm run build:watch
Enter fullscreen mode Exit fullscreen mode

Note: You might need the execute run pnpm run dev for the first time to generate some js files.

  1. Open Google Chrome and go to chrome://extensions.

  2. Enable the "Developer mode" toggle.

  3. Click on the "Load unpacked" button.

  4. Select the dist directory from the project folder.

Congratulations! The File Uploader extension should now be installed and visible in your extensions list.

Usage

Once you have installed the File Uploader extension, you can easily upload and process files using the following steps:

  1. Navigate to chat.openai.com.

  2. You will see the Upload File button below the message box.

  3. Click on the Upload File button.

  4. The File Uploader interface will open in a new tab.

  5. Specify the desired chunk size (number of characters per chunk) to control the conversation flow.

  6. The selected file will be divided into chunks and sent to the chatbot-like conversation system for processing.

  7. The conversation prompts generated based on the file context will be displayed in the chat.

  8. Wait for each chunk to be processed before proceeding to the next one.

  9. Once a chunk is processed, the interface will be cleared, and you can upload another file if needed.

  10. If you want to stop sending the file as a chunk, you need to refresh the page.

Screenshots

https://kzfhtkjarrcmzcrmtkgt.supabase.co/storage/v1/object/public/postimages/6f7e98c0-0283-4fe9-a488-64405915a003_unnamed.jpg

https://kzfhtkjarrcmzcrmtkgt.supabase.co/storage/v1/object/public/postimages/fc014d5b-88e3-44cb-bbbb-72ca59e64fb9_3.jpg

https://kzfhtkjarrcmzcrmtkgt.supabase.co/storage/v1/object/public/postimages/a5f356d8-cc92-41f8-9b41-12c42319310d_asda.png

Configuration

The File Uploader extension provides a configuration option for the chunk size. By default, the chunk size is set to 500 characters. If you want to change the chunk size, follow these steps:

  1. Locate the "Chunk Size" input field.

  2. Enter the desired chunk size value. A range of 10,000 to 15,000 characters is recommended for optimal performance.

Supported File Types

ChatGPT File Uploader Extended supports a wide range of file types for upload and processing, including:

  • TXT: Plain text files
  • JS: JavaScript files
  • PY: Python files
  • HTML: HTML files
  • CSS: CSS files
  • JSON: JSON files
  • CSV: Comma-separated values files
  • MD: Markdown files
  • TS: TypeScript files
  • TSX: TypeScript JSX files
  • JSX: JSX files
  • PDF: PDF files
  • DOC: Microsoft Word documents (DOC format)
  • DOCX: Microsoft Word documents (DOCX format)
  • XLS: Microsoft Excel spreadsheets (XLS format)
  • XLSX: Microsoft Excel spreadsheets (XLSX format)
  • ZIP Files

ZIP Files

You can select a ZIP file that contains multiple text-based files. If the files are like images, or png that cannot be directly read as text, we have introduced a feature to skip those files. basically, we can ignore some kind of extensions or we can specify the names of the files directly in the extension settings as below:

About the Boilerplate

ChatGPT File Uploader Extended is built upon the chrome-extension-boilerplate-react-vite boilerplate, which provides a solid foundation for developing Chrome extensions using React and TypeScript.

Conclusion

ChatGPT File Uploader Extended simplifies the process of uploading and processing files by leveraging the power of React, TypeScript, and Vite. Say goodbye to manual file handling and embrace a more efficient and interactive approach. Give the extension a try and experience the convenience it brings to your file-processing workflows.


If you have any questions or need further assistance, please don't hesitate to reach out to us. Happy file processing with ChatGPT File Uploader Extended!

Please if you have any suggestions, please let me know, and I'll try to implement them. Also, feel free to contact me to contribute the project.

The Project inspired by this youtube video: https://www.youtube.com/watch?v=iR99LO28nzM&t=2s

Last but not least, of course this post is prepared with the help of ChatGPT :)

Top comments (0)