From 0704521d4a5194277241230c6d335ccfd57be990 Mon Sep 17 00:00:00 2001
From: Kyle Drake <kyle@kyledrake.net>
Date: Tue, 26 Mar 2024 21:03:26 -0500
Subject: [PATCH] fixes for tutorial

---
 views/tutorial/html/6.erb |  4 ++--
 views/tutorial/html/9.erb | 33 +++++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/views/tutorial/html/6.erb b/views/tutorial/html/6.erb
index ea978cca..a70148f7 100644
--- a/views/tutorial/html/6.erb
+++ b/views/tutorial/html/6.erb
@@ -7,8 +7,8 @@
   <div class="dialogue" style="top: 20px; left: 360px">
     Your Neocities web directory already includes an image called <strong>neocities.png</strong>.
   </div>
-  <div class="dialogue" style="top: 145px; left: 390px; width:200px">
-    Add it to your page like so: <pre><code class="html">&lt;img src="/neocities.png"&gt;</code></pre>
+  <div class="dialogue" style="top: 145px; left: 360px; width:250px">
+    Add it to your page: <pre><code class="html">&lt;img src="/neocities.png"&gt;</code></pre>
   </div>
   <div class="dialogue" style="top: 230px; left: 420px">
     That's it! No closing tag needed for images.
diff --git a/views/tutorial/html/9.erb b/views/tutorial/html/9.erb
index d6928d71..289713f7 100644
--- a/views/tutorial/html/9.erb
+++ b/views/tutorial/html/9.erb
@@ -18,23 +18,40 @@
     $('h3#sitePreview').css('display', 'none')
     $('.preview').css('margin-top', '20px')
 
-    $('#saveToSite').on('click', function() {
+    $('#saveToSite').on('click', function(event) {
+      event.preventDefault()
+
+      var formData = new FormData()
+      var fileContent = sessionStorage.getItem('tutorialHtml')
+      formData.append('index.html', new File([fileContent], 'index.html', { type: 'text/html' }))
+      formData.append('csrf_token', '<%= escape_javascript csrf_token %>')
+      formData.append('username', '<%= escape_javascript current_site.username %>')
+
       $.ajax({
-        url: '/site_files/upload?csrf_token=<%= Rack::Utils.escape csrf_token %>&filename=<%= Rack::Utils.escape 'index.html' %>&site_id=<%= current_site.id %>',
-        data: sessionStorage.getItem('tutorialHtml'),
+        url: '/api/upload',
+        data: formData,
         processData: false,
         contentType: false,
         type: 'POST',
         error: function(jqXHR, textStatus, errorThrown) {
-          alert('There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!')
+          var errorMessage = 'There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!'
+
+          if(jqXHR.responseText) {
+            try {
+              // Attempt to parse the JSON responseText to get the error message
+              var parsedResponse = JSON.parse(jqXHR.responseText);
+              errorMessage += ' ERROR MESSAGE: ' + parsedResponse.message;
+              alert(errorMessage)
+            } catch (error) {
+            }
+          }
+
+          alert(errorMessage)
         },
-        success: function(response){
+        success: function(response, textStatus, xhr){
           window.location = '/tutorial/html/10'
         }
       })
-
-      return false
     })
-
   })
 </script>