Chapter 1: Introduction to File Uploads

This guide will walk you through an easy method for uploading files to ChatGPT, a feature currently limited to users of the Code Interpreter plugin. Many ChatGPT Plus subscribers, including myself, lack access to this plugin, which is why I've discovered a free alternative that allows file uploads and analyses akin to using the Code Interpreter. Let's dive in!

If you'd rather watch a video demonstration, check out the link below.

Chapter 2: Adding the Submit Button

To facilitate uploads, we will implement a "Submit File" button on the ChatGPT interface. The button will appear as shown in the example below:

Once the button is integrated, clicking it will prompt you to select a file. If the chosen file is extensive, its contents will be broken down into manageable segments. Supported file types include '.txt', '.js', '.py', '.html', '.css', '.json', and '.csv'.

Step-by-Step Instructions

To create the green button, you'll need to input some code into your browser's console. No coding expertise is required; simply ask ChatGPT to generate the necessary code, then paste it into the console. This process takes less than a minute!

Here’s the prompt you can use to generate the code for the "Submit File" button (credit to "Automate My Life"):

Generate a Js script that creates a button with the text 'Submit File' and inserts it into the DOM before an element with the class '.flex.flex-col.w-full.py-2.flex-grow.md:py-3.md:pl-4'. The button should have a green background color, white text color, 5px padding, no border, 5px border radius and 5px margin. The script should also create a progress element and insert it into the DOM before the same element. The progress element should have a width of 99%, height of 5px and a grey background color. Inside the progress element, there should be another div element representing the progress bar with a width of 0%, height of 100% and blue background color. When the button is clicked, it should create an input element of type 'file' that accepts '.txt', '.js', '.py', '.html', '.css', '.json' and '.csv' files. Once a file is selected, using an async it should be read as text and split into chunks of size 15000. Each chunk should be submitted into a conversation by doing the following: Copy async function submitConversation(text, part, filename) {...}

This prompt instructs ChatGPT to develop a "Submit File" button, specify the file formats accepted, and ensure that files exceeding 15000 characters are divided into chunks.

Finalizing the Button

Once you run the above prompt, you should receive the following code. Feel free to copy it if your version is different:

// Create the button

const button = document.createElement('button');

button.textContent = 'Submit File';

button.style.backgroundColor = 'green';

button.style.color = 'white';

button.style.padding = '5px';

button.style.border = 'none';

button.style.borderRadius = '5px';

button.style.margin = '5px';

// Create the progress element

const progress = document.createElement('progress');

progress.style.width = '99%';

progress.style.height = '5px';

progress.style.backgroundColor = 'grey';

// Create the progress bar inside the progress element

const progressBar = document.createElement('div');

progressBar.style.width = '0%';

progressBar.style.height = '100%';

progressBar.style.backgroundColor = 'blue';

// Append the progress bar to the progress element

progress.appendChild(progressBar);

// Find the target element

const targetElement = document.querySelector('.flex.flex-col.w-full.py-2.flex-grow.md\:py-3.md\:pl-4');

// Insert the button and progress element before the target element

targetElement.parentNode.insertBefore(progress, targetElement);

targetElement.parentNode.insertBefore(button, targetElement);

// Add click event listener to the button

button.addEventListener('click', async () => {

...

});

// Function to split text into chunks

function chunkText(text, chunkSize) {

...

}

// Function to submit a conversation

async function submitConversation(text, part, filename) {

...

}

Next, right-click anywhere on the ChatGPT interface and select "Inspect." Developer tools will appear; navigate to the "Console" tab and clear any messages in the box. Paste the code there and hit enter.

Now, you should see the green "Submit File" button on the ChatGPT site. Keep in mind that if you switch to a different chat, you will need to repeat this process.

Chapter 3: Analyzing Files with ChatGPT

To demonstrate how to analyze a file, I will upload a CSV titled population_total.csv, which contains over 4000 rows of population data. You can find the download link provided. Given that this file exceeds 15000 characters, ChatGPT will automatically divide it into 7 segments upon uploading.

After all chunks have been uploaded, I can commence my analysis. I’ll create a line plot depicting the population trends of China and India using the following prompt:

Read the 7 parts of population_total.csv into a dataframe using Python and create a line plot for the populations of China and India.

The code generated will allow me to visualize this data effectively.

Additionally, I created a bar plot using the prompt below:

Create a bar plot showcasing the populations of the United States, India, China, Indonesia, and Brazil for the years 1980, 1990, 2000, 2010, and 2020.

If you are utilizing GPT-4, you can enable the Wolfram plugin, which allows ChatGPT to create plots directly on its platform, eliminating the need to copy and paste code into your editor. For more information about the Wolfram plugin, please refer to the related article.

In conclusion, while GPT-4 may process data at a slower pace and is limited to 25 messages every 3 hours, this method provides a valuable way to analyze large datasets efficiently.

Join our newsletter with over 20,000 subscribers to receive a free ChatGPT cheat sheet!