Create
On React client
1
const handleUpload = () => {
2
const selectedFile = selectedFiles[0];
3
​
4
// Create a root reference
5
const storageRef = firebase.storage().ref();
6
// Create a reference to 'mountains.jpg'
7
const fileRef = storageRef.child('test.txt');
8
const uploadTask = fileRef.put(selectedFile).then(function(snapshot) {
9
// TODO: add some kind of alert confirming upload of file
10
// TODO: when choosing file, have a upload option?
11
console.log('Uploaded a blob or file!', snapshot);
12
});
13
// uploaded file
14
setShowNotice(true);
15
};
Copied!

With progress bar upload indication

1
const handleUpload = () => {
2
const selectedFile = selectedFiles[0];
3
​
4
// Create a root reference
5
const storageRef = firebase.storage().ref();
6
// Create a reference to 'mountains.jpg'
7
const fileRef = storageRef.child('test.txt');
8
const uploadTask = fileRef.put(selectedFile).then(function(snapshot) {
9
// TODO: add some kind of alert confirming upload of file
10
// TODO: when choosing file, have a upload option?
11
console.log('Uploaded a blob or file!', snapshot);
12
});
13
// https://firebase.google.com/docs/storage/web/upload-files
14
// Listen for state changes, errors, and completion of the upload.
15
uploadTask.on(
16
firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
17
function(snapshot) {
18
setIsUploading(true);
19
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
20
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
21
console.log("Upload is " + progress + "% done");
22
// TODO: function to update progress bar using percentage
23
setUploadProgress(progress);
24
switch (snapshot.state) {
25
case firebase.storage.TaskState.PAUSED: // or 'paused'
26
console.log("Upload is paused");
27
break;
28
case firebase.storage.TaskState.RUNNING: // or 'running'
29
console.log("Upload is running");
30
break;
31
default:
32
console.error('Error with upload to firebase');
33
break;
34
}
35
},
36
// error handling
37
function(error) {
38
setIsUploading(false);
39
// A full list of error codes is available at
40
// https://firebase.google.com/docs/storage/web/handle-errors
41
switch (error.code) {
42
case "storage/unauthorized":
43
// User doesn't have permission to access the object
44
console.error(error.code);
45
break;
46
case "storage/canceled":
47
// User canceled the upload
48
console.error(error.code);
49
break;
50
case "storage/unknown":
51
// Unknown error occurred, inspect error.serverResponse
52
console.error(error.code);
53
break;
54
default:
55
console.error('Error with upload to firebase', error);
56
break;
57
}
58
},
59
// upload completed
60
function() {
61
// Upload completed successfully, now we can get the download URL
62
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
63
// upload file
64
setShowNotice(true);
65
console.log("File available at", downloadURL);
66
setDownloadURL(downloadURL);
67
});
68
}
69
);
70
​
71
// uploaded file
72
setShowNotice(true);
73
};
Copied!
TODO: add logic to do progress bar of file
​
Last modified 2yr ago