Skip to content

update ABFieldImage.js,upload multiple pictures at one time, Objeccts-add field-image attachment #317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Joshua-ChiangMai wants to merge 3 commits into
base: master
Choose a base branch
from
Open

update ABFieldImage.js,upload multiple pictures at one time, Objeccts-add field-image attachment #317

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fcdfd6a
Update ABFieldImage.js
Joshua-ChiangMai Aug 4, 2025
0526b2e
YOUR COMMIT MESSAGE
Joshua-ChiangMai Aug 7, 2025
eac0460
fix: update ABFieldImage.js,upload multiple pictures at one time,Inte…
Joshua-ChiangMai Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 174 additions & 57 deletions src/rootPages/Designer/properties/dataFields/ABFieldImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*
/*
* ABFieldImage
* A Property manager for our ABFieldImage.
*/
Expand Down Expand Up @@ -140,17 +140,17 @@ export default function (AB) {
"Drag and drop or click here"
)}</div>
</div>
<div class="image-data-field-image" style="display:none;">
<a style="" class="ab-delete-photo" href="javascript:void(0);"><i class="fa fa-times delete-image" style="display:none;"></i></a>
<div class="image-data-field-images" style="display:flex; flex-wrap:wrap; gap:5px;">
<!-- Images will be added here dynamically -->
</div>
</div>
</div>`,
apiOnly: true,
inputName: "file",
multiple: false,
multiple: true, // Modified to support multiple file uploads, test ok
name: "defaultImageUrl",
height: 105,
width: 150,
width: 350, // Increase width to accommodate multiple images
on: {
// when a file is added to the uploader
onBeforeFileAdd: function (item) {
Expand Down Expand Up @@ -227,44 +227,96 @@ export default function (AB) {
}

if (value && isUseDefaultImage) {
//Show default image
// Handle multiple UUID values (separated by commas)
const uuids = value.split(',').filter(uuid => uuid.trim());

uploader.attachEvent("onAfterRender", () => {
const parentContainer = uploader.$view.querySelector(
".default-image-holder"
);
parentContainer.querySelector(
".image-data-field-icon"
).style.display = "none";

const image = parentContainer.querySelector(
".image-data-field-image"
).style.display = uuids.length ? "none" : "";
const imagesContainer = parentContainer.querySelector(
".image-data-field-images"
);
image.style.display = "";
image.style.backgroundImage = `url('${this.urlImage(value)}')`;
image.setAttribute("image-uuid", value);

parentContainer.querySelector(".delete-image").style.display =
"table-cell";
imagesContainer.style.display = uuids.length ? "flex" : "none";

// Clear existing images
imagesContainer.innerHTML = '';

// add all images
uuids.forEach(uuid => {
if (!uuid) return;

const imageDiv = document.createElement('div');
imageDiv.className = 'image-data-field-image';
imageDiv.style.cssText = `
position: relative;
width: 80px;
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('${this.urlImage(uuid)}');
margin: 2px;
`;

const deleteBtn = document.createElement('a');
deleteBtn.className = 'ab-delete-photo';
deleteBtn.href = 'javascript:void(0);';
deleteBtn.style.cssText = `
position: absolute;
top: 0;
right: 0;
background: rgba(0,0,0,0.5);
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
`;

const icon = document.createElement('i');
icon.className = 'fa fa-times delete-image';
deleteBtn.appendChild(icon);

deleteBtn.addEventListener('click', (e) => {
e.stopPropagation();

// Remove a UUID from an array
const index = uuids.indexOf(uuid);
if (index !== -1) {
uuids.splice(index, 1);
$$(ids.defaultImageUrl).setValue(uuids.join(','));
}

// Remove from DOM
imageDiv.remove();

// If there are no pictures, show the upload prompt
if (uuids.length === 0) {
parentContainer.querySelector(
".image-data-field-icon"
).style.display = "";
imagesContainer.style.display = "none";
}
});

imageDiv.appendChild(deleteBtn);
imagesContainer.appendChild(imageDiv);
});
});

// Add click event handling
uploader.$view.addEventListener("click", (e) => {
if (e.target.className.indexOf("delete-image") > -1) {
const parentContainer = uploader.$view.querySelector(
".default-image-holder"
);
parentContainer.querySelector(
".image-data-field-icon"
).style.display = "";

const image = parentContainer.querySelector(
".image-data-field-image"
);
image.style.display = "none";
image.style.backgroundImage = "";
image.setAttribute("image-uuid", "");

parentContainer.querySelector(".delete-image").style.display =
"none";
if (e.target.className.indexOf("delete-image") > -1 ||
e.target.parentElement.className.indexOf("ab-delete-photo") > -1) {
// Event handled on image element
return;
}
});
}
Expand All @@ -276,47 +328,112 @@ export default function (AB) {

const uploader = $$(ids.defaultImageUrl);
uploader.config.upload = url;

// 用于存储当前上传的图片UUID
const currentImages = [];

uploader.attachEvent("onFileUpload", (file, response) => {
$$(ids.defaultImageUrl).setValue(response.data.uuid);

const uuid = response.data.uuid;
currentImages.push(uuid);
$$(ids.defaultImageUrl).setValue(currentImages.join(','));

const parentContainer = uploader.$view.querySelector(
".default-image-holder"
);
parentContainer.querySelector(
".image-data-field-icon"
).style.display = "none";

const image = parentContainer.querySelector(
".image-data-field-image"
const imagesContainer = parentContainer.querySelector(
".image-data-field-images"
);
image.style.display = "";
image.style.backgroundImage = `url('${this.urlImage(
response.data.uuid
)}')`;

