Question

I am extending an inventory management system to retain an item’s image order.

Originally, on the add/edit form, there are 18 <input type="file" /> elements. Once n number of images were chosen and uploaded, they did not retain their order (image uploaded to slot #1 might end up in slot #2). Additionally, images are named with the product number and an index; so the image uploaded in slot #4 would be named 12345678_4.jpg.

I need to force image order, as well as clean up existing entries. For example, a given entry with product number 555 has 5 images, but the names are 555_1.jpg, 555_3.jpg, 555_4.jpg, 555_5.jpg, 555_10.jpg.

Given the following criteria, what would be the simplest and most reliable method to maintain image order:

• File naming criteria must be x_n.jpg across three folders where x is the product number, and n is the photo number. (folders are siblings: photos, med_photos, and thumbs).
• An image must exist in the three folder mentioned above at specific dimensions with the exact same name (photos/555_2.jpg, med_photos/555_2.jpg, thumbs/555_2.jpg).
• Images need to be easily reordered (for display purposes).

I began writing classes for this purpose, but have had some snags that led to code bloat and some anomalies during execution.

Please respond with any ideas, be they small or large.

---

@Marc B The user uploads a single (full-size) image, which gets copied and resampled to 2 other sizes, and need to live in the directory according to their size.

The ‘legacy’ code in place has 18 input elements, each named photo_n where n is the index (1-18). When loading an edit version of the page, where an image exists in a given slot, instead of a file input element, the thumbnail displays and a hidden input element is printed with the image name (x_n format, no extension).

Currently, next to each existing image on an edit form, there is an up and down arrow. This swaps index (and display order) with the image either above or below it. Doing so requires these steps:

1. Rename the file in the destination slot (say 123_4.jpg) to a temporary value (random numbers: 345334534353.jpg).
2. Rename the file in the source slot (123_3.jpg) to the original name of the file in the destination slot (123_3.jpg -> 123_4.jpg).
3. Rename the destination file to the original name of the source file (345334534353.jpg -> 123_3.jpg).
4. Update the database entries for both images to their new names (the database stores the name without the extension: 123_4).

The code I wrote to handle this only works correctly if the images are serialized properly, 123_1.jpg, 123_5.jpg, and 123_6.jpg won’t work because it is missing indices 2-4.

Answer 1

Use appropriate field names in the upload form? item_555_1, medium_555_1, thumb_555_1, if you’re making the user upload each type themselves? It’s easy enough to decompose names like that into individual elements using string operations or regexes:

$items = preg_grep('/^item_\d+_\d+$/', array_keys($_FILES));
foreach($items as $item) {
    $parts = explode('_', $item);
    $item_id = $parts[1];
    $sub_id = $parts[2];
    ...
}

Another option is to use PHP’s array notation on field names, but the way PHP handles array-named file fields makes upload handling a bit wonky because of how (stupidly) it builds $_FILES when array notation is used.