DEV Community

Mayank Chawdhari
Mayank Chawdhari

Posted on

Implementation of Folder and Image Upload System with Database Integration

This is integrated in one of my projects

Overview:

Introducing a robust system for handling image uploads and folder creation with full validation, processing, and database integration. The system includes checks for user authentication, file handling (with image format conversion), folder creation, and the insertion of relevant metadata into the database. The system ensures that uploaded images are stored efficiently and the user is provided with structured feedback on success or failure.


Key Features Implemented:

  1. User Authentication Validation:

    • The script starts by ensuring the user is authenticated. If the session does not contain the aUsername variable, an error message is returned in JSON format, halting the script's execution. This ensures that only authorized users can interact with the image upload process.
  2. Folder Creation and Validation:

    • The system checks if the base upload directory (Resources/PropertiesMedia) exists. If not, the script responds with an error, indicating the missing directory.
    • The folder name provided in the request is validated and sanitized to only include alphanumeric characters, dashes, and underscores. If no folder name is provided, the script returns an error indicating the missing folder name.
  3. Folder Directory Creation:

    • If the target folder doesn’t exist, the script attempts to create the folder inside the base directory using appropriate permissions (0755).
    • The folder name is dynamically generated based on the sanitized input, and if folder creation fails, the script returns an error message indicating the failure.
  4. File Upload Validation:

    • The script verifies that exactly 7 files are uploaded by checking the $_FILES array. If the number of files differs from 7, the system halts and returns an error message indicating how many files were uploaded versus the expected number.
  5. Image Processing with Conversion (WebP):

    • The system checks whether the GD extension is available, enabling image conversion.
    • If the GD extension is available, uploaded images are converted to WebP format (with 80% quality), making them more optimized for web usage.
    • For unsupported formats or when GD is not available, the image is saved in its original format, and the process continues.
  6. Random String Generation for Image Filenames:

    • To ensure unique filenames and avoid conflicts, a helper function generates a random string (5 characters by default). This random string is appended to the file name before storing it.
  7. File Handling:

    • Each uploaded file is moved to the newly created folder. The script calculates the total size of all uploaded images and accumulates it as the total size of the folder.
    • For each uploaded image, the script also collects metadata (image name, URL, quality, and size) to insert into the database.
  8. Database Integration:

    • Folder Metadata: Once the images are uploaded, metadata about the folder (name, assigned user, quality, and size) is inserted into the property_media_folders table. This creates a record of the folder and its details in the database.
    • Image Metadata: For each image, metadata including the name, URL, quality, and size is inserted into the property_images table. The images are linked to the folder they were uploaded to by associating them with the folder name.
  9. Error Handling and Feedback:

    • The script contains multiple layers of error handling for various stages, including:
      • Missing or invalid folder name.
      • Incorrect number of files uploaded.
      • Unsupported image formats.
      • GD extension availability.
      • Folder creation failures.
      • Database insertion failures.
    • Structured JSON responses provide clear feedback to the user, whether successful or error messages are returned.
  10. Response Message:

    • If all operations (folder creation, file uploads, and database insertions) are successful, the script returns a success message with details about the folder and the images that were processed.
    • If any part of the process fails, an error message is returned, describing the issue and halting further execution.

Detailed Explanation of Each Process:

1. User Authentication:

The script verifies the session for the aUsername key. If not found, it immediately returns an error in JSON format:

   {
     "status": "ERROR",
     "message": "User not authenticated."
   }
Enter fullscreen mode Exit fullscreen mode

2. Folder Validation:

  • The folder name is sanitized using preg_replace to ensure it only contains alphanumeric characters, dashes, and underscores.
  • If the base directory doesn't exist, an error response is returned:
   {
     "success": false,
     "message": "Base upload directory not found."
   }
Enter fullscreen mode Exit fullscreen mode
  • If the folder name is missing, the script returns:
   {
     "success": false,
     "message": "Folder name is required."
   }
Enter fullscreen mode Exit fullscreen mode

3. File Upload Validation:

  • The system checks that exactly 7 files are uploaded. If not, the script responds:
   {
     "success": false,
     "message": "Exactly 7 images must be uploaded. Received: X"
   }
Enter fullscreen mode Exit fullscreen mode

4. Image Conversion:

  • If the GD extension is available, uploaded images are processed and converted into WebP format. The response message indicates whether the images were converted to WebP or saved in their original format.
  • If GD is not available, the images are simply moved to the directory without conversion.

5. Database Integration:

  • The folder metadata is inserted into the database with the following SQL statement:
   INSERT INTO property_media_folders (FolderID, FolderName, FolderAssignedTo, ImageQuality, Size) VALUES (:FolderID, :FolderName, :FolderAssignedTo, :ImageQuality, :Size)
Enter fullscreen mode Exit fullscreen mode
  • Image metadata is inserted into the property_images table for each image:
   INSERT INTO property_images (Image_Name, Image_url, AssignedToFolder, ImageQuality, ImageSize) VALUES (:Image_Name, :Image_url, :AssignedToFolder, :ImageQuality, :ImageSize)
Enter fullscreen mode Exit fullscreen mode

6. Response Example:

  • Success response with the following structure:
   {
     "success": true,
     "message": "Files uploaded successfully. Images converted to WebP.",
     "folder": "example_folder_name"
   }
Enter fullscreen mode Exit fullscreen mode
  • Error response with an appropriate message indicating the specific issue encountered.

Conclusion:

This provides a comprehensive solution for managing image uploads and folder creation, along with robust file handling and conversion (if applicable). It integrates with a backend database to store relevant metadata and ensures proper error handling and validation throughout the process. This system is designed to be reliable, efficient, and secure, providing clear feedback to users.

Mayank Chawdhari

Mayank Chawdhari

Mayank Chawdhari

Mayank Chawdhari

Top comments (0)