firebase-file-upload.js

handleValidSubmit = async (event: any, values: {title: string; description: string; file: any}) => {
    const {currentUser} = this.props.mobx;

    if (this.state.loading) {
      console.log("Submit ignored because loading.");
      return;
    }
    this.setState({loading: true});

    try {
      const vidRef = Firebase.firestore()
        .collection("videos")
        .doc();
      // @ts-ignore
      const vidFileLocal = document.getElementById("videoFile").files[0];

      if (vidFileLocal.size > 120 * 1000000) {
        this.setState({error: "Sorry, max upload size is 120MB. Please try compressing and/or clipping."});
        return;
      }

      console.log("Uploading video");
      // Get blob from IOS and ANdroid
      // const response = await fetch(fileUri);
      // const blob = await response.blob();
      // Get blob from web
      const blob = vidFileLocal;
      const fileDataRef = await Firebase.storage()
        .ref()
        .child(`video_files/${vidRef.id}`);
      
      const uploadTask = fileDataRef.put(blob);
      const that = this;
      uploadTask.on('state_changed', function(snapshot){
        // Observe state change events such as progress, pause, and resume
        // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
        // @ts-ignore
        var progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        console.log('Upload is ' + progress + '% done');
        that.setState({'uploadProgress': progress});
      });
      await uploadTask;
      // const videoUrl = await snapshot.ref.getDownloadURL();
      console.log("Upload Complete");

      console.log("Creating video");
      const fbSlugGetUnique = Firebase.functions().httpsCallable("SlugGetUnique");
      const result = await fbSlugGetUnique({collection: "videos", toBeSlugged: values.title});
      const slug = result.data;

      const videoData = {
        createdAt: Firebase.firestore.FieldValue.serverTimestamp(),
        updatedAt: Firebase.firestore.FieldValue.serverTimestamp(),
        publishedAt: Firebase.firestore.FieldValue.serverTimestamp(),
        title: values.title,
        slug: slug,
        description: values.description,
        userName: `${currentUser.data.nameFirst} ${currentUser.data.nameLast}`,
        userHandle: currentUser.data.handle,
        user: Firebase.firestore().doc("users/" + currentUser.id),
        userId: currentUser.id,
        isPublic: true,
        likeCount: 0,
        dislikeCount: 0,
        viewCount: 0,
        shareCount: 0,
      };
      // const vidRef = await Firebase.firestore().collection('videos').add(videoData);
      await vidRef.set(videoData);
      this.props.history.push(`/users/${currentUser.data.handle}`);
    } catch (e) {
      console.error(e);
      this.setState({error: e.message});
    }

    this.setState({loading: false});
  };