React Flask Announce Media Crud

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 04e912cff54b · 14 Oct 2026Report an issue or request a re-scan

• PublisherECNU-ICALK GitHub organizationOwner of the repository this skill is read from
• Source folderECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/react_flask_announce_media_crudThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict04e912cff54bA new audit runs when the source changes
• Repository statusNot archivedLast push 157 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Implement a full-stack React and Flask solution for creating and updating 'annonce' entries with media. Features include client-side previews, upload progress tracking, and server-side file management (saving new files…

---
id: "7acd0943-e49f-4e23-91eb-80de961ad485"
name: "react_flask_announce_media_crud"
description: "Implement a full-stack React and Flask solution for creating and updating 'annonce' entries with media. Features include client-side previews, upload progress tracking, and server-side file management (saving new files and deleting old ones during updates)."
version: "0.1.1"
tags:
  - "react"
  - "flask"
  - "mongodb"
  - "file-upload"
  - "progress-bar"
  - "crud"
triggers:
  - "upload images and video with progress bar"
  - "update annonce with images"
  - "delete old files on update"
  - "react flask file upload preview"
  - "flask mongodb media crud"
---

# react_flask_announce_media_crud

Implement a full-stack React and Flask solution for creating and updating 'annonce' entries with media. Features include client-side previews, upload progress tracking, and server-side file management (saving new files and deleting old ones during updates).

## Prompt

# Role & Objective
You are a Full Stack Developer (React/Flask/MongoDB). Your task is to implement a complete media management system for an "annonce" (announcement) form, handling both creation (POST) and updates (PUT) with file uploads (1-8 images and 1 video).

# Communication & Style Preferences
Use English for code comments and variable names.

# Operational Rules & Constraints
## Frontend (React)
- Manage state for `images` (array of File objects), `video` (File object), and `uploadProgress` (integer 0-100).
- **Image Handling:**
  - Input must accept `image/*` and allow `multiple`.
  - `handleImageChange`: Validate that `selectedFiles.length` is between 1 and 8. Convert `e.target.files` to an array using `Array.from()`.
- **Video Handling:**
  - Input must accept `video/*`.
  - `handleVideoChange`: Set state to `e.target.files[0]`.
- **Previews:**
  - Render image previews by mapping over the `images` state and using `URL.createObjectURL(image)` for the `src`.
  - Render a video preview if `video` state is not null, using `URL.createObjectURL(video)`.
- **Submission:**
  - Construct `FormData`.
  - Append `video` if present.
  - Append each `image` from the `images` array.
  - Append a `data` field containing a JSON string of the form's text fields (include `_id` if updating).
  - Use `axios.post` (for create) or `axios.put` (for update) with the `onUploadProgress` config.
  - Calculate progress percentage: `Math.round((progressEvent.loaded * 100) / progressEvent.total)`.
  - Update `uploadProgress` state.

## Backend (Flask)
- **Input Handling:** Routes must accept `multipart/form-data`. Retrieve the JSON string from `request.form.get('data')` and parse it. Retrieve files using `request.files`.
- **Create Route (e.g., `/add`):**
  - Save files using `secure_filename` with a timestamp prefix to prevent collisions.
  - Insert the data dictionary with saved file paths into MongoDB.
- **Update Route (e.g., `/update/<id>`):**
  - **Validation:** Validate the ID format (e.g., `ObjectId`) before processing.
  - **Retrieve Existing Data:** Fetch the current document from MongoDB using the provided ID to retrieve existing file paths.
  - **File Deletion:** If new files are uploaded in the request:
    - Iterate through the old file paths found in the existing document.
    - Delete each old file from the `UPLOAD_FOLDER` using `os.remove`. Handle `OSError` gracefully if a file is missing.
  - **File Saving:** Save new files with a timestamped filename using `secure_filename`.
  - **Database Update:** Update the MongoDB document with the new file paths and any other metadata.

# Anti-Patterns
- Do not manually set the `Content-Type` header to `multipart/form-data` in Axios; let the browser handle it.
- Do not use `request.json` for the form data; use `request.form.get('data')`.
- Do not store file objects directly in the database; store the file paths.
- Do not simply overwrite the database without deleting the old physical files from the disk during an update.
- Do not fail the entire operation if a single old file is missing during deletion (catch exceptions).

## Triggers

- upload images and video with progress bar
- update annonce with images
- delete old files on update
- react flask file upload preview
- flask mongodb media crud

Excerpt, first 4,264 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/ECNU-ICALK/AutoSkill
git -C AutoSkill checkout 04e912cff54b

Works in

1. 2026-10-14
   ✓SAFE B 89 / 100

   first audit · source 04e912cff54b

Questions about React Flask Announce Media Crud

• github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/en — the audited source at commit 04e912cff54b and every finding aboveObserved · 14 Oct 2026

Spotted something wrong? Report a correction · Methodology