iamshaunjp / firegram

Starting & final course files for the FireGram tutorial (React, Firebase & Framer Motion) on Brad Traversy's YouTube channel.

firegram

Starter & final course files for the FireGram tutorial (React, Firebase & Framer Motion) on Brad Traversy's YouTube channel.

Link to video - https://www.youtube.com/watch?v=vUe91uOx7R0&t=652s

Using the files

• To see the starter files, select the 'starter' branch.
• To see the final files, select the 'final' branch.

firegram's Issues

Default import issue of config.js

Default import is not found in projectStorage

ProgressBar issue

This is the error am getting after completing till the step of adding data into the firestore database and getting the URL in the firestore dashboard

basically its not giving any URL , and showing null , and gives this error in the console

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at ProgressBar (http://localhost:3000/static/js/main.chunk.js:181:3)

./src/firebase/config.js Attempted import error: 'firestore' is not exported from 'firebase/app' (imported as 'firebase').

import problem

./src/firebase/config.js
Attempted import error: 'firestore' is not exported from 'firebase/app' (imported as
'firebase').

Image upload issue

There is a bug in this application. If a user uploads an image with the same name firebase will send the same image twice.

Collection not being created.

The images are being uploaded to the Firebase Storage but upon checking the Firestore Database, there is no collection by the name 'images'. Collection is not being created at all, no matter how long I wait or how many images I upload.

I am copy pasting your code.

Images getting uploaded twice in firebase storage

Here is my code:
`import React from "react";
import { useState, useEffect } from "react";
import { firestore, storage } from "../firebase/config";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";

const useStorage = (file) => {
const [progress, setProgress] = useState(0);
const [error, setError] = useState(null);
const [url, setUrl] = useState(null);

useEffect(() => {
const storageRef = ref(storage, file.name);
const collectionRef = collection(firestore, "images");
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
"stage_changed",
(snapshot) => {
let percentage =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
setProgress(percentage);
},
(error) => {
setError(error);
},
() => {
getDownloadURL(uploadTask.snapshot.ref).then((url) => {
const created = serverTimestamp();
addDoc(collectionRef, { url, created });
setUrl(url);
});
}
);
}, [file]);
return { url, progress, error };
};

export default useStorage;
`

Attempted import error

./src/firebase/config.js
Attempted import error: 'firebase' is not exported from 'firebase/app'.

Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File

ProgressBar.js

setFile is not a function

cors error while uploading

@iamshaunjp
cors error while uploading the images

export storage & firestore in config.js

Collection not being created.