drag and drop files into folders

public/js/dashboard.js

@@ -30,6 +30,22 @@ function hideUploadProgress() {
   $('#uploadingOverlay').css('display', 'none')
 }
 
+function showMovingProgress() {
+  $('#movingOverlay').css('display', 'block');
+}
+
+function hideMovingProgress() {
+  $('#movingOverlay').css('display', 'none');
+}
+
+function moveFile(fileName, folderName) {
+  console.log(fileName);
+  console.log(folderName);
+  $('#moveCurrentPath').val(fileName.slice(1));
+  $('#moveNewPath').val(folderName + fileName);
+  $('#moveFileForm').submit();
+}
+
 $('#createDir').on('shown', function () {
   $('#newDirInput').focus();
 })

views/dashboard/files.erb

@@ -1,3 +1,16 @@
+<script>
+function moveFileToFolder(event, folderName) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const fullUrl = event.dataTransfer.getData('text/uri-list');
+  const url = new URL(fullUrl);
+  const relativeUrl = url.pathname;
+
+  moveFile(relativeUrl, folderName);
+}
+</script>
+
 <div id="uploadingOverlay" class="uploading-overlay" style="display: none">
   <div class="uploading">
       <p>Uploading, please wait...</p>
@@ -58,7 +71,7 @@
               <div class="overlay"></div>
             </div>
           <% elsif file[:is_directory] %>
-            <div class="html-thumbnail folder fileimagehover" ondrop="moveFileToFolder(event)">
+            <div class="html-thumbnail folder fileimagehover" ondrop="moveFileToFolder(event, '<%= file[:path] %>')" ondragover="event.preventDefault()">
               <div class="folder-icon"></div>
               <div class="overlay"></div>
             </div>
@@ -105,4 +118,4 @@
       <% end %>
     </div>
   </form>
-</div>
+</div>

views/dashboard/index.erb

@@ -112,6 +112,13 @@
         </form>
       </div>
 
+      <form id="moveFileForm" method="post" action="/site_files/rename">
+          <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
+          <input type="hidden" value="<%= @dir %>" name="dir">
+          <input type="hidden" id="moveCurrentPath" name="path">
+          <input type="hidden" id="moveNewPath" name="new_path">
+      </form>
+
 
 <div class="site-actions" style="margin-bottom:25px">
   <% if !current_site.plan_feature(:no_file_restrictions) %>
@@ -170,4 +177,4 @@
   </form>
 </div>
 
-<script src="/js/dashboard.js"><script>
+<script src="/js/dashboard.js"><script>