Sindbad~EG File Manager

{% extends 'layout.html' %}
{% block title %}Index{% endblock %}
{% block content %}
<style>
        #drop-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
        }
         #drop-area.highlight {
            border-color: #007bff; /* Change to your preferred highlight color */
            background-color: #f0f8ff; /* Change to your preferred highlight background color */
        }
        .progress-containers {
            display: none;
            margin-top: 10px;
        }

        .progress {
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-bar {
            width: 0;
            height: 100%;
            background-color: #007bff; /* Change to your preferred progress bar color */
            transition: width 0.3s;
        }

        .file-info {
            margin-top: 5px;
        }

        .file-status {
            float: right;
            color:darkblue;
        }
    </style>

<div class="container bg-white mt-5">
  {% if back_folder or folder_path %}
     <a href="{{ url_for('dropbox.index', path=back_folder) }}"><i class="fa-solid fa-arrow-left"></i> {{ back_folder or 'Main' }}</a> 
  {% endif %}
  <div class="row mb-3"> 
    <div class="col-md-6">
     
     <h3 class="text-dark">{{ folder_path or 'Main'}}
      <button  id="open-dropbox-button"  type="button" class="btn btn-link">Open Dropbox</button>
     </h3>

    </div>
    <div class="col-md-6 text-end">
      <form id="SearchForm" action="#">
      <div class="input-group float-right">
        <input type="text" class="form-control" name="search_text" id="search_text" placeholder="Search Folder or File here.." aria-label="Search Folder or File here.." aria-describedby="basic-addon2" required>
        
        <div>
          <button class="btn btn-outline-secondary" onclick="ClearSearch()" >X</button>
          <!-- <a class="btn btn-outline-danger" href="#" >Clear</a> -->
           <input type="hidden" id="folder-path-input" value="{{ folder_path }}">
          
        </div>
      </div>
      </form>
      
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col">
      <h5>Upload Files to Dropbox</h5>
        <div id="drop-area">
          Drop files here or Click here to upload
           <input type="file" id="file-input"  multiple style="display: none;">
        </div>
        <div class="progress-containers">
          <div class="row">
            <div class="col text-end">
              <button class="btn btn-outline-danger" type="button" onclick="hideProgress()">X</button>
            </div>
          </div>
            <!-- <div class="progress">
                <div class="progress-bar" role="progressbar"></div>
            </div>
            <div class="file-info">Uploading: <span class="file-name"></span></div> -->
        </div>

 <!--    <form action="{{ url_for('dropbox.upload_files',folder_path=folder_path) }}" method="POST" enctype="multipart/form-data">
        <input type="file" name="files[]"  multiple required>
        <button class="btn btn-warning" type="submit">Upload</button>
    </form> -->
    </div>

  </div>
  <hr>

  <h5 class="mb-3">Folders : <button class="btn btn-outline-dark btn-sm" onclick="popupNewFolder()" title="Add new Folder"><i class="fa-regular fa-circle-plus mr-2"></i> Add new Folder</button> </h5>
      <div id="subfolders" class="table-responsive">
        {% include 'dropbox/subfolders_table.html' %}
      </div>
    <hr>
  
  
    
    
    <div id="files_table" class="table-responsive">
      {% include 'dropbox/files_table.html' %}
    </div>
  </div>
  </div>
</div>


    <!-- Modal -->
    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">File Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <iframe id="previewFrame" frameborder="0" width="100%" height="500"></iframe>
                </div>
            </div>
        </div>
    </div>


     <div class="modal fade" id="newFolderModal" tabindex="-1" aria-labelledby="newFolderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="newFolderModalLabel">Create Folder</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <form action="{{ url_for('dropbox.create_folder',folder_path=folder_path) }}" method="post">
                      <label for="folder_name">Folder Name:</label>
                      <input type="text" id="folder_name" name="folder_name" class="form-control mb-2" required>
                      <button type="submit" class="btn btn-primary">Create</button>
                  </form>
                </div>
            </div>
        </div>
    </div>



{% endblock %}
{% block script %}
<script>

  var folder_path =  '{{ folder_path}}'


  $(function() {
      // loadThumbnail()
       $('#open-dropbox-button').click(function() {
                var folderPath = $('#folder-path-input').val();
                $.ajax({
                    url: '/open_dropbox_folder/' + encodeURIComponent(folderPath),
                    type: 'GET',
                    success: function(data) {
                        window.open(data, '_blank');
                    }
                });
            
        });

       
              
  });


function hideProgress() {
    $(".progress-containers").hide()
  }  


function popupNewFolder() {
  $("#newFolderModal").modal('show');  
}


function get_files_table() {
    $.ajax({
          type: 'GET', 
          url: '/get_file_table/'+encodeURIComponent(folder_path), 
          data:{}, 
          dataType: 'html',
          success: function(data){
            if(data){
              $("#files_table").html(data)
            }
          },
          // error: function(XMLHttpRequest, textStatus, errorThrown) {
          error: function(xhr, status, error) {
            console.log(xhr.responseText)
          } 
                                              
    }); 
}


function loadThumbnail() {
    $(".thumbnail" ).each(function() {
          var img = $(this);
          var file_path =  img.attr("data-path");

          if (file_path) {
            $.ajax({
                url: '/thumbnail/' + encodeURIComponent(file_path),
                type: 'GET',
                dataType: 'text',
                success: function(data) {
                  if(data)
                  {
                    img.show()
                    img.attr('src',`data:image/png;base64,${data}`);
                  }
                  else
                  {
                    img.hide() 
                  }
                  
                }
            });
          }

    });
}



function previewModal(file_path) {
      event.preventDefault();
      
      if (file_path) {
        $.ajax({
            url: '/view_file/' + encodeURIComponent(file_path),
            type: 'GET',
            success: function(data) {
              if(data)
              {
                // $('#previewFrame').attr('src', data);  
                // $("#previewModal").modal('show');  
                window.open(data, '_blank');
              }
              
            }
        });
      }

  }  


function downloadFile(file_path) {
      event.preventDefault();
      
      if (file_path) {
        $.ajax({
            url: '/download_file/' + encodeURIComponent(file_path),
            type: 'GET',
            dataType: 'json',
            success: function(data) {
              if(data.status == 1)
              {
                window.open(data.url, '_blank');
              }
              else
              {
                  alert(data.msg)
              }
              
            }
        });
      }

  }  



function getThumbnails() {
  $( ".thumbnail" ).each(function( index ) {
        var file_path = $(this).attr('data-path')
        var thumbnail_container = $(this);
        $.ajax({
          type: 'GET', 
          url: '/thumbnail/'+file_path, 
          data:{}, 
          dataType: 'text',
          success: function(data){
            if(data){
              thumbnail_container.attr('src','data:image/jpeg;base64,' + data)
            }
          },
          // error: function(XMLHttpRequest, textStatus, errorThrown) {
          error: function(xhr, status, error) {
            console.log(xhr.responseText)
          } 
                                              
        }); 
  });

  
}

function ClearSearch() {
   $("#search_text").val('') 
   $("#search_text").keyup()
}


$(document).ready(function(){
  $("#search_text").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    
    $("#search_subfolders").children().each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    })

    $("#search_files").children().each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    })


  });
});



  
</script>


