Upload image ajax

FossilOrigin-Name: efc75f41345b6fc27e7002152f5a198b69864197f3e2c5f04fc170bdfa3d7015

dist/js/main.js

@@ -135,13 +135,31 @@
     {
         let query_str = construct_query(query);
         let xhr = new XMLHttpRequest();
-        xhr.open("POST", url);
+        xhr.open(type, url);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         xhr.onreadystatechange = function() {
             if (this.readyState === XMLHttpRequest.DONE)
                 cb(this, cb_args);
         };
         xhr.send(query_str);
+        return xhr;
+    }
+
+    function upload_file(url, file_name, file, cb, cb_args, onprogress, onload)
+    {
+        let xhr = new XMLHttpRequest();
+        let form_data = new FormData();
+        xhr.open("post", url);
+        form_data.append(file_name, file);
+        // xhr.setRequestHeader("Content-Type", "multipart/form-data");
+        xhr.onreadystatechange = function() {
+            if (this.readyState === XMLHttpRequest.DONE)
+                cb(this, cb_args);
+        };
+        xhr.upload.onprogress = onprogress;
+        xhr.upload.onload = onload;
+        xhr.send(form_data);
+        return xhr;
     }
 
     function change_count_text(val, sum)
@@ -206,7 +224,7 @@
                          id: status.id,
                          itype: type.value
                      },
-                     1,
+                     "POST",
                      (xhr, args) => {
                          if (xhr.status !== 200)
                          {
@@ -269,6 +287,9 @@
         
         info.className = "upload-info";
         info.innerHTML = `<span class="filesize">${filesize_to_str(file.size)}</span> &bull; <span class="filename">${html_encode(file.name)}</span>`;
+        let progress_div = document.createElement("div");
+        progress_div.className = "file-progress";
+        info.appendChild(progress_div);
         
         content.src = file_content;
         content.className = "upload-content";
@@ -331,6 +352,28 @@
                     let file_id = filepicker_add(id, file);
                     
                     file_upload_dom.appendChild(construct_file_upload(file_id, file, e.target.result));
+
+                    let xhr = upload_file("/treebird_api/v1/attachment",
+                                          "file",
+                                          file,
+                                          (xhr, args) => {
+                                              if (xhr.status !== 200)
+                                              {
+                                                  // Undo action if failure
+                                                  // interact_action(status, type);
+                                              }
+                                          }, null,
+                                          (e) => {
+                                              let upload_file_container = document.getElementById("file-id-"+file_id);
+                                              let upload_file_progress = upload_file_container.querySelector(".file-progress");
+                                              // Add offset of 3
+                                              upload_file_progress.style.width = 3+((e.loaded/e.total)*97);
+                                          },
+                                          (e) => {
+                                              let upload_file_container = document.getElementById("file-id-"+file_id);
+                                              upload_file_container.querySelector(".upload-content").style.opacity = "1.0";
+                                              upload_file_container.querySelector(".file-progress").remove();
+                                          });
                 }
             })(file);
             reader.readAsDataURL(file);

dist/treebird.css

@@ -2099,10 +2099,12 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
     object-fit: cover;
     opacity: 0.4;
     display: block;
+    transition: .3s opacity;
 }
 
 .file-upload .upload-info
 {
+    position: relative;
     background: linear-gradient(#fbfbfb, #f0f0f4);
     display: block;
     white-space: nowrap;
@@ -2113,6 +2115,17 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
     color: #505050;
 }
 
+.file-upload .upload-info .file-progress
+{
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    height: 3px;
+    width: 3%;
+    background-color: rgba(180, 0, 0, 0.7);
+    transition: .07s width;
+}
+
 .upload-info .filesize
 {
     font-weight: bold;

src/attachments.c

@@ -68,7 +68,7 @@ int try_upload_media(struct mstdnt_storage** storage,
                 .filetype = content->filetype,
             },
             .thumbnail = NULL,
-            .description = "Treebird image"
+            .description = NULL,
         };
         
         if (mastodont_upload_media(api,
@@ -77,7 +77,6 @@ int try_upload_media(struct mstdnt_storage** storage,
                                    *storage + i,
                                    *attachments + i))
         {
-            // EPICFAIL
             for (size_t j = 0; j < i; ++j)
             {
                 if (media_ids) free((*media_ids)[j]);