Image Reorder & Renumber Web App

A simple, single-page HTML/CSS/JavaScript web application that allows users to upload images, reorder them using drag-and-drop in a grid, preview them in a dynamic carousel and a full-size modal, renumber them sequentially, and download the renumbered images individually (for small sets) or as a single ZIP archive.

Features

• Image Upload: Upload multiple images from your local system.
• Dynamic Image Carousel:
  • View a scrollable preview of uploaded images directly above the main grid.
  • The carousel's order dynamically updates to match the order of images in the grid after drag-and-drop operations.
• Grid Display: View uploaded images in a responsive grid layout.
• Drag & Drop Reordering: Easily change the order of images by dragging and dropping them within the grid. This order is reflected in the carousel.
• Sequential Renumbering:
  • Assign new filenames starting with a numerical prefix (e.g., 0.original_name.jpg, 1.another_name.png).
  • The new filename mapping is displayed for review.
• Image Preview Modal:
  • Click on any image in the grid to open it in a larger modal view.
  • Navigate through images within the modal using "Previous" and "Next" buttons or keyboard arrow keys.
  • Close the modal by clicking the close button, pressing the "Escape" key, or clicking on the backdrop.
• Flexible Download Options:
  • Save Individually (Max 10): Download renumbered images one by one. This option is available if 10 or fewer images are renumbered.
  • Download All as ZIP: Download all renumbered images удобconveniently packaged in a single .zip file, processed client-side using JSZip.
• Client-Side Operations: All processing (including zipping) is done in the user's browser; no server-side interaction is required.
• Responsive Design: Styled with Tailwind CSS for a clean and responsive user interface, including adaptive button layouts.
• Single File Application: All HTML, CSS (inline and Tailwind via CDN), and JavaScript (including the JSZip library via CDN) are contained within a single image_reorder_app.html file.

Screenshot(s)

Main Interface with Carousel and Grid:

How to Use

1. Clone the Repository or Download the HTML file:

   git clone https://github.com/your-username/your-repo-name.git
   cd your-repo-name

   Alternatively, download the image_reorder_app.html file directly.

2. Open in Browser: Open the image_reorder_app.html file in any modern web browser (e.g., Chrome, Firefox, Edge, Safari).

3. Upload Images: Click the "Choose Files" button to select the images you want to work with. Images will appear in the preview carousel and the main grid.

4. Reorder Images: Drag and drop images within the "Reorganize Your Images" grid to arrange them in your desired order. The carousel above will update to reflect the new order.

5. Preview Images (Optional): Click on any image in the grid to open it in a larger view within the modal. Use the navigation controls or keyboard arrows (Left/Right) to scroll. Press "Escape" or click the close button/backdrop to exit.

6. Renumber Images: When satisfied with the order, click the "Renumber Images" button.

   • The image labels in the grid will update to show their new sequential names.
   • The "New Filenames Mapping" text area will display the changes.
   • Download buttons will become active.

7. Save Renamed Images:

   • Save Individually (Max 10): If you have 10 or fewer renumbered images, this button will be enabled. Clicking it will download each image separately. Your browser may prompt for permission for multiple downloads.
   • Download All as ZIP: This button is enabled if images have been renumbered. Clicking it will package all renumbered images into a single renumbered_images.zip file and initiate its download. A brief "Zipping..." overlay may appear.

Technology Stack

• HTML5: For the application structure.
• CSS3:
  • Custom styles for UI elements and interactions.
  • Tailwind CSS (v3 via CDN): For rapid UI development and responsive styling.
• JavaScript (ES6+): For all client-side logic, including:
  • File handling (FileReader API).
  • DOM manipulation.
  • HTML5 Drag and Drop API.
  • Event handling.
  • Client-side zipping.
• JSZip (v3.10.1 via CDN): A library for creating, reading, and editing .zip files with JavaScript.

How It Works (Briefly)

1. Image Loading: Images are loaded as Data URLs and displayed in both a dynamic preview carousel and the main reordering grid.
2. Drag and Drop: The HTML5 Drag and Drop API allows reordering of image containers in the grid. After each successful drop, the preview carousel is rebuilt to match the new grid order.
3. Renumbering: The DOM order of images in the grid determines their new sequential filenames.
4. Modal Preview: Provides a full-size view of selected grid images with navigation.
5. Individual Saving: For small sets (≤10), renumbered images can be downloaded individually by creating and clicking temporary anchor tags with download attributes.
6. ZIP Saving: For any number of renumbered images, JSZip is used to create a .zip archive in the browser. Image Data URLs are converted to Base64, added to the JSZip instance, and then the library generates a downloadable blob.

Potential Future Enhancements

• Option to define a custom naming pattern beyond just index.original_filename.ext.
• User-configurable batch size for individual downloads (if re-enabled as an option).
• Persistence of image order and renumbered names using localStorage.
• Visual indication in the carousel for the currently selected/viewed image in the modal.
• More advanced image editing features (crop, rotate - significantly increases complexity).
• Improved accessibility (ARIA attributes for all interactive elements).
• Option to clear all uploaded images.

License

This project is licensed under the MIT License.