file uploading for dashboard

app.rb

@@ -122,13 +122,13 @@ post '/plan/end' do
   redirect '/plan'  unless current_site.supporter? && !current_site.plan_ended
 
   recaptcha_is_valid = ENV['RACK_ENV'] == 'test' || recaptcha_valid?
-  
+
   if !recaptcha_is_valid
     @error = 'Recaptcha was filled out incorrectly, please try re-entering.'
     @plan_name = get_plan_name current_site.stripe_customer_id
     halt erb :'plan/end'
   end
-  
+
   customer = Stripe::Customer.retrieve current_site.stripe_customer_id
   subscriptions = customer.subscriptions.all
 
@@ -389,33 +389,50 @@ get '/site_files/upload' do
   slim :'site_files/upload'
 end
 
+def file_upload_response(error=nil)
+  http_error_code = 406
+
+  if params[:from_button]
+    if error
+      @error = error
+      halt 200, erb(:'dashboard')
+    else
+      redirect '/dashboard'
+    end
+  else
+    halt http_error_code, error if error
+    halt 200, 'File(s) successfully uploaded.'
+  end
+end
+
 post '/site_files/upload' do
   require_login
   @errors = []
   http_error_code = 406
 
-  if params[:newfile] == '' || params[:newfile].nil?
+  params[:files].each do |file|
-    @errors << 'You must select a file to upload.'
+    if current_site.file_size_too_large? file[:tempfile].size
-    halt http_error_code, 'Did not receive file upload.'
+      file_upload_response "#{file[:filename]} is too large, upload cancelled."
+    end
+
+    if !Site.valid_file_type? file
+      file_upload_response "#{file[:filename]}: file type is not allowed on Neocities, upload cancelled."
+    end
   end
 
-  if current_site.file_size_too_large? params[:newfile][:tempfile].size
+  uploaded_size = params[:files].collect {|f| f[:tempfile].size}.inject{|sum,x| sum + x }
-    @errors << 'File size must be smaller than available space.'
+
-    halt http_error_code, 'File size must be smaller than available space.'
+  if current_site.file_size_too_large? uploaded_size
+    file_upload_response "File(s) do not fit in your available space, upload cancelled."
   end
 
-  unless Site.valid_file_type? params[:newfile]
+  params[:files].each do |file|
-    @errors << 'File must me one of the following: HTML, Text, Image (JPG PNG GIF JPEG SVG), JS, CSS, Markdown.'
+    current_site.store_file Site.sanitize_filename(file[:filename]), file[:tempfile]
-    halt http_error_code, 'File type is not supported.' # slim(:'site_files/new')
   end
 
-  sanitized_filename = params[:newfile][:filename].gsub(/[^a-zA-Z0-9_\-.]/, '')
-
-  current_site.store_file sanitized_filename, params[:newfile][:tempfile]
   current_site.increment_changed_count
 
-  flash[:success] = "Successfully uploaded file #{sanitized_filename}."
+  file_upload_response
-  redirect '/dashboard'
 end
 
 post '/site_files/delete' do

views/dashboard.erb

