На сайте имеется админка, где через модальное окно редактируются определенные сущности, например, акции. Акции можно присвоить картинку:
Акция сохраняется, окно закрывается, картинка у конкретной акции отображается. Но если обновить страницу, и попробовать снова отредактировать акцию, то картинка уже не будет закреплена за этой акцией. И если, например, отредактировать текст и сохранить, то картинка слетит:
Подскажите, пожалуйста, каким образом можно сделать так, чтобы текущая картинка акции всегда подтягивалась в модальном окне.
Функция, отвечающая за рендер окна после нажатия на кнопку редактирования акции:
/**
* Edit button handler
* @param event
*/
function handleEditButtonClick(event) {
$('#stockIdDiv').removeClass('d-none')
$('.modal-title').text("Редактировать акцию")
let stockId = event.target.dataset.stockId
stockModalClearFields()
function renderModalWindowEdit(stock) {
let stockText = stock.stockText
$("#stockId").val(stock.id)
$("#stockTitle").val(stock.stockTitle)
$('#stockText').summernote('code', stockText)
$("#startDate").val(stock.startDate)
$("#endDate").val(stock.endDate)
$("#published").prop('checked', stock.published)
}
fetch(stockApiUrl + `/${stockId}`, {
method: 'GET',
headers: myHeaders
}).then(response => response.json()).then(stock => renderModalWindowEdit(stock))
}
Функция валидации значений полей
/**
* function validate fields in modal window
* @param event
*/
function checkFields(event) {
if (event.target.dataset.toggleId === 'submit') {
let stockTitle = document.getElementById('stockTitle')
let stockText = document.getElementById('stockText')
let startDate = document.getElementById('startDate')
let filename = "default.jpg"; //картинка, закинутая заранее в директорию.
//На неё меняется картинка акции, когда после редактирования слетает актуальная картинка.
try {
let tempfilename = $('#fileImgInput')[0].files[0].name;
if (tempfilename.indexOf('fakepath') === -1) {
filename = tempfilename;
} else {
filename = $(tempfilename).val().replace(/C:\\fakepath\\/i, '')
invalidModalField("Ошибка загрузки. Повторите выбор файла", stockImgUrl)
}
} catch (err) {
console.log("name of file not found");
}
if (stockTitle.value === '') {
invalidModalField("Заполните заголовок акции", stockTitle)
} else if (stockText.value === '') {
invalidModalField("Заполните описание акции", stockText)
} else if (startDate.value === '') {
invalidModalField("Заполните начальную дату", startDate)
} else {
handleSaveChangesButton(event, filename)
}
}
}
Ну и сам инпут:
<form>
<div>
<label for="fileImgInput">Изображение</label>
<input id="fileImgInput" type="file" accept="image/*" class="form-control">
</div>
</form>
Функция сохранения:
/**
* modal window "save changes" button handler
*/
function handleSaveChangesButton(event, file_name_stockImg) {
let startDate = $('#startDate').val();
let stockPublished;
if (document.getElementById('published').checked) {
stockPublished = "true";
} else {
stockPublished = "false";
}
startDate = moment(startDate).format("YYYY-MM-DD")
let endDate = ""
if ($('#endDate').val() !== null || $('#endDate').val() !== "") {
endDate = $('#endDate').val()
endDate = moment(endDate).format("YYYY-MM-DD")
}
if (endDate === "Invalid date") {
endDate = ""
}
const stock = {
id: $('#stockId').val(),
stockImg: file_name_stockImg,
stockTitle: $('#stockTitle').val(),
stockText: $('#stockText').summernote('code'),
startDate: startDate,
endDate: endDate,
published: stockPublished
}
let method = (stock.id !== '' ? 'PUT' : 'POST')
fetchStock(stock, method)
function fetchStock(stock, method) {
fetch(stockApiUrl, {
method: method,
headers: myHeaders,
body: JSON.stringify(stock)
}).then(function (response) {
if (response.status === 200) {
successActionMainPage("#mainWindowAlert", "Акция успешно сохранена", "success")
} else {
successActionMainPage("#mainWindowAlert", "Акция не сохранена", "error")
}
})
}
$('#stockModal').modal('hide')
}