How do i browse folder on server for text editing?

Hello,

Short’ll try to explain short, sorry

I’m trying to make a browse to folder page to add images or upload images for web text editor
With bootstrap, there will be folder listing area on the left, on the right, pictures are listed
When I click on one of the pictures listed it adds it into the editor. no problem, it works

This is what I can’t do
folder and subfolder listing in left column
-images (default selected folder)
sub-folder
sub-folder
-images2
sub-folder
sub-folder
When I click on any folder, its images should be listed in the field on the right.

If I can do that first, I’ll try to add other features later
Create new folder in x folder space
Upload new image to x folder
as

I will be glad if you help
Thank you in advance

Here is code example from StackOverflow. Note that when you get a folder’s directory structure it contains a “.” and “…” entry. This must be removed as you see in the example. This is for reading the folder structure, not creating new ones. That is easy to do… Hope this gets you started!

function listFolderFiles($dir){
    $ffs = scandir($dir);

    unset($ffs[array_search('.', $ffs, true)]);
    unset($ffs[array_search('..', $ffs, true)]);

    // prevent empty ordered elements
    if (count($ffs) < 1)
        return;

    echo '<ol>';
    foreach($ffs as $ff){
        echo '<li>'.$ff;
        if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
        echo '</li>';
    }
    echo '</ol>';
}

listFolderFiles('Main Dir');

Thank you for the answer

I tried the code but I just want it to list the directory
I tried something I tried to create it like the picture below


I used form submit post in folder names menu
to send the clicked directory name to the right

Only the option to delete pictures from buttons works
i work for others to work

Directory listing code

      $pathLen = 0;

      function prePad($level)
      {
        $ss = "";

        for ($ii = 0;  $ii < $level;  $ii++)
        {
          if($ii == 0){
          $ss = $ss . "|-";
          }else{
            $ss = $ss . "--";
          }
        }

        return $ss;
      }

      function myScanDir($dir, $level, $rootLen)
      {
        global $pathLen;

        if ($handle = opendir($dir)) {

          $allFiles = array();

          while (false !== ($entry = readdir($handle))) {
            if ($entry != "." && $entry != "..") {
              if (is_dir($dir . "/" . $entry))
              {
                $allFiles[] = "D: " . $dir . "/" . $entry;
              }
              else
              {
                $allFiles[] = "F: " . $dir . "/" . $entry;
              }
            }
          }
          closedir($handle);

          natsort($allFiles);

          foreach($allFiles as $value)
          {
            $displayName = substr($value, $rootLen + 4);
            $fileName    = substr($value, 3);
            $linkName    = str_replace(" ", "", substr($value, $pathLen + 4));
            if (is_dir($fileName)) {
              //echo '<img src="../images/folder.png" /> '.prePad($level) . $linkName . "<br>\n";
              echo '<button type="submit" class="klasor-buton" name="klasor" value="'.$linkName.'/"><img src="../images/klasor.png" /> '.prePad($level) . $linkName . '</button>';
              echo "<br>\n      ";
              myScanDir($fileName, $level + 1, strlen($fileName));
            } else {
              //echo prePad($level) . "<a href=\"" . $linkName . "\" style=\"text-decoration:none;\">" . $displayName . "</a><br>\n";
            }
          }
        }
      }

        $pathLen = strlen($root);

        myScanDir($root, 0, strlen($root));

The code for listing images in the directory

foreach(glob($images."/".$geri_dizin.'*.{jpg,JPG,jpeg,JPEG,png,PNG}',GLOB_BRACE) as $file){
    echo '<div class="img">';
        echo '<img class="image" src="'.$images."/".$geri_dizin.basename($file).'" title="Editöre eklemek için tıkla" onclick="returnFileUrl(\''.$editore_dizin.basename($file).'\')">';
            echo "<br />\n";
            echo '<input type="checkbox" id="secilen" name="secilen[]" value="'.basename($file).'" title="Silmek veya Taşımak için seçin"> <strong>Sil veya Taşı</strong><br />';
        echo basename($file);
    echo '</div>';
}

I would appreciate if you can help those with missing or faulty

Well, you can just use the option to just get dir names when using GLOB like this:

foreach(glob('../images/*', GLOB_ONLYDIR) as $dir) {
    $dirname = basename($dir);
}

Or something similar

I replied yesterday but not now, I think the forum has been restored

How will subdirectories be listed?

I want to create a directory tree menu on the left.