@@ -1,14 +1,28 @@
-<script type="text/javascript">
+<style>
-  function confirmFileDelete(name) {
+  .dz-default {
-    $('#deleteFileName').html(name);
+    display: none;
-    $('#deleteConfirmModal').modal();
   }
+  .dz-preview {
+    display: none;
+  }
+  .dz-processing {
+    display: none;
+  }
+  .dz-error {
+    display: none;
+  }
+  .dz-image-preview {
+    display: none;
+  }
+</style>
+<!--
+<form action="/site_files/upload" class="dropzone" id="uploads">
+  <input name="csrf_token" type="hidden" value="#{csrf_token}">
+</form>
 
-  function fileDelete() {
+
-    $('#deleteFilenameInput').val($('#deleteFileName').html());
+<div id="upload_status" style="font-size: 16pt"></div>
-    $('#deleteFilenameForm').submit();
+-->
-  }
-</script>
 
 <div class="header-Outro">
   <div class="row content wide" style="padding-top: 10px">
@@ -19,7 +33,7 @@
         <img class="screenshot" src="/site_screenshots/<%= current_site.username %>.jpg">
 	    </fieldset>
       </div>
-    </div> 
+    </div>
 
 	<div class="col col-50">
     <h2 class="eps">My Website</h2>
@@ -28,8 +42,8 @@
 <% if current_site.updated_at %>
 	<li>Last updated <%= current_site.updated_at %></li>
 <% end %>
-	<li>Using <strong><%= current_site.space_percentage_used %>% of your <%= current_site.maximum_space_in_megabytes %> MB</strong> of free space. <% if !current_site.supporter? %>Need more space? <a href="/plan">Become a Supporter</a><% end %></li>
+	<li>Using <strong><%= current_site.space_percentage_used %>% (<%= current_site.used_space_in_megabytes %>MB) of your <%= current_site.maximum_space_in_megabytes %> MB</strong> of free space. <% if !current_site.supporter? %>Need more space? <a href="/plan">Become a Supporter</a><% end %></li>
-	<li><strong><%= current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %></strong> visitors</li>
+	<li><strong><%= current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %></strong> hits</li>
 	</ul>
 	</div>
 
@@ -37,9 +51,9 @@
 </div> <!-- end .header-Outro -->
 
 <main class="content-Base">
-  
+
 <div class="content wide">
-    
+
 <div class="welcome">
   <div class="close-button"></div>
   <h4>Hello! Welcome to your new site.</h4>
@@ -52,53 +66,55 @@
     <div class="actions">
       <a href="/site_files/new_page" class="btn-Action new-Page"><span>New Page</span></a>
       <!--<a href="" class="btn-Action new-Folder"><span>New Folder</span></a>-->
-      <a href="/site_files/upload" class="btn-Action upload"><span>Upload</span></a>
+      <a href="#" class="btn-Action upload" onclick="clickUploadFiles(); return false"><span>Upload</span></a>
     </div>
   </div>
   <div class="list">
-    <div class="upload-Boundary with-instruction"> <!--should remove instruction after at least one new file have been uploaded-->
+    <form action="/site_files/upload" class="dropzone" id="uploads">
-      
+      <div class="dz-message" style="display: none"></div>
-      <% current_site.file_list.each do |file| %>
+      <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
-        <div class="file filehover">
+      <div class="upload-Boundary with-instruction"> <!--should remove instruction after at least one new file have been uploaded-->
-          <% if file.ext.match(/html|htm/) %>
+        <% current_site.file_list.each do |file| %>
-            <div class="html-thumbnail html fileimagehover">
+          <div class="file filehover">
-              <img src="https://neocities.org//site_screenshots/bigpig.jpg">
+            <% if file.ext.match(/html|htm/) %>
-              <div class="overlay"></div>
+              <div class="html-thumbnail html fileimagehover">
-            </div>
+                <img src="https://neocities.org//site_screenshots/bigpig.jpg">
-          <% elsif file.ext.match(/jpg|png|bmp|gif/) %>
+                <div class="overlay"></div>
-            <div class="html-thumbnail image fileimagehover">
+              </div>
-              <img src="https://neocities.org/assets/img/cat-larger.png" style="">
+            <% elsif file.ext.match(/jpg|png|bmp|gif/) %>
-              <div class="overlay"></div>
+              <div class="html-thumbnail image fileimagehover">
-            </div>
+                <img src="https://neocities.org/assets/img/cat-larger.png" style="">
-          <% else %>
+                <div class="overlay"></div>
-            <div class="html-thumbnail misc fileimagehover">
+              </div>
-              <div class="misc-icon"><%= file.ext %></div>
-              <div class="overlay"></div>
-            </div>
-          <% end %>
-          
-          <a class="title">
-            <% if file.filename.length > 15 %>
-              <%= file.filename.slice(0..15) %>&hellip;
             <% else %>
-              <%= file.filename %>
+              <div class="html-thumbnail misc fileimagehover">
+                <div class="misc-icon"><%= file.ext %></div>
+                <div class="overlay"></div>
+              </div>
             <% end %>
-          </a>
+
-          <div class="overlay">
+            <a class="title">
-            <% if file.ext.match(/html|htm|txt|js|css|md/) %>
+              <% if file.filename.length > 15 %>
-              <a href="/site_files/text_editor/<%= file.filename %>"><i class="icon-edit" style="margin-right: 10px" title="Edit"> Edit</i></a>
+                <%= file.filename.slice(0..15) %>&hellip;
-            <% end %>
+              <% else %>
-            <% if file.filename != 'index.html' %>
+                <%= file.filename %>
-              <a href="#" onclick="confirmFileDelete('<%= file.filename %>')"><i class="icon-trash" style="margin-right: 10px" title="Delete"> Delete</i></a>
+              <% end %>
-            <% end %>
+            </a>
-            <a class="link-overlay" href="http://<%= current_site.username %>.neocities.org/<%= file.filename %>" title="View <%= file.filename %>" target="_blank"></a>
+            <div class="overlay">
+              <% if file.ext.match(/html|htm|txt|js|css|md/) %>
+                <a href="/site_files/text_editor/<%= file.filename %>"><i class="icon-edit" style="margin-right: 10px" title="Edit"> Edit</i></a>
+              <% end %>
+              <% if file.filename != 'index.html' %>
+                <a href="#" onclick="confirmFileDelete('<%= file.filename %>')"><i class="icon-trash" style="margin-right: 10px" title="Delete"> Delete</i></a>
+              <% end %>
+              <a class="link-overlay" href="http://<%= current_site.username %>.neocities.org/<%= file.filename %>" title="View <%= file.filename %>" target="_blank"></a>
+            </div>
           </div>
-        </div>
+        <% end %>
-      <% end %>
+      </div>
-    </div>
+    </form>
   </div>
 </div>
-
       <form method="POST" action="/site_files/delete" id="deleteFilenameForm">
         <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
         <input type="hidden" id="deleteFilenameInput" name="filename">
@@ -123,4 +139,50 @@
 </div>
 
 </div>
-</main>
+</main>
+
+<form id="uploadFilesButtonForm" method="POST" action="/site_files/upload" enctype=multipart/form-data style="display: none">
+  <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
+  <input name="from_button" type="hidden" value="true">
+  <input id="uploadFiles" type="file" name="files[]" multiple onchange="$('#uploadFilesButtonForm').submit()">
+</form>
+
+<script src="/js/dropzone.min.js"></script>
+<script type="text/javascript">
+
+  function confirmFileDelete(name) {
+    $('#deleteFileName').html(name);
+    $('#deleteConfirmModal').modal();
+  }
+
+  function fileDelete() {
+    $('#deleteFilenameInput').val($('#deleteFileName').html());
+    $('#deleteFilenameForm').submit();
+  }
+
+  function clickUploadFiles() {
+    $("input[id='uploadFiles']").click()
+  }
+
+  Dropzone.options.uploads = {
+    paramName: 'files',
+    maxFilesize: <%= current_site.available_space_in_megabytes %>,
+    clickable: false,
+    addRemoveLinks: false,
+    dictDefaultMessage: '',
+    uploadMultiple: true,
+    init: function() {
+      this.on("successmultiple", function(file) {
+        location.reload()
+      })
+
+      this.on("error", function(file, errorMessage) {
+        alert('Failed: '+errorMessage)
+      })
+
+      this.on("uploadprogress", function(file, progress) {
+        // $('#upload_progress_bar').css('width', progress+'%');
+      })
+    }
+  }
+</script>

views/dashboard.slim

@@ -1,95 +0,0 @@
-css:
-  #files a {
-    color: #D00000;
-    text-decoration: none;
-  }
-
-javascript:
-  function confirmFileDelete(name) {
-    $('#deleteFileName').html(name);
-    $('#deleteConfirmModal').modal();
-  }
-
-  function fileDelete() {
-    $('#deleteFilenameInput').val($('#deleteFileName').html());
-    $('#deleteFilenameForm').submit();
-  }
-
-.content-Base
-  .row.content
-    .col.col-60
-
-      h1 Your Website
-      p These are the files on your site. <strong>index.html</strong> is the main page, it is the first page loaded when users visit your site. <strong>not_found.html</strong> is the page users see when they try to access a file on the site that's not there (it is also commonly referred to as the 404 page).
-      - current_site.file_list.each do |file|
-        hr style="margin: 12px 0px"
-        .row style="margin-bottom: 0px" id="files"
-          .col style="padding-left: 20px;"
-            a href="http://#{current_site.username}.neocities.org/#{file.filename}" title="View #{file.filename}" target="_blank"
-              - if file.ext.match(/jpg|png|bmp|gif/)
-                i class="icon-picture icon": span style="margin-left: 5px" #{file.filename}
-              - else
-                i class="icon-file-alt icon": span style="margin-left: 10px;" #{file.filename}
-            span class="float-Right"
-              - if file.ext.match(/html|htm|txt|js|css|md/)
-                a href="/site_files/text_editor/#{file.filename}" : i class="icon-edit" style="margin-right: 10px" title="Edit"
-              - else
-                span style="margin-left: 25px"
-
-              a href="/site_files/download/#{file.filename}": i class="icon-download" style="margin-right: 10px" title="Download"
-              - if file.filename != 'index.html'
-                a href="#" onclick="confirmFileDelete('#{file.filename}')": i class="icon-trash" style="margin-right: 10px" title="Delete"
-              - else
-                span style="margin-left: 22px"
-
-
-
-
-    .col.col-40
-
-      div.txt-Center.dash-SS
-        a href="http://#{current_site.username}.neocities.org" style="display:block" target="_blank": img src="/site_screenshots/#{current_site.username}.jpg" alt="screen shot"
-        br
-        h3 class="base" style="line-height:1": a href="http://#{current_site.username}.neocities.org" target="_blank" http://#{current_site.username}.neocities.org
-        p Your page has been accessed <b>#{current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse}</b> times.
-        p: small
-          |
-            (access statistics updated hourly)
-
-      .progress.progress-info.progress-striped
-        .bar style="width: #{(current_site.total_space / Site::MAX_SPACE.to_f) * 100}%"
-
-      h4.base.txt-Center
-        p Using #{((current_site.total_space.to_f / Site::MAX_SPACE) * 100).round(1)}% (#{current_site.total_space_in_megabytes}MB) of your #{(Site::MAX_SPACE.to_f / 2**20).to_i}MB of free space.
-
-      div.txt-Center
-        a href="/site_files/upload" class="btn-Action" style="margin-bottom:10px" Upload New Files
-        br
-        a href="/site_files/new_page" class="btn-Action" style="margin-bottom:10px" Create New HTML Page
-        br
-        a href="/site_files/#{current_site.username}.zip" class="btn-Action" Download Entire Site
-
-      hr
-        
-      div
-        <i class="icon-question-sign icon-3x"></i>&nbsp;&nbsp; <span style="font-size: 20pt">Need to learn web design?</span>
-        br
-        i class="icon-globe" &nbsp;&nbsp;
-        a href="/tutorials" target="_blank" Web Design, HTML, CSS, JavaScript Tutorials
-              
-         
-          
-  
-  form method="POST" action="/site_files/delete" id="deleteFilenameForm"
-    input name="csrf_token" type="hidden" value="#{csrf_token}"
-    input type="hidden" id="deleteFilenameInput" name="filename"
-
-  .modal.hide.fade id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true"
-    .modal-header
-      button.close type="button" data-dismiss="modal" aria-hidden="true" x
-      h3 id="deleteConfirmModalLabel" Confirm delete of file
-    .modal-body
-      p You are about to delete the file <span id="deleteFileName"></span>. Are you sure?
-    .modal-footer
-      button.btn data-dismiss="modal" aria-hidden="true" Cancel
-      button.btn.btn-danger onclick="fileDelete()" Delete