imagine_cms 5.2.0 → 5.2.5

data/app/views/manage/cms_pages/_crop_thumb.html.erb

@@ -197,7 +197,7 @@ Pressing "Save Thumbnail" will crop the thumbnail and set it as the new thumbnai
       </tr>
     </table>
     
-    <%= submit_tag 'Save Thumbnail', :class => 'form_button', :onclick => 'cropper.remove(); this.disabled = true; this.value = "Saving...";' %>
+    <%= submit_tag 'Save Thumbnail', class: 'form_button', data: { disable_with: 'Saving...' } %>
     <%= link_to_function "Cancel", "cancelSelectThumbnail()" %>
   <%- end -%>
 </center>

data/app/views/manage/cms_pages/_edit_page.html.erb

@@ -21,7 +21,7 @@
 <table id="dlg-page-properties">
   <col width="120"><col width="*"><col width="5">
 <%- if @pg.id != 1 -%>
-  <tr>
+  <tr id="cms_page-form-name-row">
     <td>Name (for URL):</td>
     <td>
       <%= text_field :pg, :name, class: 'form', style: 'margin-bottom: 0; width: 150px', onchange: (@pg.new_record? ? '' : "if (!confirm('Are you sure you want to change the name of this page? Any bookmarks or links to this page will no longer work if you proceed with this change.')) { this.value = $('original_name').value; };") %><br/>
@@ -30,6 +30,15 @@
     </td>
   </tr>
 <%- end -%>
+  <tr id="cms_page-form-parent_id-row" style="display: none;">
+    <td>Parent Page ID:</td>
+    <td><%= text_field :pg, :parent_id, class: 'form', style: 'width: 100%;' %></td>
+  </tr>
+  <script>
+    let nameRow = document.getElementById("cms_page-form-name-row");
+    let parentIdRow = document.getElementById("cms_page-form-parent_id-row");
+    if (nameRow && parentIdRow) nameRow.addEventListener("click", (e) => { if (e.altKey) { parentIdRow.style.display = "table-row"; } });
+  </script>
   <tr>
     <td>Page Title:</td>
     <td><%= text_field :pg, :title, class: 'form', style: 'width: 100%;' %></td>
@@ -172,8 +181,13 @@
             <div style="position: relative;">
               <%= text_field_tag :custom_attribute_name, '', class: 'form', style: 'margin-bottom: 4px;', placeholder: '[ attribute name ]' %>
               <div id="custom_attribute_name_auto_complete" class="auto_complete" style="display: none;"></div>
-              <%= javascript_tag "$('custom_attribute_name').onkeydown = disableEnterKey; new Autocompleter.Local('custom_attribute_name', 'custom_attribute_name_auto_complete', attrlist, { frequency: 0.1, minChars: 1 });" %>
-              
+              <script type="text/javascript">
+                window.addEventListener('DOMContentLoaded', (event) => {
+                  $('custom_attribute_name').onkeydown = disableEnterKey;
+                  new Autocompleter.Local('custom_attribute_name', 'custom_attribute_name_auto_complete', attrlist, { frequency: 0.1, minChars: 1 });
+                });
+              </script>
+
               <%= button_to_function 'Add', "new Ajax.Updater('custom_attributes', '#{url_for(controller: '/manage/cms_pages', action: 'page_attribute')}?name=' + $('custom_attribute_name').value, {asynchronous:true, method:'get', evalScripts:true, insertion:Insertion.Bottom}); $('custom_attribute_name').value = ''; return false;", class: 'form_button', style: 'margin-bottom: 5px;' %>
             </div>
           </td>
@@ -196,7 +210,7 @@
   </tr>
 </table>
 <% end -%>
