Image Upload and Gallery System Refinement

Job ID: 38381653

Budget: €8 – €30 EUR

### General Description
The objective of this project is to review and finalize the system that allows uploading images to Wasabi (Amazon S3 compatible) through a quick upload form and displays a gallery with the uploaded images. The current system is partially developed, and we need to complete its implementation with the following additional features.

#### Estimated Budget
- Estimated time: 3-4 hours
- Estimated budget: $60

### Project Phases
1. **Requirements Submission, Budget Approval, and Contract**
- Send this document with detailed requirements.
- Acceptance of the budget by the freelance developer.
- Create the contract on Upwork with the corresponding milestones.
- Implementation proposal by the freelance developer.

2. **Feature Implementation**
- Develop the functionalities described in this document.

3. **Testing and QA**
- Conduct quality and functionality tests.
- Fix any errors and make necessary adjustments.

4. **Final Validation and Delivery**
- Final validation by the client.
- Project delivery and milestone release on Upwork.

### Definition of Done
The project will be considered complete when the following criteria are met:
- The image upload form to Wasabi works correctly.
- The uploaded images are stored in the corresponding folder on Wasabi.
- The gallery correctly displays the images with thumbnails.
- Images can be downloaded individually or as a ZIP file.
- All functionalities described in the "Updates to Implement" section are implemented.
- The system passes all quality and functionality tests.
- All source files and necessary documentation are delivered.

### Functional Requirements
#### Existing Features
- Image upload to Wasabi.
- Image gallery display.

#### Updates to Implement
1. **File Type Parameter**: Add the ability to restrict the types of files to upload.
2. **Image Review**: Implement a review system (editor supervisor) to prevent automatic emails from being sent to the client without approval.
3. **Load Thumbnails**: Fix the random thumbnail loading issue.
4. **ZIP Generation Notification**: Display a message while the ZIP file is being generated.
5. **ZIP File Naming**: The generated ZIP file should have a specific code.
6. **Generic Names**: Change photo names to generic ones like 1, 2, 3, etc.
7. **Remove EXIF Metadata**: Delete all EXIF metadata from photos upon upload.
8. **Photo Compression**: Compress photos upon upload using a plugin like compressorjs or uppy-plugin-image-compressor.
9. **Multiple Resolutions**: Allow downloads in multiple resolutions within the ZIP file.
10. **Dynamic ZIP Name**: The ZIP file name should include the folder name.
11. **Access Restriction**: Restrict access to images.php to admin users only.
12. **Glide Status**: Change the status in Glide via API when photos are uploaded to prevent multiple uploads.
13. **Resubmission Page**: Create a page for QC to resubmit images, with buttons for approve or resubmit.
14. **Drag and Drop**: Allow reordering photos via drag and drop.

### Stack/Technologies to Use
- **Frontend**: HTML, CSS, JavaScript
- **Backend**: PHP
- **Storage**: Wasabi (Amazon S3 compatible)
- **Libraries**: Dropzone.js, Uppy.js, compressorjs, LightGallery.js
- **Integrations**: Wasabi API, Glide API

### Frequently Asked Questions
- **Where will the development take place?**
- Development can be done on the developer's local server but must be tested and validated on the client's server.

- **Will access to the Wasabi account be provided?**
- Yes, access to the Wasabi account with the necessary keys will be provided.

- **What happens if errors are found during testing?**
- Errors must be corrected before the final delivery. A support period will be included to resolve any post-delivery issues.

### Concrete Steps
1. **Initial Setup**:
- Download and review the existing project files.
- Configure the Wasabi keys in the .env file.
- Test the current functionality of image upload and gallery.

2. **Implement Updates**:
- Implement each of the updates mentioned, ensuring proper integration and functionality.

3. **Testing and QA**:
- Conduct thorough testing of all implemented functionalities.
- Document and fix any errors found.

4. **Validation and Delivery**:
- Present the completed project for client validation.
- Make final adjustments based on client feedback.
- Deliver the project and release milestones on Upwork.
Related categories: PHP JavaScript CSS HTML GitLab