Advanced Search

Mouse hover image preview Upload error handling Thumbnail view for folders containing images #283 How to search inside folders. #282 Search bar with regex matching #140 Subfolder Search Feature #132
prasathmani · Jan 14, 2020 · 9e38772 · 9e38772
1 parent 0319b7b
commit 9e38772
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -2,11 +2,11 @@
 
 
 [![Live demo](https://img.shields.io/badge/Live-Demo-brightgreen.svg?style=flat-square)](https://tinyfilemanager.github.io/demo/)
-[![Live demo](https://img.shields.io/badge/Help-Docs-lightgrey.svg?style=flat-square)](https://tinyfilemanager.github.io/)
+[![Live demo](https://img.shields.io/badge/Help-Docs-lightgrey.svg?style=flat-square)](https://github.com/prasathmani/tinyfilemanager/wiki)
 [![GitHub Release](https://img.shields.io/github/release/qubyte/rubidium.svg?style=flat-square)](https://github.com/prasathmani/tinyfilemanager/releases)
  [![GitHub License](https://img.shields.io/github/license/prasathmani/tinyfilemanager.svg?style=flat-square)](https://github.com/prasathmani/tinyfilemanager/blob/master/LICENSE) 
 [![Paypal](https://img.shields.io/badge/Donate-Paypal-lightgrey.svg?style=flat-square)](https://www.paypal.me/prasathmani)
-> It is web based file manager and it is a simple, fast and small file manager with a single file, multi-language ready web application for storing, uploading, editing and managing files and folders online via web browser. The Application runs on PHP 5.5+, It allows the creation of multiple users and each user can have its own directory and a build-in support for managing text files with cloud9 IDE and it supports syntax highlighting for over 150+ languages and over 35+ themes.
+> TinyFileManager is web based file manager and it is a simple, fast and small file manager with a single file, multi-language ready web application for storing, uploading, editing and managing files and folders online via web browser. The Application runs on PHP 5.5+, It allows the creation of multiple users and each user can have its own directory and a build-in support for managing text files with cloud9 IDE and it supports syntax highlighting for over 150+ languages and over 35+ themes.
 
 ## Demo
 [Demo](https://tinyfilemanager.github.io/demo/)
@@ -43,7 +43,7 @@ To enable/disable authentication set `$use_auth` to true or false.
 
 - :cd: Open Source, light and extremely simple
 - :iphone: Mobile friendly view for touch devices
-- :information_source: Basic features likes Create, Delete, Modify, View, Quick View, Download, Copy and Move files 
+- :information_source: Basic features likes Create, Delete, Modify, View, Quick Preview, Download, Copy and Move files 
 - :arrow_double_up: Ajax Upload, Ability to drag & drop, upload from URL, multiple files upload with file extensions filter 
 - :file_folder: Ability to create folders and files
 - :gift: Ability to compress, extract files (`zip`, `tar`)

diff --git a/tinyfilemanager.php b/tinyfilemanager.php
@@ -3,13 +3,13 @@
 $CONFIG = '{"lang":"en","error_reporting":false,"show_hidden":false,"hide_Cols":false,"calc_folder":false}';
 
 /**
- * H3K | Tiny File Manager V2.4.0
+ * H3K | Tiny File Manager V2.4.1
  * CCP Programmers | [email protected]
  * https://tinyfilemanager.github.io
  */
 
 //TFM version
-define('VERSION', '2.4.0');
+define('VERSION', '2.4.1');
 
 //Application Title
 define('APP_TITLE', 'Tiny File Manager');
@@ -413,6 +413,14 @@
         fclose($fd);
         die(true);
     }
+
+    //search : get list of files from the current folder
+    if(isset($_POST['type']) && $_POST['type']=="search") {
+        $dir = FM_ROOT_PATH;
+        $response = scan($_POST['path'], $_POST['content']);
+        echo json_encode($response);
+        exit();
+    }
 
     // backup files
     if (isset($_POST['type']) && $_POST['type'] == "backup") {
@@ -789,27 +797,50 @@ function get_file_path () {
     $isFileAllowed = ($allowed) ? in_array($ext, $allowed) : true;
 
     $targetPath = $path . $ds;
-    $fullPath = $path . '/' . $_REQUEST['fullpath'];
-    $folder = substr($fullPath, 0, strrpos($fullPath, "/"));
+    if ( is_writable($targetPath) ) {
+        $fullPath = $path . '/' . $_REQUEST['fullpath'];
+        $folder = substr($fullPath, 0, strrpos($fullPath, "/"));
 
-    if(file_exists ($fullPath) && !$override_file_name) {
-        $ext_1 = $ext ? '.'.$ext : '';
-        $fullPath = str_replace($ext_1, '', $fullPath) .'_'. date('ymdHis'). $ext_1;
-    }
+        if(file_exists ($fullPath) && !$override_file_name) {
+            $ext_1 = $ext ? '.'.$ext : '';
+            $fullPath = str_replace($ext_1, '', $fullPath) .'_'. date('ymdHis'). $ext_1;
+        }
 
-    if (!is_dir($folder)) {
-        $old = umask(0);
-        mkdir($folder, 0777, true);
-        umask($old);
-    }
+        if (!is_dir($folder)) {
+            $old = umask(0);
+            mkdir($folder, 0777, true);
+            umask($old);
+        }
 
-    if (empty($f['file']['error']) && !empty($tmp_name) && $tmp_name != 'none' && $isFileAllowed) {
-        if (move_uploaded_file($tmp_name, $fullPath)) {
-            die('Successfully uploaded');
-        } else {
-            die(sprintf('Error while uploading files. Uploaded files: %s', $uploads));
+        if (empty($f['file']['error']) && !empty($tmp_name) && $tmp_name != 'none' && $isFileAllowed) {
+            if (move_uploaded_file($tmp_name, $fullPath)) {
+                // Be sure that the file has been uploaded
+                if ( file_exists($fullPath) ) {
+                    $response = array (
+                        'status'    => 'success',
+                        'info' => "file upload successful"
+                    );
+                } else {
+                    $response = array (
+                        'status' => 'error',
+                        'info'   => 'Couldn\'t upload the requested file.'
+                    );
+                }
+            } else {
+                $response = array (
+                    'status'    => 'error',
+                    'info'      => "Error while uploading files. Uploaded files $uploads",
+                );
+            }
         }
+    } else {
+        $response = array (
+            'status' => 'error',
+            'info'   => 'The specified folder for upload isn\'t writeable.'
+        );
     }
+    // Return the response
+    echo json_encode($response);
     exit();
 }
 
@@ -1114,7 +1145,10 @@ function getUploadExt() {
                         toast('Error: Server Timeout');
                     });
                 }).on("success", function (res) {
-                    console.log('Upload Status >> ', res.status);
+                    let _response = JSON.parse(res.xhr.response);
+                    if(_response.status == "error") {
+                        toast(_response.info);
+                    }
                 }).on("error", function(file, response) {
                     toast(response);
                 });
@@ -1351,7 +1385,7 @@ function getChecked($conf, $val, $txt) {
                     <div class="col-xs-12 col-sm-6">
                         <div class="card">
                             <ul class="list-group list-group-flush">
-                                <li class="list-group-item"><a href="https://tinyfilemanager.github.io/docs/" target="_blank"><i class="fa fa-question-circle"></i> <?php echo lng('Help Documents') ?> </a> </li>
+                                <li class="list-group-item"><a href="https://github.com/prasathmani/tinyfilemanager/wiki" target="_blank"><i class="fa fa-question-circle"></i> <?php echo lng('Help Documents') ?> </a> </li>
                                 <li class="list-group-item"><a href="https://github.com/prasathmani/tinyfilemanager/issues" target="_blank"><i class="fa fa-bug"></i> <?php echo lng('Report Issue') ?></a></li>
                                 <li class="list-group-item"><a href="javascript:latest_release_info('<?php echo VERSION; ?>');"><i class="fa fa-link"> </i> <?php echo lng('Check Latest Version') ?></a></li>
                                 <?php if(!FM_READONLY) { ?>
@@ -1870,12 +1904,19 @@ class="edit-file"><i class="fa fa-pencil-square-o"></i> <?php echo lng('Advanced
                             <label class="custom-control-label" for="<?php echo $ik ?>"></label>
                         </div>
                         </td><?php endif; ?>
-                    <td class="file-name-col">
-                        <div class="filename"><a href="<?php echo $filelink ?>" title="File info"><i class="<?php echo $img ?>"></i> <?php echo fm_convert_win($f) ?>
-                            </a><?php echo($is_link ? ' &rarr; <i>' . readlink($path . '/' . $f) . '</i>' : '') ?></div>
-                        <?php if ($num_files < 500 && in_array(strtolower(pathinfo($f, PATHINFO_EXTENSION)), array('gif', 'jpg', 'jpeg', 'png', 'bmp', 'ico', 'svg'))): ?>
-                            <img src="<?php echo fm_enc(FM_ROOT_URL . (FM_PATH != '' ? '/' . FM_PATH : '') . '/' . $f) ?>" alt="" class="live-preview-img">
-                        <?php endif; ?>
+                    <td>
+                        <div class="filename"> 
+                        <?php
+                           if (in_array(strtolower(pathinfo($f, PATHINFO_EXTENSION)), array('gif', 'jpg', 'jpeg', 'png', 'bmp', 'ico', 'svg'))): ?>
+                                <?php $imagePreview = fm_enc(FM_ROOT_URL . (FM_PATH != '' ? '/' . FM_PATH : '') . '/' . $f); ?>
+                                <a href="<?php echo $filelink ?>" data-preview-image="<?php echo $imagePreview ?>" title="<?php echo $f ?>">
+                           <?php else: ?>
+                                <a href="<?php echo $filelink ?>" title="<?php echo $f ?>">
+                            <?php endif; ?>
+                                    <i class="<?php echo $img ?>"></i> <?php echo fm_convert_win($f) ?>
+                                </a>
+                                <?php echo($is_link ? ' &rarr; <i>' . readlink($path . '/' . $f) . '</i>' : '') ?>
+                        </div>
                     </td>
                     <td><span title="<?php printf('%s bytes', $filesize_raw) ?>">
                         <?php echo $filesize; ?>
@@ -2677,7 +2718,7 @@ function fm_get_image_exts()
  */
 function fm_get_video_exts()
 {
-    return array('webm', 'mp4', 'm4v', 'ogm', 'ogv', 'mov', 'mkv');
+    return array('avi', 'webm', 'wmv', 'mp4', 'm4v', 'ogm', 'ogv', 'mov', 'mkv');
 }
 
 /**
@@ -2742,6 +2783,31 @@ function fm_get_onlineViewer_exts()
     return array('doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'ai', 'psd', 'dxf', 'xps', 'rar', 'odt', 'ods');
 }
 
+/**
+ * This function scans the files and folder recursively, and return matching files
+ * @param string $dir
+ * @return json
+ */
+ function scan($dir, $filter = '') {
+    $path = FM_ROOT_PATH.'/'.$dir;
+    $ite = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path));
+    $rii = new RegexIterator($ite, "/(".$filter.")/i");
+
+    $files = array(); 
+    foreach ($rii as $file) {
+        if (!$file->isDir()) {
+            $fileName = $file->getFilename();
+            $location = str_replace(FM_ROOT_PATH, '', $file->getPath());
+            $files[] = array(
+                    "name" => $fileName,
+                    "type" => "file",
+                    "path" => $location,
+                );           
+        }
+    }
+    return $files;
+}
+
 /**
  * Class to work with zip files (using ZipArchive)
  */
@@ -3047,8 +3113,11 @@ function fm_show_nav_path($path)
                     <li class="nav-item mr-2">
                         <div class="input-group input-group-sm mr-1" style="margin-top:4px;">
                             <input type="text" class="form-control" placeholder="<?php echo lng('Search') ?>" aria-label="<?php echo lng('Search') ?>" aria-describedby="search-addon2" id="search-addon">
-                            <div class="input-group-append">
-                                <span class="input-group-text" id="search-addon2"><i class="fa fa-search"></i></span>
+                            <div class="input-group-append btn-group">
+                                <span class="input-group-text dropdown-toggle" id="search-addon2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+                                  <div class="dropdown-menu dropdown-menu-right">
+                                    <a class="dropdown-item" href="<?php echo $path2 = $path ? $path : '.'; ?>" id="js-search-modal" data-toggle="modal" data-target="#searchModal">Advanced Search</a>
+                                  </div>
                             </div>
                         </div>
                     </li>
@@ -3309,6 +3378,11 @@ function fm_show_header()
         @keyframes lds-facebook { 0% { top:6px;height:51px }
         100%,50% { top:19px;height:26px }
         }
+        ul#search-wrapper { padding-left: 0;border: 1px solid #ecececcc; } ul#search-wrapper li { list-style: none; padding: 5px;border-bottom: 1px solid #ecececcc; }
+        ul#search-wrapper li:nth-child(odd){ background: #f9f9f9cc;}
+        .c-preview-img {
+            max-width: 300px;
+        }
     </style>
 </head>
 <body class="<?php echo $isStickyNavBar; ?>">
@@ -3349,6 +3423,33 @@ function fm_show_header()
     </div>
 
     <!-- Modal -->
+    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title col-10" id="searchModalLabel">
+                <div class="input-group input-group">
+                    <input type="text" class="form-control" placeholder="<?php echo lng('Search') ?> a files" aria-label="<?php echo lng('Search') ?>" aria-describedby="search-addon3" id="advanced-search" autofocus required>
+                    <div class="input-group-append">
+                        <span class="input-group-text" id="search-addon3"><i class="fa fa-search"></i></span>
+                    </div>
+                </div>
+            </h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form action="" method="post">
+                <div class="lds-facebook"><div></div><div></div><div></div></div>
+                <ul id="search-wrapper">
+                    <p class="m-2">Search file in folder and subfolders...</p>
+                </ul>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
     <script type="text/html" id="js-tpl-modal">
         <div class="modal fade" id="js-ModalCenter-<%this.id%>" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered" role="document">
@@ -3497,6 +3598,45 @@ function upload_from_url($this) {
             }
         }); return false;
     }
+    //Search template
+    function search_template(data) {
+        var response = "";
+        $.each(data, function (key, val) {
+            response += `<li><a href="?p=${val.path}&view=${val.name}">${val.path}/${val.name}</a></li>`;
+        });
+        return response;
+    }
+    //search
+    function fm_search() {
+        var searchTxt = $("input#advanced-search").val(), searchWrapper = $("ul#search-wrapper"), path = $("#js-search-modal").attr("href"), _html = "", $loader = $("div.lds-facebook");
+        if(!!searchTxt && searchTxt.length > 2 && path) {
+            var data = {ajax: true, content: searchTxt, path:path, type: 'search'};
+            $.ajax({
+                type: "POST",
+                url: window.location,
+                data: data,
+                beforeSend: function() {
+                    searchWrapper.html('');
+                    $loader.addClass('show-me');
+                },
+                success: function(data){
+                    $loader.removeClass('show-me');
+                    data = JSON.parse(data);
+                    if(data && data.length) {
+                        _html = search_template(data);
+                        searchWrapper.html(_html);
+                    } else { searchWrapper.html('<p class="m-2">No result found!<p>'); }
+                },
+                error: function(xhr) { $loader.removeClass('show-me'); searchWrapper.html('<p class="m-2">ERROR: Try again later!</p>'); },
+                failure: function(mes) { $loader.removeClass('show-me'); searchWrapper.html('<p class="m-2">ERROR: Try again later!</p>');}
+            });
+        } else { searchWrapper.html("OOPS: minimum 3 characters required!"); }
+    }
+
+    //on mouse hover image preview
+    !function(s){s.previewImage=function(e){var o=s(document),t=".previewImage",a=s.extend({xOffset:20,yOffset:-20,fadeIn:"fast",css:{padding:"5px",border:"1px solid #cccccc","background-color":"#fff"},eventSelector:"[data-preview-image]",dataKey:"previewImage",overlayId:"preview-image-plugin-overlay"},e);return o.off(t),o.on("mouseover"+t,a.eventSelector,function(e){s("p#"+a.overlayId).remove();var o=s("<p>").attr("id",a.overlayId).css("position","absolute").css("display","none").append(s('<img class="c-preview-img">').attr("src",s(this).data(a.dataKey)));a.css&&o.css(a.css),s("body").append(o),o.css("top",e.pageY+a.yOffset+"px").css("left",e.pageX+a.xOffset+"px").fadeIn(a.fadeIn)}),o.on("mouseout"+t,a.eventSelector,function(){s("#"+a.overlayId).remove()}),o.on("mousemove"+t,a.eventSelector,function(e){s("#"+a.overlayId).css("top",e.pageY+a.yOffset+"px").css("left",e.pageX+a.xOffset+"px")}),this},s.previewImage()}(jQuery);
+
+
     // Dom Ready Event
     $(document).ready( function () {
         //load config
@@ -3507,9 +3647,14 @@ function upload_from_url($this) {
             _targets = (tableLng && tableLng == 7 ) ? [0, 4,5,6] : tableLng == 5 ? [0,4] : [3],
             mainTable = $('#main-table').DataTable({"paging":   false, "info":     false, "columnDefs": [{"targets": _targets, "orderable": false}]
         });
-        $('#search-addon').on( 'keyup', function () { //Search using custom input box
+        //search
+        $('#search-addon').on( 'keyup', function () {
             mainTable.search( this.value ).draw();
         });
+        $("input#advanced-search").on('keyup', function (e) {
+            if (e.keyCode === 13) { fm_search(); }
+        });
+        $('#search-addon3').on( 'click', function () { fm_search(); });
         //upload nav tabs
         $(".fm-upload-wrapper .card-header-tabs").on("click", 'a', function(e){
             e.preventDefault();let target=$(this).data('target');
@@ -3657,10 +3802,10 @@ function lng($txt) {
     $tr['en']['Settings']       = 'Settings';               $tr['en']['Language']           = 'Language';
     $tr['en']['MemoryUsed']     = 'Memory used';            $tr['en']['PartitionSize']      = 'Partition size';
     $tr['en']['ErrorReporting'] = 'Error Reporting';        $tr['en']['ShowHiddenFiles']    = 'Show Hidden Files';
-    $tr['en']['Full size'] 		= 'Full size';				$tr['en']['Help'] 				= 'Help';
-    $tr['en']['Free of'] 		= 'Free of';				$tr['en']['Preview'] 			= 'Preview';
-	$tr['en']['Help Documents'] = 'Help Documents';			$tr['en']['Report Issue']		= 'Report Issue';
-    $tr['en']['Generate'] 		= 'Generate';				$tr['en']['FullSize']           = 'Full Size';
+    $tr['en']['Full size']      = 'Full size';              $tr['en']['Help']               = 'Help';
+    $tr['en']['Free of']        = 'Free of';                $tr['en']['Preview']            = 'Preview';
+    $tr['en']['Help Documents'] = 'Help Documents';         $tr['en']['Report Issue']       = 'Report Issue';
+    $tr['en']['Generate']       = 'Generate';               $tr['en']['FullSize']           = 'Full Size';
     $tr['en']['FreeOf']         = 'free of';                $tr['en']['CalculateFolderSize']= 'Calculate folder size';
     $tr['en']['ProcessID']      = 'Process ID';
     $tr['en']['HideColumns']    = 'Hide Perms/Owner columns';

diff --git a/translation.json b/translation.json
@@ -1,6 +1,6 @@
 {
   "appName": "Tiny File Manager",
-  "version": "2.3.8",
+  "version": "2.4.1",
   "language": [
     {
       "name": "فارسی",