Merge pull request #12 from app-generator/file-manager

File manager

Author: app-generator

core/settings.py

@@ -171,3 +171,5 @@
 
 LOGIN_REDIRECT_URL = '/'
 EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+
+X_FRAME_OPTIONS = 'SAMEORIGIN'

home/views.py

@@ -41,7 +41,7 @@ def get_breadcrumbs(request):
     for component in path_components:
         url += f'{os.sep}{component}'
         if component == "file-manager":
-            component = "root"
+            component = "media"
         breadcrumbs.append({'name': component, 'url': url})
 
     return breadcrumbs

templates/includes/subdirectories.html

@@ -11,6 +11,7 @@
                 role="button" 
                 aria-expanded="false" 
                 aria-controls="collapse{{subdirectory.id}}"
+                onclick="window.location.href = '{% url 'file_manager' subdirectory.path|urlencode %}';"
             >
                 {{ subdirectory.name }}
             </a>
@@ -22,7 +23,7 @@
             class="ms-{{depth}} collapse show"
         >
             <i class="fa-solid fa-folder"></i>
-            <a href="{% url 'file_manager' subdirectory.path %}">{{ subdirectory.name }}</a>
+            <a href="{% url 'file_manager' subdirectory.path|urlencode %}">{{ subdirectory.name }}</a>
         </li>
     {% endif %}
 {% endfor %}

templates/pages/file-manager.html

@@ -28,7 +28,11 @@
             {% if forloop.last %}
               <li class="breadcrumb-item active" aria-current="page">{{ breadcrumb.name }}</li>
             {% else %}
-              <li class="breadcrumb-item"><a href="{{ breadcrumb.url }}">{{ breadcrumb.name }}</a></li>
+              {% if breadcrumb.name|lower == 'media' %}
+                <li class="breadcrumb-item active" aria-current="page">{{ breadcrumb.name }}</li>
+              {% else %}
+                <li class="breadcrumb-item"><a href="{{ breadcrumb.url }}">{{ breadcrumb.name }}</a></li>
+              {% endif %}
             {% endif %}
           {% endfor %}
         </ol>
@@ -44,6 +48,7 @@
               role="button" 
               aria-expanded="false"
               aria-controls="collapse{{directory.id}}"
+              onclick="window.location.href = '{% url 'file_manager' directory.path|urlencode %}';"
             >
               {{ directory.name }}
             </a>
@@ -52,13 +57,23 @@
         {% else %}
           <li>
             <i class="fa-solid fa-folder"></i>
-            <a href="{% url 'file_manager' directory.path %}">{{ directory.name }}</a>
+            <a href="{% url 'file_manager' directory.path|urlencode %}">{{ directory.name }}</a>
           </li>
           {% endif %}
         {% endfor %}
       </ul>
     </div>
     <div class="col-lg-9 border py-2">
+      <div class="d-flex justify-content-start mb-3">
+        <label for="fileInput">
+          <i class="fa-solid fa-upload text-primary fs-3"></i>
+        </label>
+        <form method="post" action="{% url 'upload_file' %}" id="upload-file" enctype="multipart/form-data">
+          {% csrf_token %}
+          <input type="hidden" name="directory" value="{{ selected_directory }}">
+          <input id="fileInput" class="d-none" onchange="submitForm()" type="file" name="file" required>
+        </form>
+      </div>
       {% if files %}
         <div class="table-responsive">
           <table class="table">
@@ -73,21 +88,9 @@
               <td>{{ file.filename|file_extension|cut:"."|upper }}</td>
               <td>
                 <div class="d-flex align-items-center actions">
-                  {% if file.file|file_extension in ".csv, .txt" %}
-                    <a href="/media/{{ file.file }}">
-                      <i title="View" class="fa-solid fa-eye text-primary"></i>
-                    </a>
-                  {% elif file.file|file_extension == '.pdf' %}
-                    <object data="/media/{{ file.file }}" type="application/pdf">
-                      <a href="/media/{{ file.file }}">
-                        <i title="View" class="fa-solid fa-eye text-primary"></i>
-                      </a>
-                    </object>
-                  {% else %}
-                    <span data-bs-toggle="modal" data-bs-target="#file-{{forloop.counter}}">
-                      <i title="View" class="fa-solid fa-eye text-primary"></i>
-                    </span>
-                  {% endif %}
+                  <span data-bs-toggle="modal" data-bs-target="#file-{{forloop.counter}}">
+                    <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 %}">
@@ -104,7 +107,7 @@
             <!-- Modal -->
             <div class="modal fade" id="file-{{forloop.counter}}" data-bs-backdrop="static" data-bs-keyboard="false"
               tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-              <div class="modal-dialog modal-dialog-centered modal-lg">
+              <div class="modal-dialog modal-dialog-centered modal-xl">
                 <div class="modal-content">
                   <div class="modal-header">
                     <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ file.filename }}</h1>
@@ -114,11 +117,13 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ file.filename }}</h1>
                   </div>
                   <div class="modal-body">
                     {% if file.filename|file_extension in ".jpg, .png, .gif" %}
-                      <img class="w-100" src="/media/{{ file.file }}" alt="df">
+                      <img height="700px" class="w-100" src="/media/{{ file.file }}" alt="df">
                     {% elif file.filename|file_extension in ".mp4, .webm, .ogg" %}
-                      <video class="w-100" height="240" controls>
+                      <video class="w-100" height="700" controls>
                         <source src="/media/{{ file.file }}" type="video/mp4">
                       </video>
+                    {% elif file.filename|file_extension in ".pdf, .txt" %}
+                      <iframe src="/media/{{ file.file }}" width="100%" height="700px"></iframe>
                     {% endif %}
                   </div>
                 </div>