Sample:
For URL: …/images/
For the menu: images
For URL: …/images/sub-folder/
For Menu: (space) “L” arrow icon sub-folder
For URL: …/images/sub-folder/sub-folder2/
For Menu: (space)(space) “L” arrow icon sub-folder2
For URL: …/profile_pictures/
For the menu: profile_pictures
I want to create a nice directory tree menu as

Adem, I posted a long post but it is gone for some reason. I will recap it again…

I have played with the code for this and came up with a working version. One section let’s you display the folders on the left from a directory. I found in my experiments that there are some questions. First, did you make the folders yourself or can users make them?

Also, I found that if there are a lot of folders this makes for a messy display and can become large. I found a way to use pop-out’s for sub-folders that look nice and is completely done in CSS, so no odd code. Does that sound good?

And, lastly, once you select a folder, were you planning on it to load the images on the right side? Or a list of them? Or thumbnails? I came up with an advanced function that let’s you select folders or files. Just have to tweak it a little further so it will work for you. Just need more info on what is displayed on the right side.

Gone for most of the day here, but, will be back in about 8 or 10 hours. And, can finish it up then for you!

Thank you

This will be used in admin panel and create admin folder

Not many folders but one or two folders

Yes, the picture will be uploaded to the folder selected on the left

I did a lot of things by trial and error
folder_tree
I like this folder tree
There are so many folders here for testing purposes, not so many folders in reality
Creating new folder or sub-folder works fine
Deleting the folder or sub-folder and all its contents works fine
Directory renaming works fine

Now I’ll write image deletion and migration code

Folder tree menu creation code

    $root = '../images';

    $iter = new RecursiveIteratorIterator(
        new RecursiveDirectoryIterator($root, RecursiveDirectoryIterator::SKIP_DOTS),
        RecursiveIteratorIterator::SELF_FIRST,
        RecursiveIteratorIterator::CATCH_GET_CHILD // Ignore "Permission denied"
    );

    $paths = array($root);
    foreach ($iter as $path => $dir) {
        if ($dir->isDir()) {
            $paths[] = $path;
        }
    }
      $paths = str_replace('\\', '/', $paths);
      //echo '<pre>' . print_r($paths, true) . '</pre>';

      $i = 1;
      foreach ($paths AS $value){

      $dizinler_array = explode('/',$value);
      $sayi = count($dizinler_array);
      $menu_adi = end($dizinler_array);

        if(isset($_GET['url-folder'])){
        if($_GET['url-folder'] == ''.$value.'/'){
            $active = ' active';
        }else{
            $active = "";
        }
        }else{
        $active = "";
        }

      if($sayi > 3){
        $padding_degeri = $i."0"; 
      echo '<a class="list-group-item list-group-item-action'.$active.'" href="'.$yeniden_get_url.'&url-folder='.$value.'/" ><span style="padding: 0 0 0 '.$padding_degeri.'px;"><i class="fa fa-level-up fa-rotate-90" aria-hidden="true"></i> <img src="../images/klasor.png" style="width: 14px; height: 12px;" /> '.$menu_adi.'</span></a>';
      echo "      \n";
      $i++;
      }else{
      if(empty($_GET['url-folder']) && $menu_adi == 'images'){
      echo '<a class="list-group-item list-group-item-action active" href="'.$yeniden_get_url.'&url-folder='.$value.'/" ><img src="../images/klasor.png" style="width: 14px; height: 12px;" /> '.$menu_adi.'</a>';
      echo "      \n";
      }else{
      echo '<a class="list-group-item list-group-item-action'.$active.'" href="'.$yeniden_get_url.'&url-folder='.$value.'/" ><img src="../images/klasor.png" style="width: 14px; height: 12px;" /> '.$menu_adi.'</a>';
      echo "      \n";            
      }  
      }

      }

        // İşlem butonlara dizin adı ve yolu
        if(isset($_GET['url-folder'])){
          $buton_dizin_yolu = $_GET['url-folder'];
        }else{
          $buton_dizin_yolu = "../images/";
        }

Leaving now for about 10 hours… But, here is a nice CSS pop-out menu. It might be nice for you. I did not get the PHP code into it yet for folders, but, you might like this. It is an entire file, so copy it into a test file and see how it looks. Just uses HTML and CSS and set up for three levels deep.

<!DOCTYPE html>
<html>
<head>
    <title>Left-Side Menu Test</title>
