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>
Related
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
I have the code given below it is counting the files when i select the files and alert that you cannot select more than etc...
Limit is 4 and when i select 6 it says cannot select more than 4. But when i select 4 it adds and show thumb anad again on selecting one or 4 it adds again the new 4 or whatever files, so user can upload unlimited files.
How can i catch that selected files and restrict them.
<div class="m-form__group form-group row">
<label for="exampleInputEmail1" class="col-form-label col-lg-3 col-sm-12">
Select Image
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<div class="col-lg-12 col-md-9 col-sm-12" id="thumb-output">
<input id="files" class="" type="file" name="file[]" multiple>
</div>
</div>
</div>
$(document).ready(function() {
$('input[type=file]').on('dragenter', function() {
$('div').addClass('dragover');
});
$('input[type=file]').on('dragleave', function() {
$('div').removeClass('dragover');
});
if (window.File && window.FileList && window.FileReader) {
var numFiles = $('input[type=file]')[0].files.length;
$("#files").on("change", function(e) {
var files = e.target.files, filesLength = files.length;
if(files.length > 4){
alert("you can select max 4 files.");
}else{
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\">Remove</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
You can use a global variable to track how many files have been added.
var fileAdded = 0;
...
if(fileAdded + files.length > 4){
alert("you can select max 4 files.");
} else {
fileAdded = fileAdded + files.length;
for (var i = 0; i < files.length; i++) {
...
}
}
Also, please remember to decrease fileAdded when the user delete a file.
Here is an example:
var fileDict = new Object();
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
var numFiles = $('input[type=file]')[0].files.length;
$("#files").on("change", function(e) {
var files = e.target.files, filesLength = files.length;
if(Object.keys(fileDict).length + files.length > 4){
alert("you can select max 4 files.");
}else{
for (var i = 0; i < filesLength; i++) {
var f = files[i];
fileDict[f.name] = f;
var fileReader = new FileReader();
fileReader.onload = (function(e) {
$("<div class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + f.name + "\"/>" +
"<br/><span class=\"remove\" data-name=\""+f.name+"\">Remove</span>" +
"</div>").insertAfter("hr");
});
fileReader.readAsDataURL(f);
}
}
});
} else {
alert("Your browser doesn't support to File API");
}
});
$(document).on('click', '.remove', function(){
delete fileDict[$(this).data("name")];
$(this).parent(".pip").remove();
});
var upload = function() {
let formData = new FormData();
var i = 0;
Object.keys(fileDict).forEach(item => {
formData.append("file" + i, fileDict[item]);
i += 1;
});
$.ajax({
type: 'post',
url: '/upload.php',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: formData ,
success: function(data) {
alert(data);
}
});
}
img {
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="files" class="" type="file" name="file[]" multiple>
<hr>
<input type="button" value="Upload" onclick="upload()">
I am not sure which language you are using for backend. I use PHP here:
<?php
if (count($_FILES) > 4) {
echo "you can select max 4 files.";
} else {
foreach ($_FILES as $file_id => $file) {
if ($file['error'] > 0) {
echo 'Error: ' . $file['error'] . '<br>';
} else {
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);
echo 'uploads/' . $file['name'] . '<br>';
}
}
}
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/
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.
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