fix path issues for cross platform

Author: mominur-helios

home/templatetags/file_extension.py

@@ -12,4 +12,8 @@ def file_extension(value):
 
 @register.filter
 def encoded_file_path(path):
-    return path.replace(os.sep, '%slash%')
+    return path.replace('/', '%slash%')
+
+@register.filter
+def encoded_path(path):
+    return path.replace('\\', '/')

home/views.py

@@ -34,12 +34,12 @@ def get_files_from_directory(directory_path):
 
 
 def get_breadcrumbs(request):
-    path_components = [component for component in request.path.split(os.sep) if component]
+    path_components = [component for component in request.path.split("/") if component]
     breadcrumbs = []
     url = ''
 
     for component in path_components:
-        url += f'{os.sep}{component}'
+        url += f'/{component}'
         if component == "file-manager":
             component = "media"
         breadcrumbs.append({'name': component, 'url': url})

templates/includes/subdirectories.html

@@ -1,3 +1,5 @@
+{% load static file_extension %}
+
 {% for subdirectory in directory.directories %}
     {% if subdirectory.directories %}
         <li 
@@ -11,7 +13,7 @@
                 role="button" 
                 aria-expanded="false" 
                 aria-controls="collapse{{subdirectory.id}}"
-                onclick="window.location.href = '{% url 'file_manager' subdirectory.path|urlencode %}';"
+                onclick="window.location.href = '{% url 'file_manager' subdirectory.path|encoded_path %}';"
             >
                 {{ subdirectory.name }}
             </a>
@@ -23,7 +25,7 @@
             class="ms-{{depth}} collapse show"
         >
             <i class="fa-solid fa-folder"></i>
-            <a href="{% url 'file_manager' subdirectory.path|urlencode %}">{{ subdirectory.name }}</a>
+            <a href="{% url 'file_manager' subdirectory.path|encoded_path %}">{{ subdirectory.name }}</a>
         </li>
     {% endif %}
 {% endfor %}

templates/pages/file-manager.html

@@ -48,7 +48,7 @@
               role="button" 
               aria-expanded="false"
               aria-controls="collapse{{directory.id}}"
-              onclick="window.location.href = '{% url 'file_manager' directory.path|urlencode %}';"
+              onclick="window.location.href = '{% url 'file_manager' directory.path|encoded_path %}';"
             >
               {{ directory.name }}
             </a>
@@ -57,7 +57,7 @@
         {% else %}
           <li>
             <i class="fa-solid fa-folder"></i>
-            <a href="{% url 'file_manager' directory.path|urlencode %}">{{ directory.name }}</a>
+            <a href="{% url 'file_manager' directory.path|encoded_path %}">{{ directory.name }}</a>
           </li>
           {% endif %}
         {% endfor %}
@@ -75,6 +75,7 @@
         </form>
       </div>
       {% if files %}
+        {{files|length|json_script:"files-count"}}
         <div class="table-responsive">
           <table class="table">
             <tr>
@@ -92,12 +93,6 @@
                     <i title="View" class="fa-solid fa-eye text-primary"></i>
                   </span>
                   <div class="dot-separator mx-2"></div>
-                  <span>
-                    <a href="{% url 'download_file' file.file|encoded_file_path %}">
-                      <i title="Download" class="fa-solid fa-download text-success"></i>
-                    </a>
-                  </span>
-                  <div class="dot-separator mx-2"></div>
                   <span data-bs-toggle="modal" data-bs-target="#delete-{{forloop.counter}}">
                     <i title="Delete" class="fa-solid fa-trash text-danger"></i>
                   </span>
@@ -111,7 +106,12 @@
                 <div class="modal-content">
                   <div class="modal-header">
                     <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ file.filename }}</h1>
-                    <div class="" data-bs-dismiss="modal" aria-label="Close">
+                    <span>
+                      <a href="{% url 'download_file' file.file|encoded_file_path %}">
+                        <i title="Download" class="fa-solid fa-download text-success fs-4"></i>
+                      </a>
+                    </span>
+                    <div class="" id="modal-close-btn-{{forloop.counter}}" data-bs-dismiss="modal" aria-label="Close">
                       <i class="fa-solid fa-circle-xmark fs-5"></i>
                     </div>
                   </div>
@@ -164,6 +164,16 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Delete File</h1>
   function submitForm() {
     document.getElementById("upload-file").submit();
   }
+  
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' || event.key === 'Esc' || event.key === 27) {
+      let files = document.getElementById('files-count').textContent;
+      for (let i = 1; i <= files; i++) {
+        let closeButtonElements = document.getElementById(`modal-close-btn-${i}`);
+        closeButtonElements.click();
+      }
+    }
+  })
 </script>
 
 {% endblock extrascripts %}