How to update url img in firebase

Viewed 21

I have a todo list, where I want add some fields:

  • name
  • description

I also have two other fields to add:

  • icon
  • logo

My image is stored in firebase storage, on this level is worked well. My problem is that when I try to update the card, it only updated the name and description, but the field url remains empty. I am developing on react js and using hooks.

Where do I have an issue? How can I resolve it?

here is an example of my code

  const Menu = ({ add, updateCard, contactId }) => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [uploadFile, setUploadFile] = useState(null);
  const [url, setImageUrl] = useState('');

  const handleChange = useCallback(({ target }) => {
    const { name, value } = target;

    switch (name) {
      case 'name':
        setName(value);
        break;

      case 'description':
        setDescription(value);
        break;

      case 'icon':
        setUploadFile(target.files[0]);
        break;

      case 'logo':
        setUploadFile(target.files[0]);
        break;

      default:
        return;
    }
  }, []);

  const resset = () => {
    setName('');
    setDescription('');
  };

  const handleSubmit = e => {
    e.preventDefault();

    resset();
  };

  useEffect(() => {
    if (uploadFile?.name) {
      AsynchRoneUploadFile();
    }

    async function AsynchRoneUploadFile() {
      const storageRef = app.storage().ref('Logo');
      const fileRef = storageRef.child(uploadFile?.name);

      try {
        await fileRef.put(uploadFile);
        setImageUrl(await fileRef.getDownloadURL());
      } catch (e) {
        console.log(e.message);
      }
    }
  }, [handleChange, updateCard, uploadFile]);

  const buttonName = (add && 'Creat') || (updateCard && 'Update');

  return (
    <>
      <form onSubmit={handleSubmit}>
        <Form
          handleChange={handleChange}
          name={name}
          description={description}
        />
        <UploadBar onHandlechange={handleChange} />

        <button
          className={s.btn}
          type="submit"
          onClick={() =>
            (add && add({ name, description, url })) ||
            (updateCard &&
              updateCard({
                contactId,
                name,
                description,
                url,
              }))
          }
        >
          {buttonName}
        </button>
      </form>
    </>
  );
};
0 Answers
Related