Ali Burak Özden

If you’ve ever built a web application using tRPC, you’ve likely encountered the need to cache expensive operations. Whether it’s complex database queries, third-party API calls, or heavy computational tasks, caching is a must-have for efficient and scalable applications. But caching can quickly get complicated—especially when your app grows, and caching needs become more nuanced. This is precisely where our new package, trpc-redis-cache, comes into play.

🚧 The Problem with Manual Caching

Implementing caching manually is often repetitive, error-prone, and can lead to inconsistencies. Manually managing cache keys, invalidations, and handling user-specific caches becomes messy fast. Even a minor mistake can result in stale data, negatively affecting your user experience.

Developers deserve a simple, elegant solution that fits neatly into their existing tRPC ecosystem—without sacrificing flexibility or power.

💡 A Humble Solution: Meet trpc-redis-cache

We built trpc-redis-cache to provide a straightforward yet powerful middleware solution for tRPC procedures. With just a few lines of code, you can integrate Redis caching seamlessly into your tRPC setup. It’s designed to be intuitive, customizable, and reliable.

🔥 Features at a glance:

- Easy Setup: Plug-and-play middleware integration with minimal configuration.
- Flexible Backend: Supports standard Redis instances and serverless solutions like Upstash Redis.
- User-specific and Global Caching: Effortlessly manage caches at a global level or specific to individual users.
- Customizable Keys & TTL: Precisely control cache expiration times and key generation logic.
- Built-in Logging & Debugging: Easily track cache hits, misses, and performance.
- Simple Cache Invalidation: Quickly invalidate cache entries when your underlying data changes.

🚀 Getting Started is Effortless

Installation couldn’t be simpler:

```bash
pnpm add trpc-redis-cache
# or
npm install trpc-redis-cache
# or
yarn add trpc-redis-cache
```

Then add it to your tRPC procedure:

```ts
import { createCacheMiddleware } from 'trpc-redis-cache';

// Create cache middleware with default options
const cacheMiddleware = createCacheMiddleware();

const appRouter = createTRPCRouter({
  getUser: protectedProcedure
    .input(z.object({ id: z.string() }))
    .use(cacheMiddleware)
    .query(async ({ input }) => {
      // This operation will now be cached automatically!
      return await getUserById(input.id);
    }),
});
```

⚙️ Advanced Customization: A Flexible Approach

For more advanced use cases, trpc-redis-cache empowers you with granular control:

- Permanent Global Cache:


```ts
const globalCacheMiddleware = createCacheMiddleware({
  ttl: undefined, // never expires
  useUpstash: true,
  globalCache: true,
  userSpecific: false,
  debug: true,
});
```

- User-Specific Cache with Expiration:


```ts
const userCacheMiddleware = createCacheMiddleware({
  ttl: 3600, // 1 hour
  useUpstash: true,
  userSpecific: true,
  debug: process.env.NODE_ENV === 'development',
});
```


This combination of simplicity and flexibility makes trpc-redis-cache adaptable to virtually any application scenario.

🎉 Why You Should Give it a Try

Caching can significantly improve your application’s performance, reduce latency, and enhance scalability. With trpc-redis-cache, you can do all this effortlessly, without sacrificing developer productivity or code quality. It’s designed with simplicity, clarity, and elegance at its core—enabling you to spend less time worrying about cache management and more time focusing on building great user experiences.

Feel free to explore, contribute, or share your feedback on GitHub!

👉 Explore the package on [GitHub](https://github.com/ariburaco/trpc-redis-cache)

Happy caching! 🚀


If you’ve ever built a web application using tRPC, you’ve likely encountered the need to cache expensive operations. Whether it’s complex database queries, thir...

Introducing trpc-redis-cache: Simple and Powerful Caching for Your tRPC Procedures


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](https://chrome.google.com/webstore/detail/chatgpt-file-uploader-ext/becfinhbfclcgokjlobojlnldbfillpf?hl=en-GB)**

## 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
   ```

2. Navigate to the project directory:
   ```
   cd chatgpt-file-uploader
   ```

3. Install dependencies:
   ```
   pnpm install
   ```

4. Start the development environment:
   ```
   pnpm run build:watch
   ```
*Note: You might need the execute `run pnpm run dev` for the first time to generate some js files.*


5. Open Google Chrome and go to `chrome://extensions`.

6. Enable the "Developer mode" toggle.

7. Click on the "Load unpacked" button.

8. 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](https://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/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/fc014d5b-88e3-44cb-bbbb-72ca59e64fb9_3.jpg)

![https://kzfhtkjarrcmzcrmtkgt.supabase.co/storage/v1/object/public/postimages/a5f356d8-cc92-41f8-9b41-12c42319310d_asda.png](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](https://github.com/Jonghakseo/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](https://github.com/ariburaco/chatgpt-file-uploader-extended).

*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 :) 

Are you tired of manually processing various file types? Look no further! Introducing ChatGPT File Uploader Extended, a powerful open-source Chrome extension de...

Featured Post

Introducing trpc-redis-cache: Simple and Powerful Caching for Your tRPC Procedures

Introducing trpc-redis-cache: Simple and Powerful Caching for Your tRPC Procedures

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

Hot Topics