How to preview file name like this logo.png? - javascript

Hi I am trying to preview any filename when I upload to any file from local but the filename is looking like this
blob:http://localhost/cf1d307b-83ef-452b-ba7b-53af653378ce
but I want to preview file name like this logo.png or logo.jepg or logo.zip
please help me thanks.
script
function preview_images()
{
var total_file=document.getElementById("images").files.length;
for(var i=0;i<total_file;i++)
{
$('#file_preview').append("<div>"+URL.createObjectURL(event.target.files[i])+"
</div>");
}
}
HTML view
<div class="form-group mb-4">
<label >Upload ArtWork :</label>
<input type="file" class="form-control" id="images" name="images[]"
onchange="preview_images();" multiple/>
div class="row" id="file_preview"></div>

Try the following:
function preview_images()
{
const files = document.getElementById("images").files
const total_files =files.length;
const $preview = $('#file_preview')
$preview.html('')
for(var i=0; i< total_files ;i++)
{
const file = files[i]
const name = file.name
$preview.append(`<p>${name}</p>`);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group mb-4">
<label >Upload ArtWork :</label>
<input type="file" class="form-control" id="images" name="images[]" onchange="preview_images();" multiple />
<div class="row" id="file_preview"></div>

Related

How to get javascript array elements into the html form field as a value through a function in javascript?

I am having 6 bootstrap cards where the details of the card are id, image, content.on clicking the card I am getting the details of the card into the local storage and from that, I am extracting the ids into another array named styleIds I want these styleIds values to sent as value to the input field as onload of body
My js code:
var styles = []
var styleIds = []
function getStyle(id) {
if (styles.length > 0) {
var data = { id: id, image: $("#img_"+id).attr('src'),content: $("#cont_" + id).text() }
var x = JSON.stringify(data)
var index = styles.indexOf(x)
if (index == -1) {
styles.push(x)
}
else {
styles.splice(index, 1)
}
}
else {
var data = { id: id, image: $("#img_"+id).attr('src'),content: $("#cont_" + id).text() }
var x = JSON.stringify(data)
styles.push(x)
}
localStorage.setItem("styles", JSON.stringify(styles))
styleIds = styles.map(element => JSON.parse(element).id);
console.log(styleIds)
assample();
}
function assample() {
$("#style").val(styleIds);
console.log(styleIds)
}
function initStyles() {
var storedNames = JSON.parse(localStorage.getItem("styles") || '[]');
styleIds = storedNames.map(element => JSON.parse(element).id);
}
My form code is:
<body onload = "sample();initGoals();issample();assample();initStyles();">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" required>
</div>
<div class="form-group">
<input type="text" name="room" id="name" value=" ">
</div>
<div class="form-group" >
<input type="text" name="goal" id="goal" value=" ">
</div>
<div class="form-group" >
<input type="text" name="style" id="style" value=" ">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" class="form-control" required>
</div>
<div class="form-group">
<label for="password2">Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<input type="submit" value="Register" class="btn btn-secondary btn-block">
</form>
The cards are on one page and the form is the another web page so in the styles page the styleIds array is getting the ids butwhen I navigate to the form page the values are getting as a value for the field in the form what is the mistake I did?
Make sure you're calling the functions in the correct order. Also, I would suggest renaming your function names so that you don't get confused.
You can change your onload to just call one function and later care about the order.
<body onload = "doSomething()">
and in the script:
function doSomething() {
sample();
initGoals();
issample();
initStyles();
assample();
}

Add a remove option to Attached file in Contact form 7

In contact form 7 when attach any file to upload there is no option to remove the attached file. How do I add a remove button or cross button beside file name?
<input type="file" name="file-637" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
<input type="file" name="file-638" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
You can use below concept with remove the attached input file
$.fn.fileUploader = function (filesToUpload) {
this.closest(".files").change(function (evt) {
for (var i = 0; i < evt.target.files.length; i++) {
filesToUpload.push(evt.target.files[i]);
};
var output = [];
for (var i = 0, f; f = evt.target.files[i]; i++) {
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";
output.push("<li><strong>", escape(f.name), "</strong> - ",
f.size, " bytes. ", removeLink, "</li> ");
}
$(this).children(".fileList")
.append(output.join(""));
});
};
var filesToUpload = [];
$(document).on("click",".removeFile", function(e){
e.preventDefault();
var fileName = $(this).parent().children("strong").text();
// loop through the files array and check if the name of that file matches FileName
// and get the index of the match
for(i = 0; i < filesToUpload.length; ++ i){
if(filesToUpload[i].name == fileName){
//console.log("match at: " + i);
// remove the one element at the index where we get a match
filesToUpload.splice(i, 1);
}
}
//console.log(filesToUpload);
// remove the <li> element of the removed file from the page DOM
$(this).closest('div.files').find('input[type="file"]').val('')
$(this).parent().remove();
//document.getElementById("uploadCaptureInputFile").value = "";
});
$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);
$("#uploadBtn").click(function (e) {
e.preventDefault();
});
body {
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="row files" id="files1">
<h2>Files 1</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files1" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
<div class="row files" id="files2">
<h2>Files 2</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files2" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
</form>
</div>

How to get the date from the uploaded image?

Image upload form uses following code:
<input type="file" name="file" id="Images" title="Please upload image(Jepg, Png)" accept="image/*">
I would like to extract the date of the image file which i just uploaded.
<span id="ImageDate"></span>
You could do something like this by using .lastModifiedDate in javascript
$("#Images").change(function() {
for(var i = 0; i < this.files.length; i++) {
var file = this.files[i];
var modifiedDate = file.lastModifiedDate + "<br />";
$("#ImageDate").append(modifiedDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="file" id="Images" title="Please upload image(Jepg, Png)" accept="image/*">
<br />
<span id="ImageDate"></span>

when the file upload (multiple) complete, the checkbox will auto check

I'm doing a form that after the user upload the file, the checkbox will auto check, so that the user will know that their file had been uploaded.
In the form, there will have few "file upload input" and one "multiple file upload input", each of it will have a checkbox beside that will automatically checked after the file had been uploaded.
here is my code for file upload
<div><input type="checkbox" id="application" value="application" name="application"/><label for="application"><span></span></label>
</div>
<div>
<div>Application Form</div>
<div>
<input id="filename1" type="text"/>
<div class="fileUpload btn btn-primary">
<span>Add</span>
<input id="uploadBtn1" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
</div>
</div>
</div>
<div><input type="checkbox" id="application2" value="application2" name="application2"/><label for="application2"><span></span></label>
</div>
<div>
<div>Application Form2</div>
<div>
<input id="filename2" type="text"/>
<div class="fileUpload btn btn-primary">
<span>Add</span>
<input id="uploadBtn2" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
</div>
</div>
</div>
Script
document.getElementById('uploadBtn1').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename1').value = filename;
}
here is the fiddle
http://fiddle.jshell.net/kpxyb74h/
here is the code for multiple file
<div><input type="checkbox" id="payment" value="payment" name="payment" /><label for="payment"><span></span></label>
</div>
<div>
<div>Payment</div>
<div>
<div id="upload_prev"></div>
<div class="fileUpload btn btn-primary">
<span>Add</span>
<input id="uploadBtn" type="file" class="upload" multiple name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
</div>
</div>
script
$(document).on('click','.close',function(){
$(this).parents('span').remove();
})
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
var files = $('#uploadBtn')[0].files;
for (var i = 0; i < files.length; i++) {
$("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
}
document.getElementById('filename').value = filename;
}
here is the fiddle for multiple file
http://fiddle.jshell.net/37zjr70k/
I have to separate the script because it unable to function at the same time.
$(document).ready(function () {
$("#uploadBtn1").on("change", function () {
$("#application").attr('checked','checked');
});
$("#uploadBtn2").on("change", function () {
$("#application2").attr('checked','checked');
});
});
You can do the same for multiple uploads!

how to get data from multiple inputs using javascript

I have multiple inputs, I need with one button to upload all files from all the inputs (image and/or video), I found a code on web, but I can't find a way to upload or get all my files.
I am new to this procedure and unable to figure out the problem (maybe the .get() function is not right).
How to get all the files from all the inputs in one button click?..
HTML:
<div id="back" class="back">
<label id="addPicture" onclick="locatePicture(this)"
style="color:white;font-size:larger"
for="theInput">Add Image</label>
<div style="float: left">
<input id="theInput" type='file' />
</div>
<div style="float: right">
<label id="addVideo" for="uploadFileVideo" style="color:white;font-size:larger" class="AjaxList_Button">Add Video</label>
<input id="uploadFileVideo" type='file' />
</div>
</div>
<input type='Button' ID='saveAllElements' value='Done' OnClick='saveMedia()' Text='Done' />
Javascript - code found on web
function saveMedia()
{
var xhr = new XMLHttpRequest();
var data = new FormData();
var files = $(".back").get(0).files;
alert(files.length);
if (files.length == 0)
{
alert("No files");
}
else
{
for (var i = 0; i < files.length; i++)
{
data.append(files[i].name, files[i]);
}
xhr.open("POST", "UploadHandler.ashx");
xhr.send(data);
}
};

Categories

Resources