Use requestSubmit to allow JS events

Yay, now it works. Not sure the best way to show loading yet.
- currently the Turbo loading indicator shows which is better than nothing (blue bar at top)
- ideally we could show a small spinner over the image thumbnail. need to write some stimulus to hook into turbo lifecycle I guess.
- or we could activate the frame-level loading overlay. refactor loading_controller a bit so that it's applied on the container, then hopefully  we can just call  change->loading#showLoading. the turbo_stream response could dectivate it.

app/views/spree/admin/images/edit.turbo_stream.haml

@@ -5,9 +5,10 @@
     -# Display image in the same way it appears in the shopfront popup
     %p= image_tag @image.persisted? ? @image.url(:large) : Spree::Image.default_image_url(:large), width: 433, height: 433
 
-    -# Submit as turbo stream to avoid full page reload. But turbo is ignoring it??!!
+    -# Submit as turbo stream to avoid full page reload.
+    -# TODO: show loading indicator.
     = form_for [:admin, @product, @image],
-        html: { multipart: true }, data: { controller: "form", 'turbo-stream': true } do |f|
+        html: { multipart: true }, data: { controller: "form" } do |f|
       %input{ type: :hidden, name: :return_url, value: request.referer }
       = f.hidden_field :viewable_id, value: @product.id
 

app/webpacker/controllers/form_controller.js

@@ -2,6 +2,8 @@ import { Controller } from "stimulus";
 
 export default class FormController extends Controller {
   submit() {
-    this.element.submit();
+    // Validate and submit the form, using the default submit button. Raises JS events.
+    // Ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
+    this.element.requestSubmit();
   }
 }