|
|
|
|
@ -14,14 +14,14 @@ export default class extends Controller {
@@ -14,14 +14,14 @@ export default class extends Controller {
|
|
|
|
|
|
|
|
|
|
openDialog() { |
|
|
|
|
this.dialogTarget.classList.add('active'); |
|
|
|
|
this.errorTarget.textContent = ''; |
|
|
|
|
this.progressTarget.style.display = 'none'; |
|
|
|
|
this.clearError(); |
|
|
|
|
this.hideProgress(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
closeDialog() { |
|
|
|
|
this.dialogTarget.classList.remove('active'); |
|
|
|
|
this.errorTarget.textContent = ''; |
|
|
|
|
this.progressTarget.style.display = 'none'; |
|
|
|
|
this.clearError(); |
|
|
|
|
this.hideProgress(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
connect() { |
|
|
|
|
@ -42,17 +42,19 @@ export default class extends Controller {
@@ -42,17 +42,19 @@ export default class extends Controller {
|
|
|
|
|
this.handleFile(e.dataTransfer.files[0]); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// Ensure initial visibility states
|
|
|
|
|
this.hideProgress(); |
|
|
|
|
this.clearError(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async handleFile(file) { |
|
|
|
|
if (!file) return; |
|
|
|
|
this.errorTarget.textContent = ''; |
|
|
|
|
this.progressTarget.style.display = ''; |
|
|
|
|
this.progressTarget.textContent = 'Preparing upload...'; |
|
|
|
|
this.clearError(); |
|
|
|
|
this.showProgress('Preparing upload...'); |
|
|
|
|
try { |
|
|
|
|
// NIP98: get signed HTTP Auth event from window.nostr
|
|
|
|
|
if (!window.nostr || !window.nostr.signEvent) { |
|
|
|
|
this.errorTarget.textContent = 'Nostr extension not found.'; |
|
|
|
|
this.showError('Nostr extension not found.'); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
// Determine provider
|
|
|
|
|
@ -85,7 +87,7 @@ export default class extends Controller {
@@ -85,7 +87,7 @@ export default class extends Controller {
|
|
|
|
|
const formData = new FormData(); |
|
|
|
|
formData.append('uploadtype', 'media'); |
|
|
|
|
formData.append('file', file); |
|
|
|
|
this.progressTarget.textContent = 'Uploading...'; |
|
|
|
|
this.showProgress('Uploading...'); |
|
|
|
|
// Upload to backend proxy
|
|
|
|
|
const response = await fetch(proxyEndpoint, { |
|
|
|
|
method: 'POST', |
|
|
|
|
@ -96,14 +98,16 @@ export default class extends Controller {
@@ -96,14 +98,16 @@ export default class extends Controller {
|
|
|
|
|
}); |
|
|
|
|
const result = await response.json().catch(() => ({})); |
|
|
|
|
if (!response.ok || result.status !== 'success' || !result.url) { |
|
|
|
|
this.errorTarget.textContent = result.message || `Upload failed (HTTP ${response.status})`; |
|
|
|
|
this.showError(result.message || `Upload failed (HTTP ${response.status})`); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.setImageField(result.url); |
|
|
|
|
this.progressTarget.textContent = 'Upload successful!'; |
|
|
|
|
this.showProgress('Upload successful!'); |
|
|
|
|
// clear file input so subsequent identical uploads work
|
|
|
|
|
if (this.hasFileInputTarget) this.fileInputTarget.value = ''; |
|
|
|
|
setTimeout(() => this.closeDialog(), 1000); |
|
|
|
|
} catch (e) { |
|
|
|
|
this.errorTarget.textContent = 'Upload error: ' + (e.message || e); |
|
|
|
|
this.showError('Upload error: ' + (e.message || e)); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -115,4 +119,39 @@ export default class extends Controller {
@@ -115,4 +119,39 @@ export default class extends Controller {
|
|
|
|
|
imageInput.dispatchEvent(new Event('input', { bubbles: true })); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Helpers to manage UI visibility and content
|
|
|
|
|
showProgress(text = '') { |
|
|
|
|
if (this.hasProgressTarget) { |
|
|
|
|
this.progressTarget.style.display = 'block'; |
|
|
|
|
this.progressTarget.textContent = text; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
hideProgress() { |
|
|
|
|
if (this.hasProgressTarget) { |
|
|
|
|
this.progressTarget.style.display = 'none'; |
|
|
|
|
this.progressTarget.textContent = ''; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
showError(message) { |
|
|
|
|
if (this.hasErrorTarget) { |
|
|
|
|
this.errorTarget.textContent = message; |
|
|
|
|
this.errorTarget.style.display = 'block'; |
|
|
|
|
// make assistive tech aware
|
|
|
|
|
this.errorTarget.setAttribute('role', 'alert'); |
|
|
|
|
this.hideProgress(); |
|
|
|
|
// clear file input so user can re-select the same file
|
|
|
|
|
if (this.hasFileInputTarget) this.fileInputTarget.value = ''; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
clearError() { |
|
|
|
|
if (this.hasErrorTarget) { |
|
|
|
|
this.errorTarget.textContent = ''; |
|
|
|
|
this.errorTarget.style.display = 'none'; |
|
|
|
|
this.errorTarget.removeAttribute('role'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|