alchemy-media 0.7.4 → 0.7.5

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.7.5 (2023-07-28)
+
+* Remove old reference to `chimera/mediafield` script
+* Add upload percentage feedback to `al-file` element
+
 ## 0.7.4 (2023-03-13)
 
 * By default, conceal SVGs that have the `graphics-symbol` role from assistive technologies

package/assets/stylesheets/media_elements/_file.scss

@@ -10,14 +10,29 @@ al-file {
 		display: none !important;
 	}
 
-	&:not(.uploading) .uploading-icon {
-		display: none;
+	&:not(.uploading) {
+		.upload-percentage,
+		.uploading-icon {
+			display: none;
+		}
 	}
 
 	&.uploading {
 		.empty-icon {
 			display: none !important;
 		}
+
+		.upload-percentage {
+			position: absolute;
+			bottom: 4px;
+			width: 100%;
+			text-align: center;
+			font-size: 1.5rem;
+		}
+
+		.uploading-icon {
+			margin-top: -7px;
+		}
 	}
 
 	.al-file-drop-target {

package/element/al_file.js

@@ -144,7 +144,7 @@ AlFile.setMethod(function updatePreview(value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.7.1
+ * @version  0.7.5
  */
 AlFile.setMethod(async function uploadFile(config) {
 
@@ -172,13 +172,30 @@ AlFile.setMethod(async function uploadFile(config) {
 		form_data.append('accept', this.accept);
 	}
 
+	let upload_percentage = this.querySelector('.upload-percentage');
+
+	if (upload_percentage) {
+		upload_percentage.textContent = '';
+	}
+
 	let response;
 
 	try {
-		response = await Blast.fetch({
-			url  : url,
-			post : form_data,
+		let pledge = Blast.fetch({
+			url     : url,
+			post    : form_data,
+			timeout : 60 * 1000,
 		});
+
+		let request = pledge.request;
+
+		request.on('progress_upload', data => {
+			if (upload_percentage) {
+				upload_percentage.textContent = Math.round(data.percentage) + '%';
+			}
+		});
+
+		response = await pledge;
 	} catch (err) {
 
 		let alchemy_field = this.queryUp('al-field');

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-media",
 	"description": "The media plugin for Alchemy",
-	"version": "0.7.4",
+	"version": "0.7.5",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-media.git"

package/view/element/al_file.hwk

@@ -4,7 +4,8 @@
 	<al-icon
 		icon-name="spinner"
 		icon-style="duotone"
-		class="uploading-icon fa-spin-pulse"
+		icon-flags="spin-pulse"
+		class="uploading-icon"
 	></al-icon>
 
 	<al-icon
@@ -13,6 +14,8 @@
 		class="empty-icon"
 	><% if (self.value) $0.hidden = true %></al-icon>
 
+	<span class="upload-percentage"></span>
+
 	<input
 		class="al-file-input"
 		type="file"

package/view/form/inputs/edit/file.hwk

@@ -1,7 +1,3 @@
-<%
-script('chimera/mediafield');
-style('chimera/mediafield');
-%>
 <al-file
 	class="alchemy-field-value"
 	value=<% value %>