Mela File and Directory Explorer

This project is a simple file and directory explorer built with Laravel and styled using Tailwind CSS. The application allows users to navigate through directories, view files, and interact with a file system interface.

Features

• Directory Navigation: Browse through directories dynamically.
• File Listing: View files within the selected directory.
• Breadcrumb Navigation: See the current directory path.
• Responsive Design: Optimized for various screen sizes using Tailwind CSS.
• File Upload: Upload new files to a specified directory.
• Folder Creation: Create new folders and navigate into them.
• File Preview: Preview supported file types.
• Search Functionality: Search for files and folders within the current directory.

Requirements

• PHP >= 8.1
• Composer
• Laravel >= 10
• Node.js & npm/yarn (for Tailwind CSS compilation)

Installation

1. Clone the Repository

git clone https://github.com/your-username/laravel-file-explorer.git
cd laravel-file-explorer

2. Install Dependencies

composer install
npm install

3. Environment Configuration

Copy the .env.example file and configure your environment variables:

cp .env.example .env

4. Generate Application Key

php artisan key:generate

5. Start the Development Server

php artisan serve

Visit http://localhost:8000/explorer to use the application.

Usage

Routes

• /explorer: Main interface for file and directory navigation.

Directory Navigation

• Click on a directory name to navigate into it.
• Files and subdirectories in the current directory will be displayed.

File Upload

• Use the upload form to add new files to the current directory.
• The upload progress bar provides feedback on the upload status.

Folder Creation

• Use the folder creation form to create new folders.
• Navigate directly to the new folder after creation.

Search Functionality

• Search for files or folders by typing in the search bar.
• Results will be filtered dynamically.

File Structure

├── app
│   ├── Http
│   │   └── Controllers
│   │       └── FileExplorerController.php
├── resources
│   ├── views
│   │   └── explorer
│   │       └── index.blade.php
├── routes
│   └── web.php

Tailwind CSS Integration

To customize Tailwind CSS:

1. Install Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init
   

2. Configure tailwind.config.js:

   module.exports = {
       content: ["./resources/**/*.blade.php", "./resources/**/*.js"],
       theme: {
           extend: {},
       },
       plugins: [],
   };
   

3. Compile Tailwind:

   npm run dev
   

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a feature branch: git checkout -b feature-name
3. Commit your changes: git commit -m 'Add feature'
4. Push to the branch: git push origin feature-name
5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.