0

На сайте имеется админка, где через модальное окно редактируются определенные сущности, например, акции. Акции можно присвоить картинку:

введите сюда описание изображения

Акция сохраняется, окно закрывается, картинка у конкретной акции отображается. Но если обновить страницу, и попробовать снова отредактировать акцию, то картинка уже не будет закреплена за этой акцией. И если, например, отредактировать текст и сохранить, то картинка слетит:

введите сюда описание изображения

Подскажите, пожалуйста, каким образом можно сделать так, чтобы текущая картинка акции всегда подтягивалась в модальном окне.

Функция, отвечающая за рендер окна после нажатия на кнопку редактирования акции:

/**
* 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')
}

1 ответ 1

0

Нельзя присвоит значение для поля с типом file. Тебе нужно изменить логику работы. Например после сохранения акции с изображением у тебя в любом случае где-то должна быть связь что к чему относится, поэтому ты можешь сделать скрытый инпут в котором будешь хранить ссылку либо id изображения и уже в зависимости от этого инпута и инпута с типом файл ты можешь сохранять, обновлять либо удалять изображение у акции

4
  • Посмотри, пожалуйста, функцию сохранения акции, я добавил в ответе. Как можно реализовать сохранение через id изображения?
    – indie
    15 дек 2020 в 15:12
  • Название картинки у каждой конкретной акции при этом сохраняется в БД, может можно как-то подтянуть это название в js-код?
    – indie
    15 дек 2020 в 15:17
  • подскажи, пожалуйста, как реализовать взаимодействие между скрытым импутом и импут файлом.
    – indie
    15 дек 2020 в 15:48
  • Например после сохранения акции ты можешь вместо того чтоб заполнять инпут файл, заполнить скрытый инпут. Потом при обновлении акции ты можешь проверять состояние инпута с типом файл если он пустой то передавай значение из скрытого инпута если не пустой то обновляй изображение, а если и инпут файл и скрытый инпут пустые тогда удаляй у акции изображение
    – Darth KYL
    15 дек 2020 в 16:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.