image.setAttribute("image-uuid", response.data.uuid);

parentContainer.querySelector(".delete-image").style.display =
"table-cell";
imagesContainer.style.display = "flex";

// Used to store the UUID of the currently uploaded image
const imageDiv = document.createElement('div');
imageDiv.className = 'image-data-field-image';
imageDiv.style.cssText = `
position: relative;
width: 80px;
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('${this.urlImage(uuid)}');
margin: 2px;
`;

const deleteBtn = document.createElement('a');
deleteBtn.className = 'ab-delete-photo';
deleteBtn.href = 'javascript:void(0);';
deleteBtn.style.cssText = `
position: absolute;
top: 0;
right: 0;
background: rgba(0,0,0,0.5);
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
`;

const icon = document.createElement('i');
icon.className = 'fa fa-times delete-image';
deleteBtn.appendChild(icon);

deleteBtn.addEventListener('click', (e) => {
e.stopPropagation();

// 从数组中移除UUID
const index = currentImages.indexOf(uuid);
if (index !== -1) {
currentImages.splice(index, 1);
$$(ids.defaultImageUrl).setValue(currentImages.join(','));
}

// 从DOM中移除
imageDiv.remove();

// 如果没有图片了，显示上传提示
if (currentImages.length === 0) {
parentContainer.querySelector(
".image-data-field-icon"
).style.display = "";
imagesContainer.style.display = "none";
}
});

imageDiv.appendChild(deleteBtn);
imagesContainer.appendChild(imageDiv);
});

uploader.attachEvent("onAfterRender", () => {
const parentContainer = uploader.$view.querySelector(
".default-image-holder"
);
parentContainer.querySelector(
".image-data-field-icon"
).style.display = "";

const image = parentContainer.querySelector(
".image-data-field-image"
const imagesContainer = parentContainer.querySelector(
".image-data-field-images"
);
image.style.display = "none";
image.style.backgroundImage = "";
image.setAttribute("image-uuid", "");

parentContainer.querySelector(".delete-image").style.display =
"none";
imagesContainer.style.display = "none";
imagesContainer.innerHTML = '';

// 初始化当前图片数组
const initialValue = $$(ids.defaultImageUrl).getValue();
if (initialValue) {
currentImages.length = 0;
initialValue.split(',').forEach(uuid => {
if (uuid.trim()) currentImages.push(uuid.trim());
});
}
});

uploader.addDropZone(uploader.$view);
uploader.render();

Expand All @@ -339,4 +456,4 @@ export default function (AB) {
}

return ABFieldImage;
}
}
Loading