Skip to content
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

Fix: Image in related table #1768

Merged
merged 2 commits into from
Jun 21, 2023
Merged

Fix: Image in related table #1768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f7160c
Moved image resize to when file is loaded
May 12, 2023
321267d
Removed roudtripping image data
May 12, 2023
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
2 changes: 1 addition & 1 deletion src/controls/editor/editform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const createForm = function createForm(obj) {
const imageClass = val ? '' : 'o-hidden';
el = `<div class="validate ${cls}"><label>${label}<br>`;
el += `<img src="${val}" id="image-upload" class="${imageClass}"/>`;
el += `<input type="file" name="bildfil" id="${id}" value="${val}" accept="image/*"${disabled}></label>`;
el += `<input type="file" name="bildfil" id="${id}" accept="image/*"${disabled}></label>`;
el += `<input id="o-delete-image-button" class="${imageClass}" type="button" aria-label="Ta bort bild" value="Ta bort bild"${disabled}>`;
el += '</div>';
break;
Expand Down
60 changes: 25 additions & 35 deletions src/controls/editor/edithandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -770,7 +770,6 @@ function onAttributesSave(features, attrs) {
document.getElementById(`o-save-button-${currentLayer}`).addEventListener('click', (e) => {
const editEl = {};
const valid = {};
const fileReaders = [];
attrs.forEach((attribute) => {
// Get the input container class
const containerClass = `.${attribute.elId}`;
Expand Down Expand Up @@ -798,33 +797,13 @@ function onAttributesSave(features, attrs) {
// No other validation is performed on searchList as the only thing that can be checked now is that value is in list
// and that is handled inside the searchList itself.
editEl[attribute.name] = attribute.searchList.getValue();
} else if (attribute.type === 'image') {
// File input's value is the filename, but the image itself is stored in the model
editEl[attribute.name] = attribute.val;
} else { // Read value from input text, textarea or select
editEl[attribute.name] = inputValue;
}
}
// Check if file. If file, read and trigger resize
if (inputType === 'file') {
const input = document.getElementById(attribute.elId);
const file = input.files[0];

if (file) {
const fileReader = new FileReader();
fileReader.onload = () => {
getImageOrientation(file, (orientation) => {
imageresizer(fileReader.result, attribute, orientation, (resized) => {
editEl[attribute.name] = resized;
const imageresized = new CustomEvent('imageresized');
document.dispatchEvent(imageresized);
});
});
};

fileReader.readAsDataURL(file);
fileReaders.push(fileReader);
} else {
editEl[attribute.name] = document.getElementById(attribute.elId).getAttribute('value');
}
}

// Validate form input
const errorOn = document.querySelector(`[id="${inputId}"]`);
Expand Down Expand Up @@ -967,13 +946,7 @@ function onAttributesSave(features, attrs) {

// If valid, continue
if (valid.validates) {
if (fileReaders.length > 0 && fileReaders.every(reader => reader.readyState === 1)) {
document.addEventListener('imageresized', () => {
attributesSaveHandler(features, editEl);
});
} else {
attributesSaveHandler(features, editEl);
}
attributesSaveHandler(features, editEl);

document.getElementById(`o-save-button-${currentLayer}`).blur();
modal.closeModal();
Expand Down Expand Up @@ -1006,6 +979,9 @@ function addListener() {
return fn;
}

/**
* Returns a function that adds an event handler to read an image file when user selects a file.
* */
function addImageListener() {
const fn = (obj) => {
const fileReader = new FileReader();
Expand All @@ -1014,16 +990,30 @@ function addImageListener() {
if (ev.target.files && ev.target.files[0]) {
document.querySelector(`${containerClass} img`).classList.remove('o-hidden');
document.querySelector(`${containerClass} input[type=button]`).classList.remove('o-hidden');
fileReader.onload = (e) => {
document.querySelector(`${containerClass} img`).setAttribute('src', e.target.result);
fileReader.onload = () => {
// When the file has been read, rotate it and resize to configured max size or default max
// Don't know why it's rotated. Probably something to do with iphones that store images upside down.
getImageOrientation(ev.target.files[0], (orientation) => {
imageresizer(fileReader.result, obj, orientation, (resized) => {
// Display the image in the form
document.querySelector(`${containerClass} img`).setAttribute('src', resized);
// Store the image data in the model so it can be retreived when saving without having to read the file again
// or pick it up from the img tag
// eslint-disable-next-line no-param-reassign
obj.val = resized;
});
});
};
fileReader.readAsDataURL(ev.target.files[0]);
}
});

// Find the remove button and attach event handler.
document.querySelector(`${containerClass} input[type=button]`).addEventListener('click', (e) => {
document.getElementById(obj.elId).setAttribute('value', '');
// Clear the filename
document.getElementById(obj.elId).value = '';
// Also clear the model value
// eslint-disable-next-line no-param-reassign
obj.val = '';
document.querySelector(`${containerClass} img`).classList.add('o-hidden');
e.target.classList.add('o-hidden');
});
Expand Down