-<<script type="text/javascript">
+<script type="text/javascript">
   jQuery('#pg_cms_template_id').change(function () {
     jQuery.get('<%= url_for(action: 'show_template_options', id: @pg) %>?template_id=' + jQuery(this).val(), null, function (data) {
       jQuery('#edit_page_template_options').html(data);

data/app/views/manage/cms_pages/_list_page.html.erb

@@ -1,8 +1,29 @@
-<div id="<%= "cb_item_#{list_page.id}" %>" class="cb_item" style="width: 148px; overflow: hidden; margin: 2px; float: left; cursor: pointer" onclick="$('view_link').href = '<%= list_page.path.blank? ? '' : '/' + list_page.path %>/version/<%= list_page.published_version > 0 ? list_page.published_version : list_page.version %>'; $('new_link').onclick = function () { editProperties('<%=raw url_for action: 'new', mode: 'ajax_new', parent_id: list_page %>', 'Create New Page under /<%= list_page.path %>'); return false; }; $('edit_link').onclick = function () { editProperties('<%=raw url_for action: 'edit_page', id: list_page, mode: 'ajax_edit' %>', 'Page Properties: <%= list_page.name %>'); return false; }; $('edit_content_link').href = '<%=raw url_for action: 'edit_page_content', id: list_page %>'; $('delete_link').href = '<%=raw url_for action: 'delete_page', id: list_page.id %>'; setTimeout('cbSelectItem(\'' + this.id + '\', <%= @page_level %>, \'<%=raw url_for action: 'list_pages', level: @page_level + 1, parent_id: list_page.id %>\');', 200);" ondblclick="$('edit_content_link').click();">
-  <table cellpadding="0" cellspacing="0" border="0">
-    <tr>
-      <td valign="top"><%= image_tag 'management/icon_page.gif', style: 'margin: 2px 5px 0 0;' %></td>
-      <td<%= list_page.published_version >= 0 ? '' : ' style="color: gray"'.html_safe %>><%= list_page.name %></td>
-    </tr>
-  </table>
+<div id="cb_item_<%= list_page.id %>" class="cb_item<%= ' cb_item_offline' unless list_page.published_version >= 0 %>">
+  <%= image_tag 'management/icon_page.gif' %></td>
+  <span><%= list_page.name %></span>
 </div>
+
+<script type="text/javascript">
+  jQuery('#cb_item_<%= list_page.id %>').on('click', () => {
+    jQuery('#view_link').prop('href', '<%= list_page.path.blank? ? '' : '/' + list_page.path %>/version/<%= list_page.published_version > 0 ? list_page.published_version : list_page.version %>');
+    jQuery('#new_link').off('click');
+    jQuery('#new_link').on('click', () => {
+      editProperties('<%=raw url_for action: 'new', mode: 'ajax_new', parent_id: list_page %>', 'Create New Page under /<%= list_page.path %>');
+      return false;
+    });
+    jQuery('#edit_link').off('click');
+    jQuery('#edit_link').on('click', () => {
+      editProperties('<%=raw url_for action: 'edit_page', id: list_page, mode: 'ajax_edit' %>', 'Page Properties: <%= list_page.name %>');
+      return false;
+    });
+    jQuery('#edit_content_link').prop('href', '<%=raw url_for action: 'edit_page_content', id: list_page %>');
+    jQuery('#delete_link').prop('href', '<%=raw url_for action: 'delete_page', id: list_page.id %>');
+    setTimeout(() => {
+      cbSelectItem('#cb_item_<%= list_page.id %>', <%= @page_level %>, '<%=raw url_for action: 'list_pages', level: @page_level + 1, parent_id: list_page.id %>');
+    }, 200);
+  });
+  jQuery('#cb_item_<%= list_page.id %>').on('dblclick', (event) => {
+    location.href = jQuery('#edit_content_link')[0].href;
+    return false;
+  });
+</script>

data/app/views/manage/cms_pages/_list_page_select.html.erb

@@ -1,8 +1,18 @@
-<div id="<%= "cb_item_#{list_page_select.id}" %>" class="cb_item" style="width: 148px; overflow: hidden; margin: 2px; float: left; cursor: pointer" onclick="$('page_browser_selection').value = '/<%= list_page_select.path %>'; setTimeout('cbSelectItem(\'' + this.id + '\', <%= @page_level %>, \'<%=raw url_for :action => 'list_pages_select', :level => @page_level + 1, :parent_id => list_page_select.id %>\');', 200);" ondblclick="return false;">
-  <table cellpadding="0" cellspacing="0" border="0">
-    <tr>
-      <td valign="top"><%= image_tag 'management/icon_page.gif', style: 'margin: 2px 5px 0 0;' %></td>
-      <td<%= list_page_select.published_version >= 0 ? '' : ' style="color: gray"'.html_safe %>><%= list_page_select.name %></td>
-    </tr>
-  </table>
+<%- list_page = list_page_select -%>
+
+<div id="cb_item_<%= list_page.id %>" class="cb_item<%= ' cb_item_offline' unless list_page.published_version >= 0 %>">
+  <%= image_tag 'management/icon_page.gif' %></td>
+  <span><%= list_page.name %></span>
 </div>
+
+<script type="text/javascript">
+  jQuery('#cb_item_<%= list_page.id %>').on('click', () => {
+    jQuery('#page_browser_selection').val('/<%= list_page.path %>');
+    setTimeout(() => {
+      cbSelectItem('#cb_item_<%= list_page.id %>', <%= @page_level %>, '<%=raw url_for action: 'list_pages_select', level: @page_level + 1, parent_id: list_page.id %>');
+    }, 200);
+  });
+  jQuery('#cb_item_<%= list_page.id %>').on('dblclick', (event) => {
+    return false;
+  });
+</script>

data/app/views/manage/cms_pages/_list_pages.html.erb

@@ -1 +1 @@
-<%= render :partial => 'list_page', :collection => @pages %>
+<%= render partial: 'list_page', collection: @pages %>

data/app/views/manage/cms_pages/_list_pages_select.html.erb

@@ -1 +1 @@
-<%= render :partial => 'list_page_select', :collection => @pages %>
+<%= render partial: 'list_page_select', collection: @pages %>

data/app/views/manage/cms_pages/_page_list.html.erb

@@ -177,12 +177,12 @@
 </div>
 
 <script type="text/javascript">
-  var displayAsList = jQuery('#page_objects_<%= key %>-style-display-as_list').checked;
-  jQuery('.page_list_<%= key %>_list_option').toggle(displayAsList);
-  jQuery('.page_list_<%= key %>_calendar_option').toggle(!displayAsList);
-  
   // reattach to a safe place in the DOM (away from styled regions)
-  jQuery(document).ready(function () {
+  window.addEventListener('DOMContentLoaded', (event) => {
+    var displayAsList = jQuery('#page_objects_<%= key %>-style-display-as_list').checked;
+    jQuery('.page_list_<%= key %>_list_option').toggle(displayAsList);
+    jQuery('.page_list_<%= key %>_calendar_option').toggle(!displayAsList);
+
     jQuery('#page_list_<%= key %>').appendTo(jQuery('#page_content_form')[0]);
     jQuery('#page_objects_<%= key %>-style-display-as_list').click(function () {
       jQuery('.page_list_<%= key %>_list_option').show();

data/app/views/manage/cms_pages/_page_list_source_tag.html.erb

@@ -8,11 +8,15 @@
         <%= text_field(:page_objects, "#{key}-sources-tag#{i}", :class => 'form', :style => 'margin: 0; padding: 2px; border: 1px solid gray; width: 98%;') %>
         
         <div id="page_objects_<%= key %>-sources-tag<%= i %>_auto_complete" class="auto_complete" style="display: none;"></div>
-        <%= javascript_tag "new Autocompleter.Local('page_objects_#{key}-sources-tag#{i}', 'page_objects_#{key}-sources-tag#{i}_auto_complete', taglist, { frequency: 0.1, minChars: 1 })" %>
+        <script type="text/javascript">
+          window.addEventListener('DOMContentLoaded', (event) => {
+            new Autocompleter.Local('page_objects_<%= key %>-sources-tag<%= i %>', 'page_objects_<%= key %>-sources-tag<%= i %>_auto_complete', taglist, { frequency: 0.1, minChars: 1 });
+          });
+        </script>
       </td>
       <td>
         <%= select(:page_objects, "#{key}-sources-tag#{i}-behavior", [ 'include', 'exclude', 'require' ], {}, :class => 'form', :style => 'margin: 0; padding: 1px; border: 1px solid gray; width: 100%;') %>
       </td>
     </tr>
   </table>
-</div>
+</div>

data/app/views/manage/cms_pages/_upload_feature_image.html.erb

@@ -5,31 +5,71 @@
 certain your image is already web-ready. Otherwise, click "Next" to crop and
 resize your image before using it.</p>
 
-<%= form_tag_with_upload_progress({ :action => 'receive_image', :id => @pg, :overwrite => 1 },
-                                  { :finish => "if (arguments[0]) { $('filename').value = arguments[0]; $('mainform').onsubmit(); }" }) do -%>
+<%= form_tag({ action: 'receive_image', id: @pg, overwrite: 1 }, { id: 'upload-image-form', multipart: true }) do %>
 <table>
   <tr>
     <td>File:</td>
     <td>
-      <%= file_field 'file', 'data', :class => 'form', :style => 'margin-bottom: 0; width: 150px' %><br/>
+      <%= file_field 'file', 'data', :class => 'form', :style => 'margin-bottom: 0; min-width: 150px' %><br/>
       <span style="color: #888888">Valid image types: jpeg, png, gif</span>
     </td>
   </tr>
   <tr>
     <td></td>
     <td>
-      <div id="upload_status_div" class="error"><%= upload_status_tag %></div>
-      <%= submit_tag 'Next', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('file_data').value == '') return false; $('next_clicked_upload').value = '1'; $('next_clicked').value = '1'; this.disabled = true; this.value = 'Uploading...';" %>
-      <%= submit_tag 'Finish', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('file_data').value == '') return false; this.disabled = true; this.value = 'Uploading...';" %>
-      <%= link_to_function "Cancel", "cancelSelectThumbnail()" %>
+      <%= submit_tag 'Next', id: 'upload-image-next-button', class: 'form_button', style: 'min-width: 70px' %>
+      <%= submit_tag 'Finish', id: 'upload-image-finish-button', class: 'form_button', style: 'min-width: 70px' %>
       <%= text_field_tag 'next_clicked_upload', '0', :style => 'display: none' %>
     </td>
   </tr>
 </table>
 <%- end -%>
 
-<%= form_remote_tag(:update => 'select_thumbnail_dialog_content', :html => { :id => 'mainform' },
-                    :url => { :action => 'crop_feature_image', :id => @pg }) do -%>
-  <%= text_field_tag 'next_clicked', '0', :style => 'display: none' %>
-  <%= text_field_tag 'filename', '', :style => 'display: none' %>
+<%= form_remote_tag(update: 'select_thumbnail_dialog_content', html: { id: 'mainform' },
+                    url: { action: 'crop_feature_image', id: @pg }) do %>
+  <%= text_field_tag 'next_clicked', '0', style: 'display: none' %>
+  <%= text_field_tag 'filename', '', style: 'display: none' %>
 <%- end -%>
+
+<script>
+  const uploadImageForm = document.getElementById("upload-image-form");
+  const nextButton = document.getElementById("upload-image-next-button");
+  const finishButton = document.getElementById("upload-image-finish-button");
+  const uploadFileField = document.getElementById("file_data");
+
+  nextButton.addEventListener("click", (e) => {
+    e.target.dataset.disableWith = "Uploading...";
+    document.getElementById("next_clicked").value = "1";
+  });
+  finishButton.addEventListener("click", (e) => {
+    e.target.dataset.disableWith = "Uploading...";
+  });
+
+  uploadImageForm.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    if (uploadFileField.value == "") {
+      setTimeout(() => {
+        nextButton.value = "Next";
+        finishButton.value = "Finish";
+        nextButton.dataset.disableWith = null;
+        finishButton.dataset.disableWith = null;
+        nextButton.disabled = false;
+        finishButton.disabled = false;
+      });
+      return;
+    }
+
+    let file = uploadFileField.files[0];
+    let formData = new FormData(uploadImageForm);
+
+    let resp = await fetch(uploadImageForm.action, {
+      method: 'POST',
+      body: formData
+    });
+    let data = await resp.json();
+
+    document.getElementById("filename").value = data.filename;
+    document.getElementById("mainform").onsubmit();
+  });
+</script>

data/app/views/manage/cms_pages/_upload_file.html.erb

@@ -11,14 +11,14 @@
   <tr>
     <td>File:</td>
     <td>
-      <%= file_field 'file', 'data', :class => 'form', :style => 'margin-bottom: 0; width: 150px' %>
+      <%= file_field 'file', 'data', class: 'form', style: 'margin-bottom: 0; min-width: 150px' %>
     </td>
   </tr>
   <tr>
     <td></td>
     <td>
       <div id="upload_status_div" class="error"><%= upload_status_tag %></div>
-      <%= submit_tag 'Finish', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('file_data').value == '') return false; this.disabled = true; this.value = 'Uploading...';" %>
+      <%= submit_tag 'Finish', class: 'form_button', style: 'width: 70px;', data: { disable_with: 'Uploading...' } %>
       <%= link_to_function "Cancel", "cancelInsertFile()" %>
     </td>
   </tr>

data/app/views/manage/cms_pages/_upload_image.html.erb

@@ -1,4 +1,8 @@
-<%= javascript_tag "try { $('insert_file_dialog_content').innerHTML = ''; } catch (e) {}" %>
+<script>
+  try {
+    document.getElementById("insert_file_dialog_content").innerHTML = "";
+  } catch (e) { }
+</script>
 
 <div id="save_errors" class="error"></div>
 <h3 style="margin-bottom: 10px;">Insert Image</h3>
@@ -10,12 +14,11 @@
   certain your image is already web-ready. Otherwise, click "Next" to crop and
   resize your image before using it.</p>
 
-  <%= form_tag_with_upload_progress({ :action => 'receive_image', :id => @pg },
-                                    { :finish => "if (arguments[0]) { $('filename').value = arguments[0]; $('mainform').onsubmit(); }" }) do -%>
+  <%= form_tag({ action: 'receive_image', id: @pg }, { id: 'upload-image-form', multipart: true }) do %>
   <table>
     <tr>
       <td width="70">Image file:</td>
-      <td><%= file_field 'file', 'data', :class => 'form', :style => 'margin-bottom: 0; width: 150px' %></td>
+      <td><%= file_field 'file', 'data', class: 'form', style: 'margin-bottom: 0; min-width: 250px' %></td>
     </tr>
     <tr>
       <td></td>
@@ -24,50 +27,119 @@
     <tr>
       <td></td>
       <td>
-        <div id="upload_status_div" class="error"><%= upload_status_tag %></div>
-        <%= submit_tag 'Next', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('file_data').value == '') return false; $('next_clicked_upload').value = '1'; $('next_clicked').value = '1'; this.disabled = true; this.value = 'Uploading...';" %>
-        <%= submit_tag 'Finish', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('file_data').value == '') return false; this.disabled = true; this.value = 'Uploading...';" %>
+        <%= submit_tag 'Next', id: 'upload-image-next-button', class: 'form_button', style: 'min-width: 70px' %>
+        <%= submit_tag 'Finish', id: 'upload-image-finish-button', class: 'form_button', style: 'min-width: 70px' %>
         <%= link_to_function "Cancel", "cancelInsertImage()" %>
-        <%= text_field_tag 'next_clicked_upload', '0', :style => 'display: none' %>
       </td>
     </tr>
   </table>
-  <%- end -%>
-</fieldset><br/>
+  <% end %>
+</fieldset><br>
 
 <fieldset>
   <legend>New Photo Gallery</legend>
 
   <p>Upload a zip file of images to create a photo gallery.</p>
 
-  <%= form_tag_with_upload_progress({ :action => 'receive_gallery', :id => @pg },
-                                    { :finish => "if (arguments[0]) { $('dirname').value = arguments[0]; $('mainform_gallery').onsubmit(); }" }) do -%>
+  <%= form_tag({ action: 'receive_gallery', id: @pg }, { id: 'upload-gallery-form', multipart: true }) do %>
   <table>
     <tr>
       <td width="70">Zip file:</td>
       <td>
-        <%= file_field 'gallery_file', 'data', :class => 'form', :style => 'margin-bottom: 0; width: 150px' %><br/>
+        <%= file_field 'gallery_file', 'data', class: 'form', style: 'margin-bottom: 0; min-width: 250px' %><br/>
       </td>
     </tr>
     <tr>
       <td></td>
       <td>
-        <div id="upload_status_div" class="error"><%= upload_status_tag %></div>
-        <%= submit_tag 'Next', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('gallery_file_data').value == '') return false; this.disabled = true; this.value = 'Uploading...';" %>
+        <%= submit_tag 'Next', id: 'upload-gallery-next-button', class: 'form_button', style: 'min-width: 70px' %>
         <%= link_to_function "Cancel", "cancelInsertImage()" %>
       </td>
     </tr>
   </table>
-  <%- end -%>
+  <% end %>
 </fieldset><br>
 
-<%= form_remote_tag(:update => 'insert_image_dialog_content', :html => { :id => 'mainform' },
-                    :url => { :action => 'crop_image', :id => @pg }) do -%>
-  <%= text_field_tag 'next_clicked', '0', :style => 'display: none' %>
-  <%= text_field_tag 'filename', '', :style => 'display: none' %>
+<%= form_remote_tag(update: 'insert_image_dialog_content', html: { id: 'mainform' },
+                    url: { action: 'crop_image', id: @pg }) do %>
+  <%= text_field_tag 'next_clicked', '0', style: 'display: none' %>
+  <%= text_field_tag 'filename', '', style: 'display: none' %>
 <%- end -%>
 
-<%= form_remote_tag(:update => 'insert_image_dialog_content', :html => { :id => 'mainform_gallery' },
-                    :url => { :action => 'gallery_setup', :id => @pg }) do -%>
-  <%= text_field_tag :dirname, '', :style => 'display: none' %>
+<%= form_remote_tag(update: 'insert_image_dialog_content', html: { id: 'mainform_gallery' },
+                    url: { action: 'gallery_setup', id: @pg }) do %>
+  <%= text_field_tag :dirname, '', style: 'display: none' %>
 <%- end -%>
+
+<script>
+  const uploadImageForm = document.getElementById("upload-image-form");
+  const uploadGalleryForm = document.getElementById("upload-gallery-form");
+  const nextButton = document.getElementById("upload-image-next-button");
+  const finishButton = document.getElementById("upload-image-finish-button");
+  const uploadFileField = document.getElementById("file_data");
+  const galleryNextButton = document.getElementById("upload-gallery-next-button");
+
+  nextButton.addEventListener("click", (e) => {
+    e.target.dataset.disableWith = "Uploading...";
+    document.getElementById("next_clicked").value = "1";
+  });
+  finishButton.addEventListener("click", (e) => {
+    e.target.dataset.disableWith = "Uploading...";
+  });
+  galleryNextButton.addEventListener("click", (e) => {
+    e.target.dataset.disableWith = "Uploading...";
+  });
+
+  uploadImageForm.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    if (uploadFileField.value == "") {
+      setTimeout(() => {
+        nextButton.value = "Next";
+        finishButton.value = "Finish";
+        nextButton.dataset.disableWith = null;
+        finishButton.dataset.disableWith = null;
+        nextButton.disabled = false;
+        finishButton.disabled = false;
+      });
+      return;
+    }
+
+    let file = uploadFileField.files[0];
+    let formData = new FormData(uploadImageForm);
+
+    let resp = await fetch(uploadImageForm.action, {
+      method: 'POST',
+      body: formData
+    });
+    let data = await resp.json();
+
+    document.getElementById("filename").value = data.filename;
+    document.getElementById("mainform").onsubmit();
+  });
+
+  uploadGalleryForm.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    if (uploadFileField.value == "") {
+      setTimeout(() => {
+        galleryNextButton.value = "Next";
+        galleryNextButton.dataset.disableWith = null;
+        galleryNextButton.disabled = false;
+      });
+      return;
+    }
+
+    let file = uploadFileField.files[0];
+    let formData = new FormData(uploadImageForm);
+
+    let resp = await fetch(uploadImageForm.action, {
+      method: 'POST',
+      body: formData
+    });
+    let data = await resp.json();
+
+    document.getElementById("dirname").value = data.filename;
+    document.getElementById("mainform_gallery").onsubmit();
+  });
+</script>