</head>
<body>
<style>
.sidemenu {
    font: bold 16px 'Bitter', sans-serif;
    position: relative;
    width: 220px;
}
/* Top Level Menu */
.sidemenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}
/* Top level list items */
.sidemenu ul li {
    position: relative;
}
/* Top level menu items link style */
.sidemenu ul li a, .sidemenu ul li span {
    display: block;
    position: relative;
    /* background of menu items (default state) */
    background: #008c9e;
    color: white;
    padding: 14px 10px;
    color: #2d2b2b;
    text-decoration: none;
}
.sidemenu ul li a:link, .sidemenu ul li a:visited {
    color: white;
}
/* Top level menu items link style on hover and when active */
.sidemenu ul li:hover > a {
    background: #005f6b;
}
/* Sub ULs style */
.sidemenu ul li ul {
    position: absolute;
    left: -5000px;
    top: 0;
    opacity: 0;
    width: 230px;
    visibility: hidden;
    box-shadow: 2px 2px 5px gray;
    -webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
    transition: opacity .3s, visibility 0s .3s, left 0s .3s;
}
/* First Sub Levels UL style on hover */
.sidemenu ul li:hover > ul {
    visibility: visible;
    left: 100%;
    opacity: 1;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}
/* Sub level Menu list items (alters style from Top level List Items) */
.sidemenu ul li ul li {
    display: list-item;
    float: none;
}
/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
.sidemenu ul li ul li ul {
    top: 0;
    left: 100%;
}
/* Sub Levels link style on hover and when active */
.sidemenu ul ul li:hover > a {
    background: #52616a;
}
/* Sub Levels UL style on hover */
.sidemenu ul ul li:hover > ul {
    left: 100%;
}
/* Sub level menu links style */
.sidemenu ul li ul li a {
    font: normal 14px 'Bitter', sans-serif;
    padding: 10px;
    margin: 0;
    background: #4ea1d3;
    border-right: none;
    border-top-width: 0;
}
/* LIs with a sub UL style */
.sidemenu ul li > a {
    /* add padding to accomodate arrow inside LIs */
    padding-right: 25px;
}
/* LIs with NO sub UL style */
.sidemenu ul li > a:only-child {
    /* undo padding for non submenu LIs */
    padding-right: 10px;
}
/* LIs with a sub UL pseudo class */
.sidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: #FFFFFF;
    top: 40%;
    right: 8px;
}
/* LIs with NO sub UL pseudo class */
.sidemenu ul li > a:only-child:after {
    /* undo arrow for non submenu LIs */
    display: none;
}
/* ####### responsive layout CSS ####### */
@media (max-width: 923px) {
    /* FIRST breaking point
    Last top menu items' sub ULs should drop to the left (instead of right)
    Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting above
    */
    .sidemenu ul li:nth-last-of-type(-n+1) ul li:hover > ul {
        left: -100%;
    }
}
@media (max-width: 500px) {
    /* SECOND breaking point 
    For mobile and screen browser windows
    Get Sub ULs to expand entire width of document and drop down
    Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
    */
    .sidemenu{
        width: 100%;
    }
    .sidemenu ul li > a:after {
        /* add arrow inside LIs */
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        border: 5px solid transparent;
        border-left-color: transparent;
        border-top-color: #fff;
        top: 40%;
        right: 8px;
    }
    .sidemenu ul li {
        position: static;
    }
    .sidemenu ul li ul {
        width: 100%;
        border-top: 2px solid rgba(0,0,0,.6);
        /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
	display: none;
    }
    .sidemenu ul li:hover > ul {
	display: block;
        left: 0 !important;
        top: auto;
        box-shadow: 0 0 12px gray;
    }
}
</style>
<form action="#" method="post">
<div class="sidemenu">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="javascript:vold(0)">Folder 1</a>
            <ul>
                <li><a href="#">Sub Item 1.1</a></li>
                <li><a href="#">Sub Item 1.2</a></li>
                <li><a href="#">Sub Item 1.3</a></li>
                <li><a href="#">Sub Item 1.4</a></li>
                <li><a href="#">Sub Item 1.2</a></li>
                <li><a href="#">Sub Item 1.3</a></li>
                <li><a href="#">Sub Item 1.4</a></li>
            </ul>
        </li>
        <li><a href="javascript:vold(0)">Folder 2</a>
            <ul>
                <li><a href="#">Sub Item 2.1</a></li>
                <li><a href="#">Sub Item 2.2</a></li>
                <li><a href="javascript:vold(0)">Folder 2.3</a>
                    <ul>
                        <li><a href="#">Sub Item 2.3.1</a></li>
                        <li><a href="#">Sub Item 2.3.2</a></li>
                        <li><a href="#">Sub Item 2.3.3</a></li>
                        <li><a href="#">Sub Item 2.3.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Item 2.4</a></li>
                <li><a href="#">Sub Item 2.5</a></li>
                <li><a href="#">Sub Item 2.6</a></li>
                <li><a href="#">Sub Item 2.7</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="javascript:vold(0)">Folder 3</a>
            <ul>
                <li><a href="#">Sub Item 3.1</a></li>
                <li><a href="javascript:vold(0)">Folder 3.2</a>
                    <ul>
                        <li><a href="#">Sub Item 3.2.1</a></li>
                        <li><a href="#">Sub Item 3.2.2</a></li>
                        <li><a href="javascript:vold(0)">Folder 3.2.3</a>
                            <ul>
                                <li><a href="#">Sub Item 3.2.3.1</a></li>
                                <li><a href="#">Sub Item 3.2.3.2</a></li>
                                <li><a href="#">Sub Item 3.2.3.3</a></li>
                                <li><a href="#">Sub Item 3.2.3.4</a></li>
                                <li><a href="#">Sub Item 3.2.3.5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Item 3.2.4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br style="clear: left" />
