Use Alpine and the API for SAS picture upload

sas/templates/sas/album.jinja

@@ -73,7 +73,7 @@
                 <div class="text">{% trans %}To be moderated{% endtrans %}</div>
               </template>
             </div>
-            {% if edit_mode %}
+            {% if is_sas_admin %}
               <input type="checkbox" name="file_list" :value="album.id">
             {% endif %}
           </a>
@@ -86,7 +86,7 @@
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <br>
     {{ download_button(_("Download album")) }}
-    <div class="photos" :aria-busy="loading">
+    <div class="photos" :aria-busy="loading" @pictures-upload-done.window="fetchPictures">
       <template x-for="picture in getPage(page)">
         <a :href="picture.sas_url">
           <div class="photo" :class="{not_moderated: !picture.is_moderated}">
@@ -141,115 +141,3 @@
     {{ timezone.now() - start }}
   </p>
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script>
-    // Todo: migrate to alpine.js if we have some time
-    $("form#upload_form").submit(function (event) {
-      let formData = new FormData($(this)[0]);
-
-      if(!formData.get('album_name') && !formData.get('images').name)
-        return false;
-
-      if(!formData.get('images').name) {
-        return true;
-      }
-
-      event.preventDefault();
-
-      let errorList;
-      if((errorList = this.querySelector('#upload_form ul.errorlist.nonfield')) === null) {
-        errorList = document.createElement('ul');
-        errorList.classList.add('errorlist', 'nonfield');
-        this.insertBefore(errorList, this.firstElementChild);
-      }
-
-      while(errorList.childElementCount > 0)
-        errorList.removeChild(errorList.firstElementChild);
-
-      let progress;
-      if((progress = this.querySelector('progress')) === null) {
-        progress = document.createElement('progress');
-        progress.value = 0;
-        let p = document.createElement('p');
-        p.appendChild(progress);
-        this.insertBefore(p, this.lastElementChild);
-      }
-
-      let dataHolder;
-
-      if(formData.get('album_name')) {
-        dataHolder = new FormData();
-        dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
-        dataHolder.set('album_name', formData.get('album_name'));
-        $.ajax({
-          method: 'POST',
-          url: "{{ url('sas:album_upload', album_id=object.id) }}",
-          data: dataHolder,
-          processData: false,
-          contentType: false,
-          success: onSuccess
-        });
-      }
-
-      let images = formData.getAll('images');
-      let imagesCount = images.length;
-      let completeCount = 0;
-
-      let poolSize = 1;
-      let imagePool = [];
-
-      while(images.length > 0 && imagePool.length < poolSize) {
-        let image = images.shift();
-        imagePool.push(image);
-        sendImage(image);
-      }
-
-      function sendImage(image) {
-        dataHolder = new FormData();
-        dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
-        dataHolder.set('images', image);
-
-        $.ajax({
-          method: 'POST',
-          url: "{{ url('sas:album_upload', album_id=object.id) }}",
-          data: dataHolder,
-          processData: false,
-          contentType: false,
-        })
-          .fail(onSuccess.bind(undefined, image))
-          .done(onSuccess.bind(undefined, image))
-          .always(next.bind(undefined, image));
-      }
-
-      function next(image, _, __) {
-        let index = imagePool.indexOf(image);
-        let nextImage = images.shift();
-
-        if(index !== -1)
-          imagePool.splice(index, 1);
-
-        if(nextImage) {
-          imagePool.push(nextImage);
-          sendImage(nextImage);
-        }
-      }
-
-      function onSuccess(image, data, _, __) {
-        let errors = [];
-
-        if ($(data.responseText).find('.errorlist.nonfield')[0])
-          errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
-
-        while(errors.length > 0)
-          errorList.appendChild(errors.shift());
-
-        progress.value = ++completeCount / imagesCount;
-        if(progress.value === 1 && errorList.children.length === 0)
-          document.location.reload()
-      }
-    });
-  </script>
-{% endblock %}
-