-
@@ -84,8 +84,12 @@ function downloadFile(url) {
}
function updateItemsData(items) {
+ if (!items || !Array.isArray(items)) {
+ return [];
+ }
+
return items.map((item) => {
- if (isImageFile(item.url)) {
+ if (item && item.url && isImageFile(item.url)) {
// Handle images
const img = new Image();
img.src = item.url;
@@ -97,7 +101,6 @@ function updateItemsData(items) {
return item;
});
}
-
// Props
const props = defineProps({
galleryId: {
@@ -133,11 +136,36 @@ watch(
{ deep: true, immediate: true }
);
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'delete-image']);
-function removeItem(index) {
+function removeItem(index, url) {
const newItems = [...props.modelValue];
newItems.splice(index, 1);
emit('update:modelValue', newItems);
+ emit('delete-image', url, index);
+}
+
+function startDrag(event, index) {
+ event.dataTransfer.effectAllowed = 'move';
+ event.dataTransfer.dropEffect = 'move';
+ event.dataTransfer.setData('imageIndex', index);
+}
+
+function onDrop(event, dropIndex) {
+ const dragIndex = event.dataTransfer.getData('imageIndex');
+
+ if (dragIndex === dropIndex.toString()) return;
+
+ // Create a copy of the images array
+ const newImages = [...props.modelValue];
+
+ // Remove the dragged item
+ const draggedItem = newImages.splice(dragIndex, 1)[0];
+
+ // Insert it at the new position
+ newImages.splice(dropIndex, 0, draggedItem);
+
+ // Update the model
+ emit('update:modelValue', newImages);
}
diff --git a/src/views/uikit/ImageUploader.vue b/src/views/uikit/ImageUploader.vue
index f64769e..53271c2 100644
--- a/src/views/uikit/ImageUploader.vue
+++ b/src/views/uikit/ImageUploader.vue
@@ -80,30 +80,42 @@ const uploadedFiles = ref([...props.modelValue]);
// Define FilePond component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'upload', 'delete']);
// Handle server responses for file processing
function handleProcessResponse(response) {
- const data = JSON.parse(response);
- const fileName = data.data[0].fileRecord.fileName;
- uploadedFiles.value.push(fileName);
- emit('update:modelValue', uploadedFiles);
- return fileName;
+ if (props.mode === 'public') {
+ const data = JSON.parse(response);
+ const publicUrl = data.data[0].fileRecord.publicUrl;
+ const fileName = data.data[0].fileRecord.fileName;
+ uploadedFiles.value.push(publicUrl);
+ emit('update:modelValue', uploadedFiles);
+ emit('upload', uploadedFiles);
+ return publicUrl;
+ } else {
+ const data = JSON.parse(response);
+ const privateUrl = data.data[0].fileRecord.privateUrl;
+ const fileName = data.data[0].fileRecord.fileName;
+ uploadedFiles.value.push(privateUrl);
+ emit('update:modelValue', uploadedFiles);
+ emit('upload', uploadedFiles);
+ return privateUrl;
+ }
}
// Handle server responses for file revert
function handleRevertResponse(response) {
const data = JSON.parse(response);
- const fileId = data.data.fileRecord.id;
-
+ const fileName = data.data;
// Find and remove the file name from uploadedFiles
- const fileIndex = uploadedFiles.value.findIndex((name) => name === fileId);
+ const fileIndex = uploadedFiles.value.findIndex((name) => name === fileName);
if (fileIndex !== -1) {
uploadedFiles.value.splice(fileIndex, 1);
emit('update:modelValue', uploadedFiles);
+ emit('delete', uploadedFiles);
}
- return fileId;
+ return fileName;
}