</div>
</form>
</body>
</html>

Very nice menu format
I will apply this
Thank you

Before trying it my code works as shown in the video below
I think the picture listing I made as an amateur is fine
Do I need this much detail?
No, I tried to see what I can do :grinning:

You site looks very well done! Nice job!

Thank you, amateur job

I wanted to make a folder tree menu shown in the picture below
When I click the directory name, the pictures in the directory will be listed on the right.
When I click on the arrow icon, subdirectories accordion will do the job
2021-04-06 121418

Well, Adem, most people just use < A > tags and point the href to the page, often the same page with a parameter that is the folder name. Then, on the right side when the page loads, it looks for the parameter and uses it to show the thumbnails of the images. That is the easiest way to handle it. Another way would be to use JS and Ajax to load the right-side dynamically. That process is a little more complex, but, not too complicated.

I found such a code,
Now I’m trying to do directory listing with php

echo '<pre>' . print_r($folders_array, true) . '</pre>';    
Array
    (
        [0] => ../images_test
        [1] => ../images_test/deneme
        [2] => ../images_test/deneme/sub-folder
        [3] => ../images_test/deneme/sub-folder/sub-folder4
        [4] => ../images_test/deneme/sub-folder/sub-folder4/sub-folder5
        [5] => ../images_test/deneme/sub-folder/sub-folder4/sub-folder5/sub-folder6
        [6] => ../images_test/sayfa_icerik
        [7] => ../images_test/sayfa_icerik/sub-folder2
        [8] => ../images_test/test_test
        [9] => ../images_test/test_test/sub-folder
        [10] => ../images_test/ZZZZZ
        [11] => ../images_test/ZZZZZ/upload
        [12] => ../images_test/ZZZZZ/upload/sub-upload
        [13] => ../images_test/ZZZZZ/upload/sub-upload/sub-folder-2
        [14] => ../images_test/ZZZZZ/upload/sub-upload/sub-folder-2/move-folder-5
    )

Index array this way

<style>

.toggle-custom {
  position: absolute !important;
  top: 0;
  right: 0;
}
.toggle-custom[aria-expanded='true'] .glyphicon-plus:before {
  content: "\2212";
}

</style>

<nav>
  <ul class="nav">
    <li><a class="list-group-item list-group-item-action active" href="#link1">Link 1</a></li>
    <li><a class="list-group-item list-group-item-action" href="#link2">Link 2</a><a href="#" class="toggle-custom" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
      <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
        <li><a class="list-group-item list-group-item-action" href="#link2-1">&nbsp;Link 2.1</a></li>
        <li><a class="list-group-item list-group-item-action" href="#link2-2">&nbsp;Link 2.2</a></li>
        <li><a class="list-group-item list-group-item-action" href="#link2-3">&nbsp;Link 2.3</a></li>
      </ul>
    </li>
    <li><a class="list-group-item list-group-item-action" href="#link3">Link 3</a></li>
    <li><a class="list-group-item list-group-item-action" href="#link2">Link 4</a><a href="#" class="toggle-custom" id="btn-2" data-toggle="collapse" data-target="#submenu2" aria-expanded="false"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
      <ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-2">
        <li><a class="list-group-item list-group-item-action" href="#link4-1">&nbsp;Link 4.1</a></li>
        <li><a class="list-group-item list-group-item-action" href="#link4-2">&nbsp;Link 4.2</a></li>
        <li><a class="list-group-item list-group-item-action" href="#link4-3">&nbsp;Link 4.3</a></li>
      </ul>
  </ul>
</nav>

Well, that is the display part. How are you planning on making the right-side display the thumbnails?

list-group-item

