Create

​https://firebase.google.com/docs/storage/web/upload-files​
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!
​How does Firebase associate uploaded files with a specific user?​
​Create a reference to a Cloud Storage document in Firestore​
TODO: add logic to do progress bar of file
​

Storage - Previous

Security

Next - Storage

Delete

Last modified 2yr ago

Copy link

Contents

With progress bar upload indication