image handling fixes

src/services/apiClient.js

@@ -7,8 +7,10 @@ let refreshPromise = null
 
 function createConfig(options = {}) {
   const token = localStorage.getItem('accessToken');
+  const isFormData = options.body instanceof FormData;
+
   const headers = {
-    'Content-Type': 'application/json',
+    ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
     ...options.headers,
   };
 

src/views/DetailsView/DetailsViewImages.vue

@@ -54,37 +54,21 @@ function onFileInputChange(event) {
   event.target.value = ''
 }
 
-async function handleUpload({ fileList: newFileList }) {
-  const file = newFileList[newFileList.length - 1]
+async function fetchImage(bustCache = false) {
   try {
-    await uploadImage(props.merchUuid, file.file)
+    let imgUrl = getImageUrl(props.merchUuid, 'full')
 
-    const { imgUrl } = await getImageUrl(props.merchUuid, 'full')
-
-    message.success('Image uploaded successfully.')
-
-    fileList.value = [
-      {
-        name: file.name,
-        url: imgUrl,
-        status: 'finished',
-      },
-    ]
-  } catch (error) {
-    message.error('Upload error: ' + (error.message || 'Unknown error.'))
-  }
-}
-
-onMounted(async () => {
-  try {
-    const imgUrl = getImageUrl(props.merchUuid, 'full');
+    if (bustCache) {
+      const separator = imgUrl.includes('?') ? '&' : '?'
+      imgUrl += `${separator}_t=${Date.now()}`
+    }
 
     await new Promise((resolve, reject) => {
-      const img = new Image();
-      img.src = imgUrl;
-      img.onload = () => resolve(imgUrl);
-      img.onerror = () => reject(new Error('Image not found'));
-    });
+      const img = new Image()
+      img.src = imgUrl
+      img.onload = () => resolve(imgUrl)
+      img.onerror = () => reject(new Error('Image not found'))
+    })
 
     fileList.value = [
       {
@@ -92,13 +76,28 @@ onMounted(async () => {
         url: imgUrl,
         status: 'finished',
       },
-    ];
+    ]
   } catch (error) {
-    fileList.value = [];
+    fileList.value = []
     if (!error.message.includes('404')) {
-      console.error('Error getting image: ', error);
+      console.error('Error getting image:', error)
     }
   }
+}
+
+async function handleUpload({ fileList: newFileList }) {
+  const file = newFileList[newFileList.length - 1]
+  try {
+    await uploadImage(props.merchUuid, file.file)
+    message.success('Image uploaded successfully.')
+    await fetchImage(true)
+  } catch (error) {
+    message.error('Upload error: ' + (error.message || 'Unknown error.'))
+  }
+}
+
+onMounted(async () => {
+  await fetchImage(false)
 });
 
 const showConfirmDelete = ref(false)