This tells me that you are using a Bootstrap layout. I like Bootstrap as it saves a lot of time.

So, all you have left to do is parse thru your $folders_array and decode it into the correct < UL > and < LI > mix to create the NAV section. I worked on that awhile ago. It is very tricky to decode it. If you can not figure it out, I can help you. It is hard to process since you need to count the levels deep of each sub-folder. I found a way to count slashes which gives the level number, then, you can adjust the < UL > < LI > as needed. Even that got complicated. Later today, I will take your two examples in the last post and create a working example for you. I will have to take my tests and add a ton of comments so you can understand it. Will do it right after lunch…

Adem, here is a test page for you to try. Just make this one file and run it. You should be able to follow it because I added some comments to make it easier to follow. The logic is quite strange. Mostly because of things you probably have not thought of. When created an unordered-list ( < UL > ), you normally want to skip the root folder in the display and at the end of the folder list, you have to close all the extra UL’s that are open. Some of the commands might be new to you. Counting folder levels can be done simpler by just counting the slashes. And, the str_repeat function is great for adding the last closing < /ul >'s. I am leaving for the evening, but, will check in when I get back to see if you have any questions. It’s just an example, you will have to adjust it to your needs. Good luck!


<?PHP
$folders_array = Array ( "../images_test", "../images_test/deneme", "../images_test/deneme/sub-folder", "../images_test/deneme/sub-folder/sub-folder4", "../images_test/deneme/sub-folder/sub-folder4/sub-folder5", "../images_test/deneme/sub-folder/sub-folder4/sub-folder5/sub-folder6", "../images_test/sayfa_icerik", "../images_test/sayfa_icerik/sub-folder2", "../images_test/test_test", "../images_test/test_test/sub-folder", "../images_test/ZZZZZ", "../images_test/ZZZZZ/upload", "../images_test/ZZZZZ/upload/sub-upload", "../images_test/ZZZZZ/upload/sub-upload/sub-folder-2", "../images_test/ZZZZZ/upload/sub-upload/sub-folder-2/move-folder-5" );
$temp = print_r($folders_array, 1);
echo "<pre>" . $temp . "</pre>";

//  Set up left-menu using array of folders.  Do not need the root address, so skip that one ( In this test, root is "../images_test/"! )
$menu = "";
$level = 0;
$current_level = 1;
foreach($folders_array as $folder) {
    
    //  Get the level of the folder or sub-folder by counting the slashes ( Root is considered level 1 due to the ../ in the example )
    $old_level = $level;
    $level = substr_count($folder, "/");
    
    //  Get positions of all slashes in $folder
    $lastPos = 0;
    $positions = array();
    while (($lastPos = strpos($folder, "/", $lastPos))!== false) {
        $positions[] = $lastPos;
        $lastPos = $lastPos + 1;
    }
    //  Skip ROOT folder
    if (count($positions)>1) {
        //  Get the folder name for this level
        $this_folder = substr($folder, $positions[$level-1]+1);
        if($level<$current_level) {
            //  Level moved up, adjust for it
            $current_level = $level;
            $menu .= str_repeat("</ul>", $old_level-$level) . '<li><a class="list-group-item list-group-item-action" href="111#' . $folder . '">' . $this_folder . '</a></li>';
        } elseif ($level>$current_level) {
            //  Level moved down, adjust for it
            $current_level = $level;
            $menu .= '<ul><li><a class="list-group-item list-group-item-action" href="222#' . $folder . '">' . $this_folder . '</a></li>';
        } else {
            $menu .= '<li><a class="list-group-item list-group-item-action" href="333#' . $folder . '">' . $this_folder . '</a></li>';
        }
    }
}
$menu .= str_repeat("</ul>", $level-1);

//  display the created menu
echo "<nav>".$menu."</nav>";
?>

</body>
</html>

I can’t thank you enough for your help
I was counting slashes too, not the easy way like you, I was doing the beginner long road :grinning:

The HTML code I gave above creates a + - menu as in the picture below.
Ekran görüntüsü 2021-04-08 123734

Ekran görüntüsü 2021-04-08 123407
I’m trying the code you gave, I’ll try to create a menu like in the picture

You are welcome. This is why we are on this help site! Just contributing back to the world.

Good luck with your tests…

I had other work so I write a late reply
I could not reach a positive result in my tests.
No need to exaggerate too much, There will be at most one subdirectory, no need for much details.
I exaggerated myself but gave up :grinning: The first thing I do is enough
Thank you
I’m trying to do another project now, For this, I will open another topic

Sponsor our Newsletter | Privacy Policy | Terms of Service