Я работаю над приложением, которое позволяет пользователям публиковать события. Я использую NodeJS, Express и Mongo.Как предотвратить загрузку загруженного изображения при редактировании формы?
Я создал форму, которая позволяет пользователям вводить сведения о мероприятии и загружать изображение, относящееся к событию. Я также создал форму, которая позволяет пользователю редактировать информацию о событии.
форма выглядит следующим образом:
Проблема:
- Пользователь заполняет форму с подробной информацией о событиях и прикрепляет изображение.
- Пользователь представляет образует
- Пользователь решает, что он хочет изменить название события, но Nothing Else
- Пользователь щелкает редактирования события, меняет название и представляет
- Проблемы: Даже если пользователь Ждет» t удалить изображение, связанное с событием, изображения больше нет.
Вот часть моего new.ejs файл (для размещения нового события, просто добавив это здесь для справки)
<script type="text/javascript" src="/js/eventform.js"></script>
<form action="/events"
method="POST"
enctype="multipart/form-data"
onSubmit="return(validate(this));" // validating user input
novalidate >
....
....
<input name="image" type="file" id="image" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="imageBorder" >
<div id="imageContainer">
<div id="dropbox">
<i class="fa fa-picture-o" aria-hidden="true"></i>
<p> Drop image here or click to upload</p>
</div>
<div id="preview" class="hidden">
</div>
<button id="fileSelect" class="...">Upload Image</button>
<button id="fileRemove" class="...">Remove Image</button>
</div>
</div>
....
....
</form>
Обратите внимание, что я использую скрытое поле ввода. Также у меня есть два div, предварительный просмотр (скрытый изначально) и dropbox. Когда изображение загружается, класс «скрытый» удаляется из предварительного просмотра и добавляется в dropbox.
Вот часть файла JS newevent.js
$(document).ready(function() {
....
eventImageSetup();
....
}
....
function eventImageSetup() {
var dropbox = document.getElementById("dropbox"),
fileElem = document.getElementById("image"),
fileSelect = document.getElementById("fileSelect"),
fileRemove = document.getElementById("fileRemove");
$(dropbox).height($('#imageBorder').height());
fileSelect.addEventListener("click", function(e) {
if (fileElem) {
fileElem.click();
e.preventDefault(); // to prevent submit
}
}, false);
fileRemove.addEventListener("click", function(e) {
e.preventDefault(); // prevent submit
if(!$('#preview').hasClass('hidden')) { // if there is an image
$('#preview').empty();
$('#dropbox').removeClass('hidden');
$('#preview').addClass('hidden');
$('#fileSelect').text('Upload Image');
$('#image').wrap('<form>').closest('form').get(0).reset();
$('#image').unwrap();
}
removeError($('#imageError'), $('#image'));
});
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
}
function handleFiles(files) {
var file = files[0];
.... // some error checking
var img = document.createElement("img");
img.id = "uploadedImage";
img.file = file;
img.onload = function() {
adjustImageSize(img);
};
$('#dropbox').addClass('hidden');
$('#preview').removeClass('hidden');
$('#preview').empty();
$('#preview').append(img);
$('#fileSelect').text('Replace Image');
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
Вот часть моего edit.ejs файл
<form action="/events/<%=event._id%>?_method=PUT"
method="POST"
enctype="multipart/form-data"
onSubmit="return(validate(this));"
novalidate >
<input name="image" type="file" id="image" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="imageBorder" >
<div id="imageContainer">
<div id="dropbox" class="hidden">
<i class="fa fa-picture-o" aria-hidden="true"></i>
<p> Drop image here or click to upload</p>
</div>
<div id="preview">
<script>
var imageExists = '<%=event.image%>';
if(imageExists) {
var myImg = document.createElement("IMG");
var source = "../../<%= event.image %>";
myImg.src = source;
adjustImageSize(myImg);
$('#preview').append(myImg);
}
</script>
</div>
<button id="fileSelect" class="...">Upload Image</button>
<button id="fileRemove" class="...">Remove Image</button>
</div>
</div> <!-- END OF imageBorder -->
....
</form>
Сценарий выше успешно делает изображение в страницу редактирования, следующим образом.
Но при нажатии кнопки отправить, изображение не отображается.
Это файл маршрута nodejs. Вы можете увидеть проблему здесь
// UPDATE SPECIFIC EVENT IN DATABASE
router.put("/:id", upload.single('image'), middleware.checkEventOwnership, function(req, res) {
var filepath = undefined;
if(req.file) {
filepath = req.file.path.substr(7); // Substr to remove "/public"
}
req.body.image = filepath;
Event.findByIdAndUpdate(req.params.id, req.body, function(err, foundEvent) {
if(err) {
console.log(err);
req.flash("error", err);
} else {
req.flash("success", "Successfully edited your event");
}
res.redirect("/events/" + req.params.id);
});
});
В принципе, если оставить изображение нетронутым в форме редактирования, req.file не существует. Таким образом, req.body.image = undefined. И изображение больше не связано с событием.
здравый смысл сказал бы это сделать
if(req.file) {
filepath = req.file.path.substr(7);
req.body.image = filepath;
}
Но если вы сделаете это, вы ввести новую проблему: если пользователь редактирует событие и удаляет изображение (то есть решает, что он не хочет, чтобы изображение, связанное с событием), изображение никогда не удаляется.
Любая идея, как решить эту проблему? Я знаю, что мне нужно что-то сделать в скрипте edit.ejs ... В частности, мне нужно создать файл изображения ... Но я не уверен, как подойти к этому