Javascript - Upload multiple images and have a delete button - javascript

I'm working with python and flask to save my files, and to upload multiple images in js, with the preview and a delete button. When I click on the delete button, I want to delete a specific image. Currently, clicking on the delete button, deletes all.
This is the source code and I understand why the click deletes all.
let photo = document.getElementById('imgPhoto');
let file = document.getElementById('file-input');
photo.addEventListener('click', () => {
file.click();
});
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#file-input").on("change", function(e) {
var files = e.target.files, filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" + "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + "<br/><span class=\"remove\">Remover imagem</span>" +"</span>").insertAfter("#file-input");
$(".remove").click(function(){
$(this).parent(".pip").remove();
document.getElementById('file-input').value = "";
});
});
fileReader.readAsDataURL(f);
}
});
}
});
The result when uploaded

Related

How to regenerate DIV when executing the event again with filesInput?

currently working on an administration panel, I want for the user a preview of the image that is about to send after adding a file with an html input element.
Currently the script works, but if you decide to choose a new file with the input again ( the div does not regenerate but duplicates with the new image, leaving the old one still visible.
So I would like the div and the preview to regenerate when we choose an image again with input.
But the question is, how can I do this ?
Thank you all very much in advance for your advice / solutions.
Hope I am understandable, I am a novice and I explain this in my words.
I also send you my greetings from France.
HTML
<div id="result">
<input type="file" id="image" accept="image/*" name="image"/>
Javascript
window.onload = function() {
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("image");
filesInput.addEventListener("change", function(event) {
var files = event.target.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<div class=\"card\" style=\"max-width: 10rem;\"> <img class='card-img-top' src='" + picFile.result + "'" + "title='" + picFile.name + "'/> <div class=\"card-body rgba-black-light p-2\" style=\"text-align:center;\">Nouvelle image </div></div> ";
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
OUTPUT.innerHTML = ""
after the output declaration, this set the content of the div "result" to "" (empty)
If you want to regenerate image, you can remove the previous image.
I gave a id to div where image inside and remove it before where you added image.
Here is the snippet
window.onload = function() {
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("image");
filesInput.addEventListener("change", function(event) {
var files = event.target.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
var imageDiv = document.getElementById("imageDiv");//get div element
if(imageDiv!=null){//check div element
imageDiv.remove();}//remove the previous div
div.innerHTML = "<div class=\"card\" style=\"max-width: 10rem;\" id='imageDiv'> <img class='card-img-top' src='" + picFile.result + "'" + "title='" + picFile.name + "'/> <div class=\"card-body rgba-black-light p-2\" style=\"text-align:center;\">Nouvelle image </div></div> ";
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}})}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result">
<input type="file" id="image" accept="image/*" name="image"/>

JQuery File Upload Size and Type Restriction

I have a JQuery multi-file upload solution that requires restriction on file format and size.
Here's the JSFIDDLE, and the JS code follows below:
$(document).ready(function() {
if (window.File && window.FileList &&
window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
"</span>").insertAfter("#files");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
$(document).on('click', '[name=Reset]', function(){
$('.pip').remove();
})
The desired outcome is to allow me to set both the file type and size that can be easily changed.
Thanks for any help!
You can set a condition right after you declare a value to your var f
if(f.size > 200000 || f.type !="image/png"){
alert("File too big or not a valid Type");
$("#files").val("");
}
You can also console.log(f); for more properties
Here is my version of your function:
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i];
if(f.size > 200000 || f.type !="image/png"){
alert("File too big or not a valid Type");
$("#files").val("");
}
else{
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
"</span>").insertAfter("#files");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
$(document).on('click', '[name=Reset]', function(){
$('.pip').remove();
})
You can check the size property of the file and the type property of the file.
var maxSize = 20000;//maximum size for the file
var acceptedTypes = ["image/png", "image/jpg"];//accepted image types
if(f.size>maxSize){
//file is too big
}
if(acceptedTypes.indexOf(f.type)<0){
//file type is not accepted
}
JSFiddle: https://jsfiddle.net/ordmsw8p/

when removing multiple images in an image file is not selected with jQuery

My project has multiple image upload space. I choose 4 pictures. I have selected one of the pictures removed when the file is not selected what is the reason?
<div class="aupload">
<img src="{{ url_for('static', filename='admin/images/upload.png') }}" class="uploadImage" alt="">
<input type="file" id="files" name="files[]" multiple />
</div>
<button type="submit" class="btn form-control btn-default">Kaydet</button>
<script>
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<div class=\"preview\">" +
"</span><img class=\"uploadImg\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<span class=\"remove\"><i class=\"fa fa-times\"></i>" +
"</div>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".preview").remove();
$('#files').val("");
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
</script>
What I want to do is: clicking the remove button will remove the uploaded photo and reduce the number of files selected. I'd appreciate it if you could help.

Multiple File Upload To Display File Names Only

I have a need to get the JSFIDDLE DEMO to keep the ability to upload multiple files, but instead displaying the preview, I need to display the multiple file names only.
Here's the JSFIDDLE JS used to upload the files:
$(document).ready(function() {
if (window.File && window.FileList &&
window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
"</span>").insertAfter("#files");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File
API")
}
});
In addition, I need to be able to upload only the following file types: .jpg, .png, .pdf, .xlsx and .docx.
Thank for any help!
If you just want to show the file names you don't need to use the img tag. You can change the code as following.
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function (e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i];
$("<span class=\"pip\">" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i>"+ f.name + "</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function () {
$(this).parent(".pip").remove();
});
}
});
} else {
alert("Your browser doesn't support to File API")
}
And for the 2nd question, you can define the accepted types in your html as
<div class="file-loading">
<input type="file" id="files" name="files[]" multiple accept=".jpg,.png,.pdf,.xlsx,.docx"/>
</div>

