0Pricing
Vibe Coding · Leçon

Lire et enregistrer des fichiers

Gérez les fichiers utilisateur et les données locales.

Lire et enregistrer des fichiers est une leçon Vibe Coding gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vibe Coding, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vibe Coding comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Lire et enregistrer des fichiers » est-elle gratuite ?

Oui — le texte complet de « Lire et enregistrer des fichiers » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vibe Coding, passe à CoddyKit PRO. Le cours Vibe Coding comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Lire et enregistrer des fichiers » ?

Gérez les fichiers utilisateur et les données locales. Tu pratiques Vibe Coding avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vibe Coding ?

Aucune expérience préalable n'est requise. Vibe Coding sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Lire et enregistrer des fichiers » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vibe Coding ?

Oui. Chaque leçon Vibe Coding inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Communiquer avec des API
  2. Lire et enregistrer des fichiers
  3. Stocker les données simplement
  4. Gérer les secrets et les clés
← Retour à Vibe Coding