<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>
Related
I have been trying to make a form in HTML (Bootstrap) that sends the information to my mail id. for this I am using formsubmit.
for some reason, when submiting the form, It redirects the page to a 'success' page. I do realise that there is a way to redirect it to a different page but I would rather have the section in which the form is present to disappear and show a 'success' section. For reference, here is my form code:
<section id="get-started" class="get-started">
<div class="container">
<div class="row text-center">
<h1 class="display-3 fw-bold text-capitalize">Get started</h1>
<div class="heading-line"></div>
<!-- <p class="lh-lg">
can write something here later
</p> -->
</div>
<!-- START THE CTA CONTENT -->
<div class="row text-white">
<div class="col-12 col-lg-6 gradient shadow p-3">
<div class="cta-info w-100">
<h4 class="display-4 fw-bold">Sign up for Beta!</h4>
<p class="lh-lg">
Join the waitlist for the beta program. Limited spots available! </p>
<h3 class="display-3--brief">What will be the next step?</h3>
<ul class="cta-info__list">
<li>Enter your details.</li>
<li>Wait to be accepted into the beta program.</li>
<li>Enjoy using Clickytize.</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6 bg-white shadow p-3">
<div class="form w-100 pb-2">
<h4 class="display-3--title mb-5">Join the waitlist!</h4>
<form action="https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a" method="POST" class="row">
<input type="hidden" name="_captcha" value="false">
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="First Name" id="inputFirstName" name="firstName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="Last Name" id="inputLastName" name="lastName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<input type="email" placeholder="email address" id="inputEmail" name="emailId" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<textarea name="message" placeholder="Link your social media profile" id="message" name="message" class="shadow form-control form-control-lg"></textarea>
</div>
<div class="text-center d-grid mt-1">
<button type="submit" class="btn btn-primary rounded-pill pt-3 pb-3">
submit
<i class="fas fa-paper-plane"></i>
</button>
<script>
form.onSubmit= (event)=>{
event.preventDefault();
}
</script>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
If you want to prevent redirection of page and submit the form then you need to take care of submitting the form data using javascript.
First add onsubmit event attribute in your form tag like this:
<form method="POST" class="row my-form" onsubmit="return submitForm()">
We can remove the action attribute from the form tag.
in Javascript:
function submitForm() {
const form = document.querySelector('.my-form')
const formData = new FormData(form)
const url = 'https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a'
fetch(
url,
{
method: 'POST',
body: formData
}
)
return false
}
We are using the native fetch API to send data to form-data to the endpoint. We are also using the FormData API to create an object of form inputs
Returing false prevents page from reload.
Read more about:
Fetch API FormData API
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()
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>`
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 Jquery to clone() a div and change its children's id, one of the children is a Bootstrap-tagsinput.
You can find a Demo here.
After clicking add new run a new div is added but the tags input is uneditable!!
here is my code (and you can view the full code here
):
$('#addrun').click(function () {
var s = $('#run1')
.clone()
.attr('id', '#run' + (++runNum))
.wrap('<div>');
s.find('#tag1').attr('id', 'tag2');
$('#tag2').tagsinput();
$('#addrun').before(s.parent().html());
$(".well").on('click', '.expandbtn', function () {
var $this = $(this).parent();
var $collapse = $this.closest('.RunWell').find('.SystemFiles');
$collapse.collapse('toggle');
});
$('.SystemFiles').collapse('collapse');
});
Try calling .tagsinput() on #tag2 after adding it to the page.
$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();
Edit:
This is probably due to how the TagsInput plugin initializes itself. What I would do is create a template of your empty run container and hide it on the page or load it via JavaScript.
<div class="control-group hide" id="ControlGroupTemplate">
<label class="control-label" for="textarea">Tools :</label>
<input type="text" class="tags" id="tag1" value="Amsterdam,Washington,Sydney,Beijing"
data-role="tagsinput" />
<br />
<div class="SystemFiles" data-role="collapsible">
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP Customer DLIS files (PUC)</label>
<div class="controls">
<input id="filebutton" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP logup DLIS files (LUP)</label>
<div class="controls">
<input id="file1" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP Producer DLIS files (PUP)</label>
<div class="controls">
<input id="file2" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP well folder</label>
<div class="controls">
<input id="file3" name="filebutton" class="input-file" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label" for="filebutton">Prints</label>
<div class="controls">
<input id="file4" name="filebutton" class="input-file" type="file">
</div>
</div>
</div>
<button class="btn btn-mini link-btn expandbtn" id="exp" type="button">expand toggle</button>
<button class="btn btn-mini btn-primary"><span class="glyphicon glyphicon-arrow-down">
</span>Duplicate</button>
</div>
Then you clone the ControlGroupTemplate and apply the TagsInput method to it.
var s = $('#ControlGroupTemplate')
.clone()
.attr('id', '#run' + (++runNum))
.wrap('<div>');
s.find('#tag1').attr('id', 'tag2');
$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();
I would even use this method to add your initial run to the page in your document.ready() handler.