data/app/views/manage/cms_pages/_upload_thumb.html.erb

@@ -5,31 +5,71 @@
 certain your image is already web-ready. Otherwise, click "Next" to crop and
 resize your image before using it.</p>
 
-<%= form_tag_with_upload_progress({ :action => 'receive_image', :id => @pg, :overwrite => 1 },
-                                  { :finish => "if (arguments[0]) { $('filename').value = arguments[0]; $('mainform').onsubmit(); }" }) do -%>
+<%= form_tag({ action: 'receive_image', id: @pg, overwrite: 1 }, { id: 'upload-image-form', multipart: true }) do %>
 <table>
   <tr>
     <td>File:</td>
     <td>
-      <%= file_field 'file', 'data', :class => 'form', :style => 'margin-bottom: 0; width: 150px' %><br/>
+      <%= file_field 'file', 'data', :class => 'form', :style => 'margin-bottom: 0; min-width: 150px' %><br>
       <span style="color: #888888">Valid image types: jpeg, png, gif</span>
     </td>
   </tr>
   <tr>
     <td></td>
     <td>
-      <div id="upload_status_div" class="error"><%= upload_status_tag %></div>
-      <%= submit_tag 'Next', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('file_data').value == '') return false; $('next_clicked_upload').value = '1'; $('next_clicked').value = '1'; this.disabled = true; this.value = 'Uploading...';" %>
-      <%= submit_tag 'Finish', :class => 'form_button', :style => 'width: 70px;', :onclick => "if ($('file_data').value == '') return false; this.disabled = true; this.value = 'Uploading...';" %>
+      <%= submit_tag 'Next', id: 'upload-image-next-button', class: 'form_button', style: 'min-width: 70px' %>
+      <%= submit_tag 'Finish', id: 'upload-image-finish-button', class: 'form_button', style: 'min-width: 70px' %>
       <%= link_to_function "Cancel", "cancelSelectThumbnail()" %>
