reworked image upload to use QPixel#fetch helper

Author: Oaphi

app/assets/javascripts/posts.js

@@ -57,6 +57,7 @@ $(() => {
 
     const $fileInput = $tgt.find('input[type="file"]');
     const files = /** @type {HTMLInputElement} */ ($fileInput[0]).files;
+    const form = /** @type {HTMLFormElement} */ ($tgt[0]);
 
     // TODO: MaxUploadSize is a site setting and can be changed
     if (files.length > 0 && files[0].size >= 2000000) {
@@ -80,40 +81,23 @@ $(() => {
       $tgt.find('.js-max-size').removeClass('has-color-red-700');
     }
 
-    const resp = await fetch($tgt.attr('action'), {
-      method: $tgt.attr('method'),
-      body: new FormData(/** @type {HTMLFormElement} */ ($tgt[0]))
+    const data = await QPixel.upload($tgt.attr('action'), form);
+
+    QPixel.handleJSONResponse(data, (data) => {
+      form.reset();
+  
+      const $postField = $('.js-post-field');
+      const postText = $postField.val()?.toString();
+      $postField.val(postText.replace(placeholder, `![Image_alt_text](${data.link})`));
+      $tgt.parents('.modal').removeClass('is-active');
+  
+      $postFields.trigger('change');
+    }, (data) => {
+      if (data.status === 'failed') {
+        const $postField = $('.js-post-field');
+        $postField.val($postField.val()?.toString().replace(placeholder, ''));
+      }
     });
-
-    const data = await resp.json();
-
-    if (resp.status === 200) {
-      $tgt.trigger('ajax:success', data);
-    }
-    else {
-      $tgt.trigger('ajax:failure', data);
-    }
-  });
-
-  $uploadForm.on('ajax:success', async (evt, data) => {
-    const $tgt = $(evt.target);
-    /** @type {HTMLFormElement} */ ($tgt[0]).reset();
-
-    const $postField = $('.js-post-field');
-    const postText = $postField.val()?.toString();
-    $postField.val(postText.replace(placeholder, `![Image_alt_text](${data.link})`));
-    $tgt.parents('.modal').removeClass('is-active');
-
-    $postFields.trigger('change')
-  });
-
-  $uploadForm.on('ajax:failure', async (evt, data) => {
-    const $tgt = $(evt.target);
-    const $postField = $('.js-post-field');
-    const error = data['error'];
-    QPixel.createNotification('danger', error);
-    $tgt.parents('.modal').removeClass('is-active');
-    $postField.val($postField.val()?.toString().replace(placeholder, ''));
   });
 
   /**

app/assets/javascripts/qpixel_api.js

@@ -457,6 +457,15 @@ window.QPixel = {
     return QPixel.parseJSONResponse(resp, 'Failed to vote');
   },
 
+  upload: async (url, form) => {
+    const resp = await QPixel.fetch(url, {
+      method: 'POST',
+      body: new FormData(form)
+    });
+
+    return QPixel.parseJSONResponse(resp, 'Failed to upload');
+  },
+
   archiveThread: async (id) => {
     const resp = await QPixel.fetchJSON(`/comments/thread/${id}/archive`, {}, {
       headers: { 'Accept': 'application/json' },

app/controllers/posts_controller.rb

@@ -510,14 +510,16 @@ def document
 
   def upload
     unless helpers.valid_upload?(params[:file])
-      render json: { error: "Images must be one of #{helpers.allowed_upload_extensions.join(', ')}" },
+      render json: { status: 'failed',
+                     message: "Images must be one of #{helpers.allowed_upload_extensions.join(', ')}" },
              status: :bad_request
       return
     end
 
     @blob = ActiveStorage::Blob.create_and_upload!(io: params[:file], filename: params[:file].original_filename,
                                                    content_type: params[:file].content_type)
-    render json: { link: uploaded_url(@blob.key) }
+    render json: { status: 'success',
+                   link: uploaded_url(@blob.key) }
   end
 
   def help_center

global.d.ts

@@ -213,6 +213,10 @@ type QPixelResponseJSON<
   Success extends object = object
 > = (Success & QPixelSuccessResponseJSON) | QPixelFailedResponseJSON
 
+type QPixelUploadResponseJSON = QPixelResponseJSON<{
+  link: string
+}>
+
 type QPixelVoteResponseJSON = QPixelResponseJSON<{
   vote_id: number
   upvotes: number
@@ -640,6 +644,12 @@ interface QPixel {
    */
   vote?: (postId: string, voteType: string) => Promise<QPixelVoteResponseJSON>
 
+  /**
+   * @param url upload endpoint URL (differs between routes)
+   * @param form upload form to get the file from
+   */
+  upload?: (url: string, form: HTMLFormElement) => Promise<QPixelUploadResponseJSON>
+
   // qpixel_dom
   DOM?: QPixelDOM;
   // qpixel Markdown