add drag and drop file upload

app.rb

@@ -248,25 +248,31 @@ get '/site_files/new' do
   slim :'site_files/new'
 end
 
+get '/site_files/upload' do
+  require_login
+  slim :'site_files/upload'
+end
+
 post '/site_files/upload' do
   require_login
   @errors = []
+  http_error_code = 406
 
-  if params[:newfile] == '' || params[:newfile].nil?
+#  if params[:newfile] == '' || params[:newfile].nil?
-    @errors << 'You must select a file to upload.'
+#    @errors << 'You must select a file to upload.'
-    halt slim(:'site_files/new')
+#    halt http_error_code, slim(:'site_files/new')
-  end
+#  end
 
   if params[:newfile][:tempfile].size > Site::MAX_SPACE || (params[:newfile][:tempfile].size + current_site.total_space) > Site::MAX_SPACE
     @errors << 'File size must be smaller than available space.'
-    halt slim(:'site_files/new')
+    halt http_error_code, 'File size must be smaller than available space.' # slim(:'site_files/new')
   end
 
   mime_type = Magic.guess_file_mime_type params[:newfile][:tempfile].path
 
   unless (Site::VALID_MIME_TYPES.include?(mime_type) || mime_type =~ /text/) && Site::VALID_EXTENSIONS.include?(File.extname(params[:newfile][:filename]).sub(/^./, ''))
     @errors << 'File must me one of the following: HTML, Text, Image (JPG PNG GIF JPEG SVG), JS, CSS, Markdown.'
-    halt slim(:'site_files/new')
+    halt http_error_code, 'File type is not supported.' # slim(:'site_files/new')
   end
 
   sanitized_filename = params[:newfile][:filename].gsub(/[^a-zA-Z0-9_\-.]/, '')

models/site.rb

@@ -110,8 +110,16 @@ class Site < Sequel::Model
     space.nil? ? 0 : space
   end
   
+  def total_space_in_megabytes
+    (total_space.to_f / 2**20).round(2)
+  end
+
   def available_space
     remaining = MAX_SPACE - total_space
     remaining < 0 ? 0 : remaining
   end
+  
+  def available_space_in_megabytes
+    (available_space.to_f / 2**20).round(2)
+  end
 end

views/dashboard.slim

@@ -64,15 +64,14 @@ javascript:
           .progress.progress-info.progress-striped
             .bar style="width: #{(current_site.total_space / Site::MAX_SPACE.to_f) * 100}%"
   
-          h4 class="base": You are currently using #{((current_site.total_space.to_f / Site::MAX_SPACE) * 100).round(1)}% (#{(current_site.total_space.to_f / 2**20).round(2)}MB) of your #{(Site::MAX_SPACE.to_f / 2**20).to_i}MB of free space.
+          h4 class="base": You are currently 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.
       
       .row style="margin-top: 20px"
         .span5
           div
-            a href="/site_files/new" class="btn-Action" style="margin-bottom:20px" Upload New File
+            a href="/site_files/upload" class="btn-Action" style="margin-bottom:20px" Upload New Files
           div
             a href="/site_files/new_page" class="btn-Action" Create New HTML Page
-          
           <hr />
           
           div

views/layout.slim

@@ -23,15 +23,11 @@ html
     
     .page
       .container
-      
-        
-      
         - flash.keys.each do |key|
           div class="alert alert-#{key}"
             button.close type="button" data-dismiss="alert" ×
             == flash[key]
-        container
+        == yield
-          == yield
   
     script src="/js/bootstrap.min.js"
   

views/site_files/upload.slim

@@ -0,0 +1,76 @@
+css:
+  .dz-default {
+    font-size: 30pt;
+  }
+
+  .dz-success-mark {
+    display: none;
+  }
+  .dz-error-mark {
+    display: none;
+  }
+  .dz-details img {
+    margin-bottom: 10px;
+  }
+  
+  li {
+    margin-bottom: 0px;
+  }
+script src="/js/dropzone.min.js"
+javascript:
+  Dropzone.options.uploads = {
+    paramName: 'newfile',
+    maxFilesize: #{current_site.available_space_in_megabytes},
+    clickable: true,
+    init: function() {
+      this.on("success", function(file) {
+        $('#upload_status').html('File upload of '+file.name+' was successful!');
+      });
+    
+      this.on("error", function(file) {
+        $('#upload_status').html('File upload of '+file.name+' failed. Ensure that it was a valid file type.');
+      });
+    
+      this.on("uploadprogress", function(file, progress) {
+        $('#upload_progress_bar').css('width', progress+'%');
+      });
+    }
+  };
+
+.row style="margin-top: 20px"
+  .span12.text-center
+    h1 Upload New Files
+
+.row
+  .span5.text-center
+    h5 NeoCities uses a drop and drop file upload. Simply take files and drop them from your computer on the white box (or click it) and they are uploaded.
+    div style="background-color: #FFFFFF;"
+      form action="/site_files/upload" class="dropzone" id="uploads"
+        input name="csrf_token" type="hidden" value="#{csrf_token}"
+
+    div id="upload_progress"
+      .progress.progress-info.progress-striped
+        .bar id="upload_progress_bar" style="width: 0%"
+      
+    div id="upload_status" style="font-size: 16pt"
+
+    div style="margin-top: 20px"
+      a.btn-Action href="/dashboard" Finish
+
+  .span6.text-center
+
+    p Files has to be one of the following types:
+    ul id="file_criteria"
+      li HTML (.html, .htm)
+      li Image (.jpg, .png, .gif, .svg)
+      li Markdown (.md, .markdown)
+      li JavaScript (.js, .json, .geojson)
+      li CSS (.css)
+      li Text (.txt, .text, .csv, .tsv)
+      li Web Fonts (.eot, .ttf, .woff, .svg)
+
+      p If the file already exists, <u><b>it will be overwritten without warning</b></u>.
+      p It has to be <u>legal to share this content in the United States</u>.
+      p It must fit into your home page space (#{(Site::MAX_SPACE.to_f / 2**20).to_i}MB).
+      p The file uploader will automatically scrub any characters not matching: a-z A-Z 0-9 _ - .
+