<script type="text/javascript">
  var final_index = 0;
    $(document).ready(function() {
            var dropArea = document.getElementById('drop-area');
            var fileInput = document.getElementById('file-input');

            var progressContainers = document.querySelector('.progress-containers');
            // var progressBar = document.querySelector('.progress-bar');
            // var fileInfo = document.querySelector('.file-info');
            // var fileNameSpan = document.querySelector('.file-name');


            // Prevent default drag behaviors
            dropArea.addEventListener('dragenter', preventDefaults, false);
            dropArea.addEventListener('dragleave', preventDefaults, false);
            dropArea.addEventListener('dragover', preventDefaults, false);
            dropArea.addEventListener('drop', preventDefaults, false);

            // Highlight the drop area when a file is dragged over
            dropArea.addEventListener('dragenter', highlight, false);
            dropArea.addEventListener('dragover', highlight, false);

            // Unhighlight the drop area when a file is dragged out
            dropArea.addEventListener('dragleave', unhighlight, false);
            dropArea.addEventListener('drop', unhighlight, false);

            // Handle the dropped files
            dropArea.addEventListener('drop', handleDrop, false);

            dropArea.addEventListener('click', function() {
                fileInput.click(); // Trigger file input click
            });

            fileInput.addEventListener('change', function(event) {
                var files = event.target.files;
                handleFiles(files);
            });

            function preventDefaults(event) {
                event.preventDefault();
                event.stopPropagation();
            }

            function highlight(event) {
                dropArea.classList.add('highlight');
            }

            function unhighlight(event) {
                dropArea.classList.remove('highlight');
            }

            function handleDrop(event) {
                var files = event.dataTransfer.files;
                handleFiles(files);
            }


            function createProgressContainer(file,index) {
               var progressContainer = document.createElement('div');
                progressContainer.className = `progress-container progress-container-${index}`;
                progressContainer.innerHTML = `
                    <div class="progress progress-${index}">
                        <div class="progress-bar progress-bar-${index}" role="progressbar"></div>
                    </div>
                    <div class="file-info">Uploading: <span class="file-name">${file.name}</span>
                    <span class="file-status">Loading..</span></div>
                `;
                progressContainers.appendChild(progressContainer);
            }

            function handleFiles(files) {
                for (var i = 0; i < files.length; i++) {
                    final_index = final_index+(i==0?1:i);
                    createProgressContainer(files[i],final_index)
                    upload(files[i],final_index)
                }

                progressContainers.style.display = 'block'; // Show the progress container

                
            }

            function upload(file,index) {
              var formData = new FormData();
              formData.append('file', file);
              var progressBar = $('.progress-bar-'+index)
              $.ajax({
                    url: '/upload_file/'+encodeURIComponent(folder_path),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(event) {
                            if (event.lengthComputable) {
                                var percent = (event.loaded / event.total) * 100;
                                progressBar.css('width', percent + '%');
                                // document.querySelector('.progress-${file.name}')..textContent = files[0].name; // Display filename
                            }
                        }, false);
                        return xhr;
                    },
                   success: function(data) {
                      if (data.status == 1) {
                        $('.progress-container-'+index+' .file-status').html('Completed!')
                        $('.progress-container-'+index+' .file-status').css('color','green')
                        progressBar.css('background-color','green')

                        get_files_table()
                      }
                      else if (data.status == 2) {
                        $('.progress-container-'+index+' .file-status').html('File Already Exists!')
                        $('.progress-container-'+index+' .file-status').css('color','orange')
                        progressBar.css('background-color','orange')
                      }
                      else
                      {
                        $('.progress-container-'+index+' .file-status').html('Error!')
                        $('.progress-container-'+index+' .file-status').css('color','red')
                        progressBar.css('background-color','red')
                      }
                        // progressContainer.style.display = 'none'; // Hide the progress container
                        // progressBar.style.width = '0'; // Reset progress bar width
                        // fileNameSpan.textContent = ''; // Clear filename
                        // alert('Files uploaded successfully to Dropbox!');
                    },
                    error: function() {
                        $('.progress-container-'+index+' .file-status').html('Error!')
                        $('.progress-container-'+index+' .file-status').css('color','red')
                        progressBar.css('background-color','red')
                        // progressContainer.style.display = 'none'; // Hide the progress container
                        // progressBar.style.width = '0'; // Reset progress bar width
                        // fileNameSpan.textContent = ''; // Clear filename
                        // alert('An error occurred during upload.');
                    }
                });
            }

        });
</script>

{% endblock %}