Talk

AI Composer workflow for batch image download and replace

From Wikiprompt, the free prompt encyclopedia

宝玉
Contributed by宝玉XSource

Jan 21, 2025

AI Composer workflow for batch image download and replace A practical AI coding prompt for implementing a batch image download-and-replace feature in a TipTap editor with a backend API, emphasizing context and modular iteration.

Prompt ContentSave

🌐
Backend: Add a new endpoint /api/download-and-save-image. Accept an image URL, download it, save to object storage (R2). File naming rule: 'date + original filename', if duplicate, append a number suffix. Return the new image URL. Reference existing /api/upload-image code for structure and style. Frontend: Use React + TypeScript + ShadcnUI, editor is TipTap. Generate a component with: a button + progress bar or status message; on click, traverse all images in the editor (editor.getJSON()), filter out links starting with http:// or https://; call the new backend endpoint to batch download and upload images; replace successfully uploaded image links back into the editor and update the progress bar. Provide the backend request/response format: POST method, Body is { url: string }, success returns new image URL, failure returns error message.

Sign in to see the full prompt

Continue with:

By logging in, you agree to our Terms of Use and Privacy Policy

Usage

This prompt is designed for use with coding. Copy the prompt content above and paste it into your preferred AI tool.

For best results, you may customize the placeholders (indicated by square brackets or capital letters) with your specific requirements.

References

Categories:coding| twitter| ai-coding| composer

Talk