diff --git a/dist/js/main.js b/dist/js/main.js index fb65821..ef2f170 100644 --- a/dist/js/main.js +++ b/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 = `${filesize_to_str(file.size)}${html_encode(file.name)}`; + 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); diff --git a/dist/treebird.css b/dist/treebird.css index 162ac44..557a128 100644 --- a/dist/treebird.css +++ b/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; diff --git a/src/attachments.c b/src/attachments.c index fb5a14e..e9288a8 100644 --- a/src/attachments.c +++ b/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]);