Member Avatar for jrotunda85

My site is broken into three different categories (which are stored on 3 separate tables) and I am looking at creating a functionality to let a user upload photos. Ideally, I would like the following to happen:

  1. A user is viewing a single retail store on the site, for example and clicks "upload photos"
  2. The user is prompted with a box that allows them to upload multiple photos simultaneously. These photos need to be "tagged" or associated with this particular store so they can be displayed later (more on that in a bit)
  3. On upload, the files are renamed and sent to a directory specified in the upload script and their path(s) are saved in the database itself.
  4. The page refreshes and now the photos are there (along with any other user's photos submitted for that particular store). Note: this is why it's important to tag photos to a particular store, that way they can be retrieved when the store is viewed without displaying other store's photos.

Does anyone have some guidance on where to start with this or if there is a ready-made solution out there for this type of setup?

  • 2 Contributors
  • 1 Reply
  • 180 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by jkon

Dani AI

Generated

A focused approach: store image files on disk (or object storage) and save a small metadata record in the database that links the image to the specific store. Because the site has three separate category tables, use a polymorphic association (for example parent_type + parent_id) so each photo can be tagged to the correct table, or else consolidate the three tables into one canonical "store" table if that is feasible. This preserves fast file serving while keeping queries simple when a store page is loaded.

's point about input naming is useful: use name="photos[]" with the HTML5 multiple attribute for the simplest server-side loop, and use per-file IDs in the client JS only when per-file progress/validation is required. Server-side validation must be the final authority: check file size, MIME/type (via finfo/getimagesize), and that the file is a real image before committing it.

A minimal photos table example:

CREATE TABLE photos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  parent_type VARCHAR(50) NOT NULL,
  parent_id INT NOT NULL,
  user_id INT,
  filename VARCHAR(255) NOT NULL,
  mime VARCHAR(100),
  width INT,
  height INT,
  size INT,
  approved TINYINT(1) DEFAULT 0,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

Server-side workflow sketch (safe rename, validation, move, DB insert):

foreach ($_FILES['photos']['error'] as $i => $err) {
  if ($err !== UPLOAD_ERR_OK) continue;
  $tmp  = $_FILES['photos']['tmp_name'][$i];
  $info = @getimagesize($tmp);
  if ($info === false) continue; // not an image
  $ext  = image_type_to_extension($info[2], false);
  $new  = sha1_file($tmp) . '.' . $ext;
  $target = __DIR__ . '/uploads/' . $new;
  if (move_uploaded_file($tmp, $target)) {
    // insert parent_type, parent_id, filename, mime, width, height into DB
  }
}

Security/operations checklist: enforce server-side type/size limits, check upload_max_filesize, post_max_size, and max_file_uploads in php.ini, re-encode images (GD/Imagick) to strip dangerous payloads, generate thumbnails, place uploads outside an executable webroot or disable script execution on the upload directory, use DB transactions and cleanup on failure to avoid orphan files, add an approval/moderation flag, and consider object storage + CDN for scale.

Member Avatar for jkon

Α «retail store» is an object or has id in relation database (even in text data like VSAM a key) so you have a way to mark the input file tag. You could do it in two ways (as I am thinking it now) the first one is the obvious by an array (e.g.… with title file-52[]) witch is great but difficult in first level validation – JavaScript and a second one giving each one a distinct title/id (e.g. file-52-0) witch could be easier to validate, and than in PHP checking for posts with those flags.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.