Determine if image is duplicate

The following is the function that previews and uploads the image into the form:
//Process to upload and Preview Images being uploaded
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(a) {
var files = a.target.files,
filesLength = files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
for (var i = 0; i < filesLength; i++) {
var f = files[i];
var fileReader = new FileReader();
fileReader.fileName = files[i].name;
fileReader.onload = (function(e) {
var file = e.target;
$("<div class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br />" + "<span class=\"fontImage\">" + file.fileName + "</span><span class=\"remove\">X</span>" + "</div>").insertAfter("#files");
$('#files').val('');
/*Increment/Decrement Count of files loaded*/
var c = $(".pip").length;
if (c == 1)
$("#replaceText").text(c + " image file uploaded");
if (c > 1)
$("#replaceText").text(c + " image files uploaded");
$(".remove").on('click', function(){
$(this).parent(".pip").remove();
if($(".pip").length > 1){
c--;
$("#replaceText").text(c + " image files uploaded");
}
else if($(".pip").length == 1){
c--;
$("#replaceText").text(c + " image file uploaded");
}
else{
$("#replaceText").text("No file chosen");
}
});
/********************************/
if($(".pip").length > 1){
$("#delete_all").show();
$("#delete_all").css('margin-top',"10px");
}
else
$("#delete_all").hide();
});
fileReader.readAsDataURL(f);
}
}
}
else {
//alert("WARNING: Invalid image extension(s)");
document.getElementById("modal-title").innerHTML = "<h4>WARNING: Invalid image extension(s).</h4>";
document.getElementById("modal-body").innerHTML = "<p>Upload a image that has a valid extension(s).</p>";
document.getElementById("myform").focus();
$('#files').val('');
$("#invalidModal").modal();
return false
}
});
}
else {
//alert("Your browser doesn't support to File API.");
document.getElementById("modal-title").innerHTML = "<h4>ERROR: Does not support API</h4>";
document.getElementById("modal-body").innerHTML = "<p>Your browser doesn't support to File API. Update your current browser.</p>";
document.getElementById("myform").focus();
$("#invalidModal").modal();
return false
}
However, what I would like to achieve next is to determine whether an image that is being loaded to the form is a duplicate. What I mean is if the previous image that is already loaded to the form is being attempted to be loaded to the form again, to throw an error. Otherwise, to accept the new image. I am not sure how to achieve this. Any help would be appreciated

Categories