-      <%= text_field_tag 'next_clicked_upload', '0', :style => 'display: none' %>
     </td>
   </tr>
 </table>
 <%- end -%>
 
-<%= form_remote_tag(:update => 'select_thumbnail_dialog_content', :html => { :id => 'mainform' },
-                    :url => { :action => 'crop_thumb', :id => @pg }) do -%>
-  <%= text_field_tag 'next_clicked', '0', :style => 'display: none' %>
-  <%= text_field_tag 'filename', '', :style => 'display: none' %>
+<%= form_remote_tag(update: 'select_thumbnail_dialog_content', html: { id: 'mainform' },
+                    url: { action: 'crop_thumb', id: @pg }) do %>
+  <%= text_field_tag 'next_clicked', '0', style: 'display: none' %>
+  <%= text_field_tag 'filename', '', style: 'display: none' %>
 <%- end -%>
+
+<script>
+  const uploadImageForm = document.getElementById("upload-image-form");
+  const nextButton = document.getElementById("upload-image-next-button");
+  const finishButton = document.getElementById("upload-image-finish-button");
+  const uploadFileField = document.getElementById("file_data");
+
+  nextButton.addEventListener("click", (e) => {
+    e.target.dataset.disableWith = "Uploading...";
+    document.getElementById("next_clicked").value = "1";
+  });
+  finishButton.addEventListener("click", (e) => {
+    e.target.dataset.disableWith = "Uploading...";
+  });
+
+  uploadImageForm.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    if (uploadFileField.value == "") {
+      setTimeout(() => {
+        nextButton.value = "Next";
+        finishButton.value = "Finish";
+        nextButton.dataset.disableWith = null;
+        finishButton.dataset.disableWith = null;
+        nextButton.disabled = false;
+        finishButton.disabled = false;
+      });
+      return;
+    }
+
+    let file = uploadFileField.files[0];
+    let formData = new FormData(uploadImageForm);
+
+    let resp = await fetch(uploadImageForm.action, {
+      method: 'POST',
+      body: formData
+    });
+    let data = await resp.json();
+
+    document.getElementById("filename").value = data.filename;
+    document.getElementById("mainform").onsubmit();
+  });
+</script>