Relevant source files

The following files were used as context for generating this wiki page: - [server.js](https://github.com/udinsp/simple-file-sharing/blob/main/server.js) - [README.md](https://github.com/udinsp/simple-file-sharing/blob/main/README.md) - [package.json](https://github.com/udinsp/simple-file-sharing/blob/main/package.json) - [files/Petualangan Ajaib dengan Bulan.txt](https://github.com/udinsp/simple-file-sharing/blob/main/files/Petualangan%20Ajaib%20dengan%20Bulan.txt) - [.gitignore](https://github.com/udinsp/simple-file-sharing/blob/main/.gitignore) (Implicitly referenced via project structure)

# Directory Listing Feature The Directory Listing Feature is a core component of the Simple File Sharing Server. Its primary purpose is to scan a specific local directory—identified as the `files` folder—and dynamically generate a web-based interface that displays all available files to the user. This feature serves as the landing page for the application, providing a centralized hub for file discovery and access. The scope of this feature includes reading the filesystem, calculating metadata such as file sizes, and rendering a responsive HTML table. It allows users to browse the contents of the server without needing direct filesystem access, bridging the gap between the server's storage and the client's web browser. Sources: [server.js:10-14](), [README.md:1-5]() ## Architecture and Logic Flow The feature operates as a middleware-like logic block within the main HTTP server. When a request hits the root URL (`/`), the server initiates a filesystem read operation. The logic is asynchronous to ensure the server remains responsive during I/O operations. ### Request Handling Process 1. **URL Validation**: The server checks if the `req.url` is exactly `/`. 2. **Directory Scanning**: The `fs.readdir` method is invoked on the `files` directory. 3. **Metadata Extraction**: For each file found, the server retrieves statistics using `fs.statSync`. 4. **HTML Generation**: An HTML string is constructed containing a table with the file name, size (converted to MB), and a download link. ```mermaid flowchart TD A[Client Request '/'] --> B{URL is / ?} B -- Yes --> C[fs.readdir 'files' folder] B -- No --> D[Check other routes] C --> E[Loop through files] E --> F[Get fs.statSync for file] F --> G[Calculate Size in MB] G --> H[Append row to HTML table] H --> I[End Loop] I --> J[Send 200 OK + HTML Body] C -- Error --> K[Send 500 Internal Error] ``` The diagram above illustrates the logical flow from the initial user request to the final rendering of the directory list. Sources: [server.js:8-105]() ## Data Presentation and UI The directory listing is rendered using a standard HTML5 structure with embedded CSS for styling. The interface is designed to be responsive, adapting its layout for mobile devices via media queries. ### Component Details | Component | Description | Implementation Detail | | :--- | :--- | :--- | | **Table Header** | Displays labels for Name, Size, and Download. | Background color #4CAF50, White text. | | **File Name** | The original name of the file on disk. | Extracted from `files` array. | | **File Size** | The size of the file formatted to two decimal places. | `(fileStats.size / 1000000.0).toFixed(2) + ' MB'` | | **Download Link** | A hyperlink pointing to the download endpoint. | `/download?file=${encodedFileName}` | The server utilizes `encodeURIComponent` to ensure that file names with special characters or spaces are correctly handled in the generated URLs. ```javascript files.forEach((file) => { const fileStats = fs.statSync(path.join(__dirname, 'files', file)); const fileSize = fileStats.size / 1000000.0; // convert to MB const encodedFileName = encodeURIComponent(file); // encode file name fileTable += ` ${file} ${fileSize.toFixed(2)} MB Download `; }); ``` Sources: [server.js:84-101]() ## Filesystem Interaction The feature relies heavily on the Node.js `fs` and `path` modules to interact with the host operating system. The directory targeted for listing is hardcoded as `files` relative to the application's root directory. ### Key Functions Used - `path.join(__dirname, 'files')`: Safely constructs the absolute path to the target directory regardless of the operating system. - `fs.readdir(path, callback)`: Reads the content of the directory. - `fs.statSync(path)`: Retrieves file metadata (specifically `size`) synchronously for each item in the directory. ```mermaid sequenceDiagram participant S as Server participant FS as Filesystem S->>FS: readdir("./files") FS-->>S: Array of filenames loop For each file S->>FS: statSync(filename) FS-->>S: Stats (size in bytes) end S->>S: Construct HTML Table ``` The sequence diagram shows the interaction between the server logic and the underlying filesystem during the listing generation. Sources: [server.js:12-14](), [server.js:84-85]() ## Technical Specifications and Configuration The listing feature is served over HTTP port 80 by default. It also identifies the local network IP address to inform the administrator where the directory listing can be accessed within a local network. | Configuration Item | Value / Range | Source | | :--- | :--- | :--- | | **Default Port** | 80 | `server.listen(80)` | | **Target Directory** | `/files` | `path.join(__dirname, 'files')` | | **Output Content-Type**| `text/html` | `res.setHeader('Content-Type', 'text/html')` | | **IP Filtering** | IPv4, starts with 192.168 | `os.networkInterfaces()` logic | Sources: [server.js:115-131](), [server.js:106](), [package.json:3]() ## Summary The Directory Listing Feature provides a seamless way for users to view and select files for download. By combining Node.js filesystem modules with dynamic HTML generation, it transforms a local folder (such as the one containing `Petualangan Ajaib dengan Bulan.txt`) into a navigable web resource. Its responsive design ensures accessibility across various devices while maintaining a simple, dependency-light architecture. Sources: [server.js:1-133](), [files/Petualangan Ajaib dengan Bulan.txt]()