# Uploading and Managing Files

<p class="callout info">The Manage Files feature provides a centralized repository for all files used across your application, primarily focusing on images for user and admin dashboards. Its primary purpose is to allow administrators to easily upload, view, organize, and manipulate visual content to ensure consistent branding throughout the system. This article is intended for OPS-COM administrators responsible for managing system content and visual assets.</p>

## Setup and Configuration

This feature is a core administrative tool used to store and manage system-wide assets.

**Admin Side:** Administrators must have the appropriate system role permissions enabled to access the configuration menus and modify system files.

**User Side:** This file manager is strictly a backend administrative tool; however, the uploaded files (such as logos, banners, and permit images) are ultimately visible to end-users on the parking portal.

## Using this Feature

Administrators can use the following instructions to navigate the file manager, upload new assets, manipulate existing files, and embed images directly onto custom pages.

### Accessing and Viewing Files

1. Hover over **System Configuration** and click **Manage Files**.
2. Select your preferred viewing layout from the interface:
    
    
    - **Grid Mode:** Displays a visual thumbnail preview of each image, which is highly useful for quickly identifying visual content.
    - **Table Mode:** Provides a detailed list view, displaying file names, sizes, and other relevant information.

### Adding Files to the Repository

1. Click the **Upload** tool to open the file upload interface.
2. Click **Select files** and choose the desired images from your local device.
3. Click **Submit** to upload the files directly to your site's storage.

<p class="callout warning">Once an image is successfully uploaded, it cannot be moved to a different folder. To maintain proper organization, ensure you navigate to and open the intended destination folder before you upload the image.</p>

### Managing Existing Files

1. Right-click on a specific image or file to open a contextual menu.
2. Click **Download** to save a copy of the file to your local device, **Rename** to change the file name, or **Delete** to permanently remove the file from the system.
3. Click **View** on an image, then click the **Cropping** icon to open a tool that allows you to resize or adjust the visible dimensions to focus on a specific area.

### Adding Images to a Page

1. Click **Insert** in the text editor toolbar when editing a custom page or content area.
2. Select **Image** from the dropdown menu.
3. Click the **search folder** icon next to the source field to open the file manager.
4. Locate and double-click the specific image you wish to insert. The image will immediately be added to the page at the location of your cursor.

---

## <span style="color: rgb(22, 145, 121);">Best Practices and Considerations</span>

- <span style="color: rgb(22, 145, 121);">**Organize files using sub-folders:** **Consider creating sub-folders within the file manager to keep your assets organized and easy to locate.** Because uploaded files cannot be moved once added, establishing a clean folder structure early prevents repository clutter.</span>
- <span style="color: rgb(22, 145, 121);">**Use descriptive file names:** **Always use clear and descriptive file names to simplify identification and referencing.** For example, naming an asset *company-logo-header.png* is significantly better than a generic name like *image1.png*.</span>
- <span style="color: rgb(22, 145, 121);">**Optimize image sizes:** **Before uploading, optimize large images for web use.** Smaller file sizes will drastically improve page load times for both the administrative backend and the end-user interfaces.</span>
- <span style="color: rgb(22, 145, 121);">**Backup critical assets:** **Consider maintaining local backups of critical branding assets as a best practice.** While the system securely manages these files, having local copies of standard organizational logos and banners is always recommended.</span>
- <span style="color: rgb(22, 145, 121);">**Ensure path accuracy:** **When manually linking images to pages via HTML, ensure the URL path is exactly correct.** File paths are often case-sensitive, so capitalization and spelling must perfectly match the uploaded file name.</span>