file upload html firebase

Solutions on MaxInterview for file upload html firebase by the best coders in the world

showing results for - "file upload html firebase"

05 Nov 2017

1const [imagetoPost, setImagetoPost] = useState(null);
2
3const sendPost = (e) => {
4	e.preventDefault();
5	if (!post) return null;
6	db.collection('posts')
7		.add({
8			// whatever you want to add other than file
9		})
10		.then((doc) => {
11			if (imagetoPost) {
12				// upload stuff
13				const uploadTask = storage
14					.ref(`posts/${doc.id}`)
15					.putString(imagetoPost, 'data_url');
16
17					// OPTIONAL: here you can remove the file from state
18
19				uploadTask.on(
20					'state_change',
21					null,
22					(error) => console.error(error),
23					() => {
24						// when the upload completes
25						storage
26							.ref(`posts/${doc.id}`)
27							.getDownloadURL()
28							.then((url) => {
29								db.collection('posts').doc(doc.id).set(
30									{ postImage: url },
31									{ merge: true }
32								);
33							});
34					}
35				);
36			}
37		});
38};
39
40const addPostImage = (e) => {
41	const reader = new FileReader();
42	if (e.target.files[0]) {
43		reader.readAsDataURL(e.target.files[0]);
44	}
45
46	reader.onload = (readerEvent) => {
47		setImagetoPost(readerEvent.target.result);
48	};
49};

source

Joris

24 Jul 2019

1<!DOCTYPE html>
2<html>
3<head>
4	<title>Firebase Web Basics</title>
5
6	<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,700" rel="stylesheet">
7
8	<script src="https://use.fontawesome.com/939e9dd52c.js"></script>
9
10	<link rel="stylesheet" type="text/css" href="style.css">
11</head>
12<body>
13
14	<div class="mainDiv" align="right">
15		<h1 align="left">Firebase File Upload</h1>
16		<progress id="uploader" value="0" max="100">0%</progress>
17		<input type="file" id="fileButton" value="upload"/>
18	</div>
19
20
21
22<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
23<script>
24  // Initialize Firebase
25  var config = {
26    apiKey: "******************************",
27    authDomain: "******************************",
28    databaseURL: "******************************",
29    storageBucket: "******************************",
30    messagingSenderId: "******************************"
31  };
32  firebase.initializeApp(config);
33  //-------------------------------------
34  
35  var uploader = document.getElementById('uploader');
36  var fileButton =         document.getElementById('fileButton');
37  fileButton.addEventListener('change', function(e){
38  var file = e.target.files[0];
39  var storageRef = firebase.storage().ref('img/'+file.name);
40  var task = storageRef.put(file);
41  task.on('state_changed', function progress(snapshot) {
42    var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
43    uploader.value = percentage;
44
45  }, function error(err) {
46
47
48  },function complete() {
49
50  });
51});  
52  
53  
54</script>
55
56<script src="fileup.js">
57</script>
58</body>
59</html>

similar questions

how to display uploaded image in html using javascript upload image ajax demo file upload javascript how to read a firebase txt file file upload button and display file javascript upload file from url javascript firebase javascript up 3boad multiple files uploading file with fetch javascript upload file button update photourl firebase

queries leading to this page