Ali Burak Özden


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...

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


## Introduction

Welcome to our article on optimizing your Next.js app's performance through the use of getServerSideProps and getStaticProps. As a big NextJS fan, I want to show how can we get the best results using NextJS's power.

In this article, we will delve into the details of these two methods and show you how to use them effectively to fetch data in the most efficient way possible. Whether you're a seasoned Next.js developer or just getting started, this article will provide you with the knowledge you need to take your app's performance to the next level. So, let's get started and see how we can use these powerful tools to improve the speed and functionality of your Next.js app.

## The importance of optimizing the Next.js app's performance

When it comes to building web applications, performance is key. Nobody wants to use a slow and clunky app, and in today's fast-paced world, people expect websites to load quickly and smoothly. This is especially true when it comes to Next.js, a popular framework for building React apps. With Next.js, you can build powerful and efficient web apps, but it's important to take the time to optimize your app's performance to ensure that it runs at its best.

## What is the meaning of Optimization

Optimizing your Next.js app's performance can mean the difference between a successful app and one that falls short. It can also mean the difference between a good user experience and a frustrating one. And let's not forget about SEO, search engines like Google will also reward the fast and optimized websites with better ranking which will bring more traffic to your website.
If you're working with Next.js, you might have heard of this fancy feature called incremental static regeneration. Basically, it's a way for Next.js to optimize the performance of your web app by only regenerating the parts that have changed, instead of the whole thing every time. Sounds pretty cool, right?

Let's break down getServerSideProps and getStaticProps, and how they can help you optimize your Next.js app's performance.

##  Understanding getServerSideProps

getServerSideProps is a method that lets you fetch data on the server-side during the initial request. This is perfect for situations where the data being fetched is specific to the user, or when the data is dynamic and changes often.

Here's a simple example of how you might use getServerSideProps to fetch a user's profile information:

```js
export async function getServerSideProps(context) {
  // Fetch user's profile information
  const res = await fetch(`https://my-api.com/users/${context.params.userId}`);
  const user = await res.json();

  // Pass user data to the page component
  return { props: { user } }
}
```

##  Understanding getStaticProps

On the other hand, getStaticProps is a method that lets you fetch data at build time, and the data is then stored as a JSON file. This is perfect for situations where the data being fetched is static, and doesn't change often.

Here's an example of how you might use getStaticProps to fetch a list of blog posts:

```js
export async function getStaticProps() {
   const slug = context.params?.slug as string;

    const blogPosts = await client.getEntries({
      'fields.slug[in]': slug,
    });

    const blogPost = blogPosts.items[0].fields as IBlogPostFields;

    return {
      props: {
        blogPost,
      },
    };
}
```

To be able to use getStaticProbs, we need to specify all the paths of pages that we want to create statically. So, with getStaticPaths function we are defining all the paths.

```js
export async function getStaticPaths(){
  const allPosts = await client.getEntries();

  const paths = allPosts.items.map((post) => {
    return {
      params: { slug: post.slug },
    };
  });

  return {
    paths,
    fallback: 'blocking',
  };
}
```
## The differences between getServerSideProps and getStaticProps

So, the main difference between getServerSideProps and getStaticProps is that the former is executed on the server-side during the initial request and the latter is executed during the build time.

It's important to keep in mind that, getStaticProps is only called at build time, whereas getServerSideProps is called on each request, so it's better to use it for dynamic data, and use getStaticProps for static data, this way you can get the best performance out of your Next.js app.

### Improving the getStaticProps with On Deman Revalidation

One way you can take advantage of this is by using on-demand revalidation. It's a fancy way of saying that you can selectively revalidate certain parts of your app, without having to regenerate the whole thing. You can do this using the getStaticProps and getServerSideProps methods, which let you specify which data needs to be revalidated.

So, we said that static pages are only generated when the build time. But what if we want to serve these pages dynamically and frequently? NextJS 

There is a great feature for revalidating static page content using the NextJS API directory. Here is the official example from NextJS:

```js
// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    // this should be the actual path not a rewritten path
    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}
