Vibe Coding · Lesson

Reading and Saving Files

Handle user files and local data.

Reading and Saving Files is a free Vibe Coding lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vibe Coding learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Apps Work with Files

Lots of apps deal with files: a user uploads a photo, exports a spreadsheet, or downloads a report. Reading and saving files is a core part of building real tools.

As a vibe coder, you don't need to memorize file APIs. You describe the behavior — 'let the user upload an image and show a preview' — and AI writes the wiring.

Two Kinds of Files

There are two main places files live, and it helps to tell AI which you mean:

User files — things a person picks from their device, like a photo or a PDF, usually through an upload button in the browser.
Local files — files your code or tool reads from a folder on your computer, common when using Cursor or Claude Code on a project.

Naming which kind keeps the AI from guessing wrong.

Letting Users Upload a File

In a web app, users pick files with an upload input. Here's a prompt that creates a simple, friendly uploader. Notice it names what to do with the file after it's chosen.

Paste this into v0, Bolt or Lovable and you'll get a working upload screen in seconds.

Build a page with a drag-and-drop area where I can
upload an image. After I drop or pick a file, show
a preview of the image and its file name and size.
Use plain HTML, CSS and JavaScript.

Reading Text from a File

When a user uploads a text or CSV file, the browser can read its contents into a string your app can use. AI usually uses a FileReader for this.

This example simulates reading text and counting its lines — the same logic AI would run on real file contents.

const fileContents = 'name,score\nAda,90\nGrace,95';
const lines = fileContents.split('\n');

console.log('Total lines:', lines.length);
console.log('First line:', lines[0]);

Saving and Downloading Files

Apps also create files for users to download — an exported list, a generated report, a saved drawing. In the browser, AI typically builds the content as text and triggers a download.

You just describe it: tell AI what the file should contain and what to name it.

Add an "Export" button that takes the list of tasks
on the page and downloads them as a file named
tasks.txt, one task per line. When clicked, the
browser should save the file to the user's
Downloads folder.

Working with CSV and JSON Files

Two formats show up constantly: CSV (rows and columns, like a spreadsheet) and JSON (labeled data). Apps often import one and export the other.

You don't parse these by hand — you tell AI the format and let it convert. Below, this snippet turns simple data into CSV text, the kind of thing AI generates for an export feature.

const rows = [
  { name: 'Ada', score: 90 },
  { name: 'Grace', score: 95 }
];

const csv = 'name,score\n' +
  rows.map(r => r.name + ',' + r.score).join('\n');

console.log(csv);

Reading Files in Cursor or Claude Code

Agentic tools like Claude Code and Cursor can read files in your project directly. You can point them at a file and ask questions or request changes.

This is huge: instead of copying code around, you just reference the file by name and let the tool open it.

Read data/customers.csv and tell me how many rows
it has and what the column names are. Then create a
script that loads it and prints the 5 customers
with the highest spend.

Handling Big or Messy Files

Real files are messy — extra blank lines, missing values, weird characters. Tell AI to expect this so your app doesn't crash on imperfect input.

Adding 'handle empty rows and missing fields gracefully' to your prompt saves you many bug-fixing rounds later.

Update the CSV importer to skip empty rows, trim
extra spaces, and if a row is missing the score,
set it to 0 instead of crashing. Show me a summary
of how many rows were skipped.

Previewing Before Saving

A polished file feature lets users preview what they're about to import or export before committing. It prevents mistakes and feels professional.

You can layer this on with a follow-up prompt once the basic version works — vibe coding rewards small, steady steps.

Before importing the CSV, show the first 5 rows in
a table so I can confirm it looks right, with an
"Import" and "Cancel" button. Only load the data
after I click Import.

Files Are Just Another Conversation

Whether it's an upload, a download, or reading a project file, the pattern is the same: describe the file, describe what to do with it, describe the edge cases.

You don't need to know FileReader, blobs, or encoding details. You stay focused on the user experience and let AI handle the plumbing.

Keeping Uploads Safe

Files from strangers can be risky — a wrong file type, a giant file that freezes the app, or even something malicious. A polished app sets limits.

Tell AI to validate uploads: allowed types, a maximum size, and a clear message when a file is rejected. This small habit keeps your app stable and friendly.

Only allow image files (jpg, png, webp) up to 5 MB
in the uploader. If someone picks a different type
or a file that's too large, reject it and show a
clear message explaining why. Never crash on a bad
upload.

Quick Check

You're building a web app and you want users to pick a photo from their own device and see a preview. When prompting AI, which detail makes the result most reliable?

Recap: Reading and Saving Files

You learned that apps handle two kinds of files — user uploads and local project files — and that AI can wire up uploads, previews, downloads, and CSV/JSON conversions for you.

You saw how agentic tools read project files directly, and why naming edge cases (empty rows, missing fields) prevents crashes. Next, you'll learn how to store data so it sticks around — from simple local storage to a real database.

Frequently asked questions

Is the “Reading and Saving Files” lesson free?

Yes — the full text of “Reading and Saving Files” is free to read here on the web, and the Vibe Coding course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vibe Coding course, upgrade to CoddyKit PRO.

What will I learn in “Reading and Saving Files”?

Handle user files and local data. You practise Vibe Coding with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vibe Coding?

No prior experience is required. Vibe Coding on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Reading and Saving Files” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vibe Coding lesson?

Yes. Every Vibe Coding lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vibe Coding