<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Collecting Data</
title
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin
=
"anonymous"
>
</
head
>
<
body
class
=
"container"
style="margin-top: 50px;
width: 50% height:auto; ">
<
h2
class
=
"text-primary"
style
=
"margin-left: 15px; margin-bottom: 10px"
>
Hey There,Here we are going to upload
</
h2
>
<
form
class
=
"container"
id
=
"contactForm"
>
<
div
class
=
"card"
>
<
div
class
=
"card-body"
>
<
div
class
=
"form-group"
style="margin-left: 15px;
margin-top: 10px;
display:none;>
<
label
for
=
" exampleFormControlSelect1 "
>Select Type</
label
>
<
select
class
=
"form-control "
id
=
"types "
>
<
option
>1</
option
>
</
select
>
</
div
>
<
br
>
Document Upload:
<
br
>
<
input
type
=
"file "
name
=
"files[] "
id
=
"files "
>
<
input
type
=
"hidden "
name
=
"url "
id
=
"url "
>
<
button
type
=
"button "
onclick
=
"uploadimage() "
>
Upload Image
</
button
>
<
br
><
br
>
</
div
>
</
div
>
<
button
type
=
"submit "
class
=
"btn btn-primary "
style
=
"margin-left: 15px; margin-top: 10px; display:none; "
>
Submit
</
button
>
</
form
>
</
body
>
</
script
>
<
script
src
=
</
script
>
<
link
type
=
"text/css "
rel
=
"stylesheet "
href
=
<
script
src
=
</
script
>
<
script
>
// adding firebase data
var firebaseConfig = {
apiKey: "*********************- ",
authDomain: "-********************* ",
databaseURL: "********************* ",
projectId: "********************* ",
storageBucket: "********************* ",
messagingSenderId: "********************* ",
appId: "********************* "
};
firebase.initializeApp(firebaseConfig);
var messagesRef = firebase.database().ref('Checking');
document.getElementById(
'contactForm').addEventListener('submit', submitForm);
//uploading file in storage
function uploadimage(){
var type = getInputVal('types');
var storage = firebase.storage();
var file=document.getElementById("files ").files[0];
var storageref=storage.ref();
var thisref=storageref.child(type).child(file.name).put(file);
thisref.on('state_changed',function(snapshot) {
}, function(error) {
}, function() {
// Uploaded completed successfully, now we can get the download URL
thisref.snapshot.ref.getDownloadURL().then(function(downloadURL) {
//getting url of image
document.getElementById("url ").value=downloadURL;
alert('uploaded successfully');
saveMessage(downloadURL);
});
});
// Get values
var url = getInputVal('url');
// Save message
// saveMessage(url);
}
function getInputVal(id){
document.getElementById('contactForm').reset();
}
// Function to get form values
function getInputVal(id){
return document.getElementById(id).value;
}
// Save message to firebase database
function saveMessage(url){
var newMessageRef = messagesRef.push();
newMessageRef.set({
imageurl:url,
});
}
</
script
>
</
html
>