```
I found the best way of revalidating the posts for Contentful Headless CMS is creating a webhook while creating, publishing, and updating. With this way, we can trigger the revalidating functionality in the background.

## In Conclusion

Optimizing the performance of your Next.js app is crucial for building a successful and efficient web application. By using features like getServerSideProps and getStaticProps, you can improve the speed and performance of your app, and make sure that it's running at its best. Remember that performance is not only important for user experience but also for SEO, faster website means better ranking and more traffic. By following the best practices outlined in this article, you can take your Next.js app to the next level and ensure that it's running at its peak performance.

_Note: This article prepared with help of ChatGPT_

## Resources
[getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)

[getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)

[getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths)

[Incremental Data Fetching](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#using-on-demand-revalidation)




Introduction
Welcome to our article on optimizing your Next.js app's performance through the use of getServerSideProps and getStaticProps. As a big NextJS fan,...

Optimizing Next.js App Performance for Speed and SEO


## About Nodemailer

[Nodemailer](https://www.npmjs.com/package/nodemailer) is a popular library for sending emails in Node.js. It allows you to send emails using various transport methods, such as SMTP, AWS SES, and more. In this post, we will be using Nodemailer with TypeScript to send emails from a Next.js application.

Before diving into the code example, let's go over some key concepts of Nodemailer. Nodemailer is a module for Node.js applications to send emails. It supports various transport methods such as SMTP, AWS SES, and more. With Nodemailer, you can send plaintext or HTML emails, attachments, and more.

## Use Cases for Nodemailer

Nodemailer is a versatile library that can be used in a variety of different use cases. Some common use cases include:

- Sending confirmation emails: When a user signs up for a service or makes a purchase, a confirmation email can be sent to their email address to confirm the action.

- Sending password reset emails: When a user forgets their password, a password reset link can be sent to their email address to allow them to reset their password.

- Sending notifications: Applications can send notifications to users via email, such as updates on their account or new features that have been added.

- Sending marketing emails: Applications can send marketing emails to users, such as newsletters or promotional offers.

- Sending bulk emails: Applications can send bulk emails to a large number of users at once, such as in the case of a mass mailing campaign.

- Sending automated emails: Applications can send automated emails in response to certain events or actions, such as when a user's account is about to expire.

- Send HTML email Templates: Applications can use Nodemailer to send HTML email Templates, which can be designed and customized to match the look and feel of the application.

- Sending emails with attachments: Applications can use Nodemailer to send emails with attachments, such as invoices, receipts, or other files.

These are just a few examples of the many use cases for Nodemailer, it is a very flexible library that can be used in many different ways to meet the needs of your application.

In this post, we'll be using the SMTP transport method to send emails using a Gmail account. We will be using TypeScript to write our code, which adds type safety and improved code organization to our application.

Now that we understand the basics of Nodemailer and TypeScript, let's take a look at the code example.

## Implementation of Emailer Class

The code below shows an implementation of the Nodemailer library in TypeScript. The Emailer class is used to send emails using a Gmail account. It uses the `nodemailer.createTransport()` method to create a transporter object, which is used to send emails.

```js

import * as nodemailer from "nodemailer";
import { MailOptions } from "nodemailer/lib/json-transport";

export class Emailer {
  private readonly transporter: nodemailer.Transporter;

  constructor() {
    this.transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.GMAIL_USER,
        pass: process.env.GMAIL_PASSWORD,
      },
    });
  }

  public sendEmail(mailOptions: MailOptions) {
    return this.transporter.sendMail(mailOptions);
  }

  public notifyAdminForNewUser(email: string, username: string) {
    this.sendEmail(notifyAdminNewUserEmailTemplate(email, username));
  }

  public notifyUserForSignup(email: string, username: string) {
    this.sendEmail(newUserEmailTemplate(email, username));
  }
}

export const emailer = new Emailer();

export const newUserEmailTemplate = (email: string, username: string) => {
  return {
    from: process.env.GMAIL_USER,
    to: email,
    subject: `${username}, Welcome to the our website`,
    text: "Welcome to the our website",
    html: `
      <h1>Welcome to our website!</h1>
      <p>We're glad you've decided to join us. We hope you find everything you're looking for here and enjoy using our site.</p>
      <p>If you have any questions or need any help, please don't hesitate to contact us. Thank you for signing up!</p>
    `,
  } as MailOptions;
};

export const notifyAdminNewUserEmailTemplate = (
  email: string,
  username: string
) => {
  return {
    from: process.env.GMAIL_USER,
    to: process.env.GMAIL_USER,
    subject: `New User: ${username} - email: ${email}`,
    text: `New User: ${username} - email: ${email}`,
    html: `
      <h1>New User: ${username}</h1>
      <p>email: ${email}</p>
    `,
  } as MailOptions;
};

```

The class has two methods, `notifyAdminForNewUser` and `notifyUserForSignup`, which use the `sendEmail` method to send emails to the new user and the admin, respectively. The `sendEmail` method takes in a mailOptions object, which contains the recipient's email, subject, and the message.

The `newUserEmailTemplate` and `notifyAdminNewUserEmailTemplate` functions are used to create the `mailOptions` object for the new user and admin emails, respectively. They take in the user's email and username as arguments and return an object with the recipient's email, subject, and message.

It's worth noting that the code is using `process.env.GMAIL_USER` and `process.env.GMAIL_PASSWORD` to authenticate with `gmail`, You should replace it with your own Gmail user and password.

To obtain the Gmail password, you should go to the settings on Gmail and create an App Password, please remember that you need to activate the 2FA for your google account.

## Conclusion

Nodemailer with TypeScript makes it easy to send emails from a Next.js application. With the help of the `Emailer` class and the `mailOptions` object, you can send emails with ease. Of course, this implementation will only work on the server side of the NextJS Application. If you want to send email from client side, you just need to create an API endpoint under the `/pages/api`directory. 

In this post, we've shown how to send emails using a Gmail account, but you can also use other transport methods such as AWS SES to send emails. You can expand the class methods to meet your needs.



About Nodemailer
Nodemailer is a popular library for sending emails in Node.js. It allows you to send emails using various transport methods, such as SMTP, AWS...

Featured Post

Sending Emails with Ease: A Step-by-Step Guide to Using Nodemailer with TypeScript in Next.js

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

Optimizing Next.js App Performance for Speed and SEO

Hot Topics