Implement the file upload to the server store hook

src/components/createItem.jsx

@@ -31,7 +31,14 @@ class CreatePost extends Form {
       id: auth.currentUser.uid,
     };
     const posts = collection(db, "posts");
-    console.log(file);
+
+    const types = ['image/png', 'image/jpeg', 'image/jpg', '.gif'];
+    if (types.includes(!file.type)) {
+      console.log('Wrong file');
+      return
+    };
+
+
     try {
       await addDoc(posts, {
         title,
@@ -44,7 +51,7 @@ class CreatePost extends Form {
       const errorCode = error.code;
       console.log(error);
       const errors = { ...this.state.errors };
-      errors.title = errorCode;
+      errors.file = errorCode;
       this.setState({ errors });
     }
   };

src/components/progress.jsx

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import React from 'react';
+import FileUpload from '../hooks/Hookstorage';
+
+const ProgressBar = () => (
+  <div className="progress" />
+);
+
+export default ProgressBar;

src/hooks/Hookstorage.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import { useState, useEffect } from 'react';
+import * as firebase from 'firebase/app';
+import 'firebase/storage';
+import 'firebase/firestore';
+
+const projectStore = firebase.storage();
+
+const FileUpload = (file) => {
+  const [progress, setProgress] = useState(null);
+  const [error, setError] = useState(null);
+  const [url, setUrl] = useState(null);
+
+  useEffect(() => {
+    // References
+    const storageRef = projectStore.ref(file.name);
+
+    storageRef.put(file).on('state_changed', (snap) => {
+      let percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
+      setProgress(percentage);
+    }, (error) => {
+      setError(error);
+    }, async () => {
+      const url = await storageRef.getDownloadURL();
+      setUrl(url);
+    })
+  }, [file])
+
+  return { progress, url, error }
+
+}
+
+export default FileUpload;