By Default, in the preview state, I have to hover on the image preview to see the filename.
but Is it possible to put filename outside the hoverzone? (see the screenshot)
This is my try but not work
<form id="my-awesome-dropzone" class="dropzone" method="post" enctype="multipart/form-data" action="upload.php">
<div class="dz-filename">
<span data-dz-name></span>
</div>
<div class="dropzone-previews"></div>
Manga Title:<input type="text" name="title" /> <br>
Chapter:<input type="text" name="chapter" /> <br>
<button type="submit">Submit data and files!</button>
</form>
You can take the file name in any event in add it to the preview element, here is an example in the addedfile event:
js:
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on('addedfile', function(file){
var preview = document.getElementsByClassName('dz-preview');
preview = preview[preview.length - 1];
var imageName = document.createElement('span');
imageName.innerHTML = file.name;
preview.insertBefore(imageName, preview.firstChild);
});
}
};
in your previewTemplate, use like this
<div class="dz-preview dz-file-preview">
<div class="dz-details">
<div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div>
<img data-dz-thumbnail style="height:100px;width:100px;"/>
<div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-details">
</div>
<img src="assets/img/fileRemoveIcon.png" style="width: 40px;margin-top: -227px;margin-left: 70px;" alt="remove" data-dz-remove />
</div>
</div>`
Related
I am trying to obtain the value of an image that is uploaded to an input and after clicking on add product that is shown together with the added product, I have tried a lot and I can not, this is my code.
I've tried a lot and couldn't get any results
const price = document.getElementById("price").value
const img = document.getElementById("file");
My another code
<div class="card">
<div class="card-body">
<div id="file" class="img-product">${product.img}</div>
<h3>${product.name}</h3>
<p id="product-description">${product.description}</p>
<p>Precio: <b>${product.price}</b> RD$ </p>
<button id="buy-product" class="btn btnprimary">Comprar
</button>
<button id="add-product" class="btn btn-warning">Add+</button>
</div>
</div>
My HTML code :
<form id="form-products" class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="product-name"
placeholder="Nombre..">
<input class="form-control my-2" type="file" id="file" accept="image/*"
placeholder="imagen">
</div>
<div class="col-md-4">
<textarea id="description" cols="10" rows="1" class="form-control"
placeholder="Descripcion"></textarea>
<input type="submit" value="Add product" class="btn btn-warning my-2">
</div>
<div class="col-md-4">
<input id="price" type="number" class="form-control"
placeholder="Precio">
</div>
</form>
everything works fine except the image
document.getElementById('file') will only give you the <input> element, not its contents. Have you tried accessing its value like you do with the price?
use this
const img = document.getElementById("file")
img.src = "pathToYourFile"
well I have tried this on my machine and it works fine!!,
My HTML CODE
<html>
<head>
<title> Image </title>
<script src="./index.js" defer></script>
</head>
<body>
<button class="btn"> Add Image </button>
<img id="image">
</body>
</html>
My JS Code
document.querySelector(".btn").addEventListener("click", () => {
const path = "./img/Screenshot (1).png";
const img = document.querySelector("#image");
img.src = path;
});
<form name=”myForm” enctype=”multipart/form-data” >
<div class="row pt-2 pl-3">
<div class="col-md-5 pl-0 position-relative ">
<!-- <input type="file" accept=".xlsx, .xls" class="input-file"> -->
<div class="wrappeer">
<div class="file-upload">
<small> Drag & drop or browse file to upload!</small>
<input type="file" name="input-file" accept=".xlsx, .xls" id="input-file" />
<i class="fa fa-arrow-up"></i>
</div>
</div>
</div>
</div>
<div class="row pt-2 pl-3">
<div class="col-md-10 position-relative p-0">
<!-- <input type="file" accept=".xlsx, .xls" class="input-file-2"> -->
<div class="wrappeer-2">
<div class="file-upload-2">
<small> Drag & drop or browse file to upload!</small>
<input type="file" name="input-file" accept=".xlsx, .xls" id="input-file-2" />
<i class="fa fa-arrow-up"></i>
</div>
</div>
</div>
</div>
<div class="pt-5 text-left pb-4">
<button type="submit" class="button--light btn-next">SUBMIT</button>
</div>
</form>
and here is my upload.js
I tried to print the length of the files and it's just of length one so acessing second file does not seem to be working .
const form = document.querySelector('form')
form.addEventListener('submit', e => {
const formData = new FormData()
console.log(document.querySelector('[type=file]').files);
debugger
const file = document.querySelector('[type=file]').files[0];
console.log(document.querySelector('[type=file]').files[1]);
)
We need to read both the files and send them as formData.
Issue is your selector:
document.querySelector // just returns one node
While in your case you need
document.querySelectorAll(node)// It will get you a collection of nodes
MDN docs:
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.
const form = document.querySelector('form')
form.addEventListener('submit', e => {
e.preventDefault();
const formData = new FormData();
const fileInputs = document.querySelectorAll('[type=file]');
console.log(fileInputs.length);
fileInputs.forEach(input => console.log(input.files))
})
<form name=”myForm” enctype=”multipart/form-data”>
<div class="row pt-2 pl-3">
<div class="col-md-5 pl-0 position-relative ">
<!-- <input type="file" accept=".xlsx, .xls" class="input-file"> -->
<div class="wrappeer">
<div class="file-upload">
<small> Drag & drop or browse file to upload!</small>
<input type="file" name="input-file" accept=".xlsx, .xls" id="input-file" />
<i class="fa fa-arrow-up"></i>
</div>
</div>
</div>
</div>
<div class="row pt-2 pl-3">
<div class="col-md-10 position-relative p-0">
<!-- <input type="file" accept=".xlsx, .xls" class="input-file-2"> -->
<div class="wrappeer-2">
<div class="file-upload-2">
<small> Drag & drop or browse file to upload!</small>
<input type="file" name="input-file" accept=".xlsx, .xls" id="input-file-2" />
<i class="fa fa-arrow-up"></i>
</div>
</div>
</div>
</div>
<div class="pt-5 text-left pb-4">
<button type="submit" class="button--light btn-next">SUBMIT</button>
</div>
</form>
If I got your issue correctly, then you should attache change event on your file input and use it to get the files values, document.querySelector will only return DOM object, and attache the event on all file input.
check my example.
const file =document.querySelector('[type=file]');
// file varaibale is DOM tag and have not .file attribute.
console.log(file);
// to read the information of the file you need to triger file reader on upload event for example.
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// use the 1st file from the list
f = files[0];
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
console.log(theFile)
//console.log( e.target.result );
};
})(f);
// Read in the image file as a data URL.
reader.readAsText(f);
}
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
test <input type="file" name="upload" id="upload">
<div id="html"></div>
I want to access element of this dynamically created div. This is the html
<div id="uploader">
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange">
<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon">
<span class="upl" id="upload">Upload document</span>
<input type="file" class="upload up" id="up" onchange="readURL(this);">
</div>
<!-- btn-orange -->
</div>
<!-- col-3 -->
<div class="col-sm-8">
<input type="text" class="form-control" name="" id="document_name" placeholder="Document Name">
</div>
<!--col-8-->
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
<!-- col-1 -->
this is the part that is dynamically created
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
I have a file upload handler called readURL()
function readURL(input) { }
what I want to get is the id of a specific div, so I tried this and many other unsuccessful methods
function readURL(input) {
console.log($(input).closest('.col-sm-8').find(".form-control").attr('id'));
}
I hope my explanation is clear, I want to get the id of class="col-sm-8" on file upload. how can implement this?
Passing the id up (uploadFile input)
Execute this: $(input).parent().parent().next()
Look at this code snippet
function readURL(input) {
console.log('Id of Div: ' + $(input).parent().parent().next().attr('id'));
console.log('Id of form-control input: ' + $(input).parent().parent().next().find(".form-control").attr('id'));
}
readURL('#up');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8" id='div(col-sm-8)'><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
Resources
.parent()
.next()
I am using a form to upload a photo and show in the <img>.
But it doesn't work correctly and can't show the photo on <img>.
I am using Django and I have a base.html as a template and I added this javascript to the head by:
<script src="{% static "landingpages/js/photoupload.js" %}"></script>
and also the from is being generate by user as much as they needs
Javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(function () { //document ready call
$("#photoinput").change(function(){
readURL(this);
});
});
HTML
<section class="container" xmlns="http://www.w3.org/1999/html">
<div class="row addform" id="addform">
<div class="col-md-12 addform-col">
<div id="headertag" class="row" style="margin-left: 0px">
<label class="add-lable">Team Member(s):
<span style="color:red">*</span>
</label>
</div>
<div class="row input-field">
<form id="form1" runat="server">
<div name="membercard" class="row">
<div id="teamform" class="col-md-4" style="display: none">
<div name="imageholder" class="row tm-image-holder">
<div class="col-md-12" style="text-align: center">
<img id="myimg" style="height: 200px;text-align: center;">
</div>
</div>
<input id="photoinput" type="file" class="btn btn-block btn-lg btn-primary inout-margin mybut">
<input id="name" name="name0" type="text" class="add-input input-margin" placeholder="Name, Mohammad, ... *">
<input id="job" name="job0" type="text" class="add-input" placeholder="Job, Developer, Designer, ... *">
<textarea id="explain" name="explain0" class="add-textarea input-margin" rows="4" placeholder="Explain this member in 2 to 4 lines *"></textarea>
</div>
<span id="formhere"></span>
</div>
</form>
<div name="addform" class="row input-field">
<div class="col-md-12" style="text-align: left">
<a onclick="member_card()">+ Add Team Member</a>
</div>
</div>
</div>
</div>
</div>
</section>
Add the option enctype="multipart/form-data" to your form element, like this:
<form id="form1" enctype="multipart/form-data runat="server">
As the Django Documentation says:
Note that request.FILES will only contain data if the request method was POST and the that posted the request has the attribute enctype="multipart/form-data". Otherwise, request.FILES will be empty.
https://docs.djangoproject.com/en/1.9/topics/http/file-uploads/
I am using html2canvas to save html as image.
My html code is as follows
<div id="target" class="center-block imgStruc" style="width:92%;">
<div class="center-block eventName makeMeDraggable box">
<div class="text">
<div class="text1">Test Data</div>
</div>
</div>
<div class="imgCont clearfix"><img src="http://mydomainname/image.jpg" alt="" class="img-responsive" id="changeImg"></div>
</div>
<div class="col-sm-6">
<input type="submit" value="Save & Continue »" onClick="snap_onclick()"/>
<form method="POST" enctype="multipart/form-data" action="savecard.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
</div>
My javascript is as follows
function snap_onclick() {
$('#target').html2canvas({
onrendered: function (canvas) {
$('#img_val').val(canvas.toDataURL("image/png"));
document.getElementById("myForm").submit();
}
});
}
Image of target div has been created. But when I change image src of changeImg using following jquery code
function changeImage()
{
$('#changeImg').attr('src','http://mydomainname/path-to-image/image.jpg');
}
and then click on save button, it creates image with text part only, changed image has not come.
save.php is as follows
<?php
//Get the base-64 string from data
//echo $_POST['img_val'];
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('img.png', $unencodedData);
?>
<h2>Save the image and show to user</h2>
<table>
<tr>
<td>
<a href="img.png" target="blank">
Click Here to See The Image Saved to Server</a>
</td>
<td align="right">
<a href="index.php">
Click Here to Go Back</a>
</td>
</tr>
<tr>
<td colspan="2">
<br />
<br />
<span>
Here is Client-sided image:
</span>
<br />
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
?>
</td>
</tr>
</table>
<style type="text/css">
body, a, span {
font-family: Tahoma; font-size: 10pt; font-weight: bold;
}
</style>
new image is in the same domain.
Ok, don't add the button as before....
You have an html like this?(I sobstitute the image with others online....)
<div class="col-md-3 col-sm-4 col-xs-4 single-right-grid-left">
<a onclick="changeImage()"> <img style="width:50px;" id="drag1" class="drag" alt="" src="http://beblex.it/wp/wp-content/uploads/2014/05/Online1.jpg">
</a>
</div>
<div id="target" class="center-block imgStruc" style="width:92%;">
<div class="center-block eventName makeMeDraggable box">
<div class="text">
<div class="text1">Test Data</div>
</div>
</div>
<div class="imgCont clearfix">
<img src="http://www.bottegamonastica.org/wp-content/uploads/Finalmente-Online.jpg" alt="" class="img-responsive" id="changeImg" style="width:50px;">
</div>
</div>
<div class="col-sm-6">
<input type="submit" value="Save & Continue »" onClick="snap_onclick()"/>
<form method="POST" enctype="multipart/form-data" action="savecard.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
</div>
The js is the same as you paste....