allowed file types

app.rb

@@ -492,6 +492,10 @@ post '/site_files/save/:filename' do |filename|
   'ok'
 end
 
+get '/site_files/allowed_types' do
+  erb :'site_files/allowed_types'
+end
+
 get '/terms' do
   erb :'terms'
 end

views/dashboard.erb

@@ -80,11 +80,10 @@
   
 
 <div class="files">
-  <div class="uploading-overlay">
+  <div id="uploadingOverlay" class="uploading-overlay" style="display: none">
     <div class="uploading">
-        <p>Uploading <strong>heartcat.png</strong>...</p>
+        <p>Uploading, please wait...</p>
-        <p>Uploading <strong>tipcat.png</strong>...</p>
+      <div id="progressBar" class="progress-bar" style="display: none"><div id="uploadingProgress" class="progress" style="width: 0%"></div></div>
-      <div class="progress-bar"><div class="progress" style="width:60%;"></div></div>
     </div>
   </div>
   <div class="header">
@@ -160,15 +159,15 @@
         </div>
       </div>
 
-<div class="site-actions">
+<div class="site-actions" style="margin-bottom:10px">
-  <!-- <a href="/site_files/<%= current_site.username %>.zip">Allowed file types</a> | -->
+  <a href="/site_files/allowed_types">Allowed file types</a> |
   <a href="/site_files/<%= current_site.username %>.zip">Download entire site</a>
 </div>
 
 </div>
 </main>
 
-<form id="uploadFilesButtonForm" method="POST" action="/site_files/upload" enctype=multipart/form-data style="display: none">
+<form id="uploadFilesButtonForm" method="POST" action="/site_files/upload" enctype=multipart/form-data style="display: none" onsubmit="showUploadProgress()">
   <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()">
@@ -190,6 +189,15 @@
   function clickUploadFiles() {
     $("input[id='uploadFiles']").click()
   }
+  
+  function showUploadProgress() {
+    $('#uploadingOverlay').css('display', 'block')
+  }
+  
+  function hideUploadProgress() {
+    $('#progressBar').css('display', 'none')
+    $('#uploadingOverlay').css('display', 'none')
+  }
 
   Dropzone.options.uploads = {
     paramName: 'files',
@@ -204,11 +212,15 @@
       })
 
       this.on("error", function(file, errorMessage) {
+        hideUploadProgress()
         alert('Failed: '+errorMessage)
       })
 
-      this.on("uploadprogress", function(file, progress) {
+      this.on("totaluploadprogress", function(progress, totalBytes, totalBytesSent) {
-        // $('#upload_progress_bar').css('width', progress+'%');
+        console.log('OH HI')
+        showUploadProgress()
+        $('#progressBar').css('display', 'block')
+        $('#uploadingProgress').css('width', progress+'%')
       })
     }
   }

views/site_files/allowed_types.erb

@@ -0,0 +1,38 @@
+<div class="header-Outro">
+  <div class="row content single-Col">
+  <h1>Allowed File Types</h1>
+  <h3 class="subtitle"></h3>
+  </div>
+</div>
+
+<div class="content single-Col misc-page">
+  <h2>Currently Allowed File Types</h2>
+  <ul style="font-size: 16pt">
+    <li>HTML (.html, .htm)</li>
+    <li>Image (.jpg, .png, .gif, .svg, .ico)</li>
+    <li>Markdown (.md, .markdown)</li>
+    <li>JavaScript (.js, .json, .geojson)</li>
+    <li>CSS (.css)</li>
+    <li>Text (.txt, .text, .csv, .tsv)</li>
+    <li>Web Fonts (.eot, .ttf, .woff, .svg)</li>
+    <li>MIDI Files (.mid, .midi)</li>
+  </ul>
+  
+  <h2>Why are there restricted file types?</h2>
+  <p>
+    <strong>At the moment, Neocities is trying to grow sustainably.</strong> Our goal is to provide you with a free web site so you can arrange content in any way you want. In order to make sure we can continue to do this, we need to put in place measures to prevent Neocities from becoming a "file dump host". We don't currently have the resources to deal with preventing this from happening if we let users upload anything they want, so the temporary solution for now is to only allow file types that we know are useful for making web sites.
+    
+  <p>For example, allowing users to host executable (EXE) files provides a way for attackers to host malicious content, and we want to minimize that. Also, if the site starts being used to host malicious content, it is possible that search engines like Google will punish us in rankings, which would affect everyone's site on Neocities.
+  </p>
+  <p>
+    MP3 music and MP4 video has similar problems, because if the uploaded content became very popular ("goes viral"), it would overwhelm our servers and make our bandwidth much more costly. And hosting rich-media content directly is almost never the best way to do it. <a href="http://soundcloud.com">Soundcloud</a> provides a great way to host music, and <a href="http://youtube.com">Youtube</a> does a very good job with taking your video, processing it, making sure it works on all browsers, and then provides an easy way for you to embed that content in your web page.
+  </p>
+  
+  <p>
+    If you have a file type you believe should be allowed, please <a href="/contact">contact us</a> and we will see if we can put it in for you.
+  </p>
+  
+  <p>
+    We are working on upgrading our infrastructure to deal with these problems more effectively (such as automatic virus scanning for executables, and using globally-distributed site caching to improve performance for sites and increase our bandwidth capabilities). Until then, we have a whitelist of allowed file types, but we will let you know if this changes in the future (and we expect it to). Thank you for your understanding and patience.
+  </p>
+</div>