jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: open file selection in BannerEditor and CreatorLogoEditor when no image to edit

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-04-24 22:07:47 -04:00
parent c7353626a1
commit 22f9d5c6bd
2 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/views/creators/BannerEditor.vue
View File

@@ -103,7 +103,10 @@ const uploadProgress = ref(0)
const { t } = useI18n() const { t } = useI18n()
const triggerFileInput = () => { const triggerFileInput = () => {
fileInput.value.click() if (fileInput.value) {
fileInput.value.value = '' // Reset the input value to ensure the change event fires
fileInput.value.click()
}
} }
const onFileSelected = (event) => { const onFileSelected = (event) => {
@@ -124,23 +127,30 @@ const onFileSelected = (event) => {
} }
const startEditing = () => { const startEditing = () => {
if (fileUrl.value && fileUrl.value !== fallbackUrl) { if (fileUrl.value && fileUrl.value.startsWith('data:')) {
// Use our API client to get the image // Only try to load the image if it's a data URL (newly selected image)
client.get(fileUrl.value, { responseType: 'blob' }) const blob = dataURLtoBlob(fileUrl.value)
.then(response => { selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
const blob = response.data showCropper.value = true
selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' }) } else {
// Create a local URL for the cropper // If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
fileUrl.value = URL.createObjectURL(blob) triggerFileInput()
showCropper.value = true
})
.catch(error => {
console.error('Error loading image for editing:', error)
errorMessage.value = t('errors.imageLoad')
})
} }
} }
// Helper function to convert data URL to blob
const dataURLtoBlob = (dataURL) => {
const arr = dataURL.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
const applyCrop = () => { const applyCrop = () => {
if (!cropper.value) return if (!cropper.value) return

40
frontend/src/views/creators/CreatorLogoEditor.vue
View File

@@ -108,7 +108,10 @@ const TARGET_HEIGHT = 200
const { t } = useI18n(); const { t } = useI18n();
const triggerFileInput = () => { const triggerFileInput = () => {
fileInput.value.click() if (fileInput.value) {
fileInput.value.value = '' // Reset the input value to ensure the change event fires
fileInput.value.click()
}
} }
const onFileSelected = (event) => { const onFileSelected = (event) => {
@@ -129,23 +132,30 @@ const onFileSelected = (event) => {
} }
const startEditing = () => { const startEditing = () => {
if (fileUrl.value && fileUrl.value !== fallbackUrl) { if (fileUrl.value && fileUrl.value.startsWith('data:')) {
// Use our API client to get the image // Only try to load the image if it's a data URL (newly selected image)
client.get(fileUrl.value, { responseType: 'blob' }) const blob = dataURLtoBlob(fileUrl.value)
.then(response => { selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
const blob = response.data showCropper.value = true
selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' }) } else {
// Create a local URL for the cropper // If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
fileUrl.value = URL.createObjectURL(blob) triggerFileInput()
showCropper.value = true
})
.catch(error => {
console.error('Error loading image for editing:', error)
errorMessage.value = t('errors.imageLoad')
})
} }
} }
// Helper function to convert data URL to blob
const dataURLtoBlob = (dataURL) => {
const arr = dataURL.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
const applyCrop = () => { const applyCrop = () => {
if (!cropper.value) return if (!cropper.value) return