React File Upload/Profile Pic Issues 🙏

Technical Issue Reporting
#1

Hi everyone!
I have set up a page for a user to update their profile. Updating username, email, etc all updates and displays on my moralis server.

I have spent close to 100 hours and looked at other forum submissions and still haven’t figured out how to upload and display an image for profile pic, so… I am asking for any assistance.

Please review the attached code and help find a solution. This code is only the part a user uses to upload the file.

Your help is greatly appreciated. :pray::pray:

import React from 'react';
import { useState } from 'react';
import { useMoralis, useMoralisFile } from "react-moralis";

function User() {   
    const { user } = useMoralis();
    const { saveFile } = useMoralisFile();

    const [photoFile, setPhotoFile] = useState();    
    const [photoFileName, setPhotoFileName] = useState();

    const onChangePhoto = e => {
        setPhotoFile(e.target.files[0]);
        setPhotoFileName(e.target.files[0].name)
    }

    const onSubmitPhoto = e => {
        const file = photoFile;
        const name = photoFileName;
        saveFile(name, file);
        user.set('profilePic', file);        
    }
    
    return (
        <>
            <div className="profile-pic-container">
                <img className="profile-pic" src={user.attributes.profilePic} alt=""/>                    
            </div>

            <div className="profile-pic-update-container">
                <form onSubmit={onSubmitPhoto}>                            
                    <div className="mb-3">
                        <label htmlFor="profilePhoto" className="form-label">Select a Profile Pic</label>
                        <input className="form-control" type="file" accept="image/*" multiple="false" id="profilePhoto" onChange={onChangePhoto} />                                
                    </div>
                    <input type="sumbit" value="Upload" className="btn btn-primary btn-block mt-1" onClick={onSubmitPhoto}/>
                </form>
            </div>            
        </>
    )
}

export default User;
#2

Hey @solalch

Great job!

The easiest way for displaying a picture is to use:

<img className="profile-pic" src={user?.attributes.avatar._url} alt=""/>

Hope this will help you

1 Like
#3

For ulpoading files take a look at:

1 Like
#4

Thank you for the reply Yomoo! Thanks for sharing the best way to use src to call the profile pic. The biggest issue I am having is that the file is not saving to the server so there is no profilePic file to call. Any idea of what I’m doing incorrect here? Many thanks

#5

I’m checking :man_mechanic:

1 Like
#7

Hey @solalch

Let me know how it will work for you :grinning:

import React, { useEffect } from "react";
import { useState } from "react";
import { useMoralis, useMoralisFile } from "react-moralis";

function User() {
  const { user, authenticate } = useMoralis();
  const { saveFile, moralisFile } = useMoralisFile();

  const [photoFile, setPhotoFile] = useState();
  const [photoFileName, setPhotoFileName] = useState();
  const [profilePic, setProfilePic] = useState();

  useEffect(() => {
    if (user) {
      setProfilePic(user.attributes?.profilePic?._url);
    }
  }, [user]);

  const onChangePhoto = (e) => {
    setPhotoFile(e.target.files[0]);
    setPhotoFileName(e.target.files[0].name);
  };

  const onSubmitPhoto = async (e) => {
    const file = photoFile;
    const name = photoFileName;
    let fileIpfs = await saveFile(name, file, { saveIPFS: true });
    user.set("profilePic", fileIpfs);
    await user.save();
    setProfilePic(user.attributes.profilePic._url);
  };

  return (
    <>
      <div className="profile-pic-container">
        <img className="profile-pic" src={profilePic} alt="" />
      </div>

      <div className="profile-pic-update-container">
        //<button onClick={() => authenticate()}>login</button>
        <form onSubmit={onSubmitPhoto}>
          <div className="mb-3">
            <label htmlFor="profilePhoto" className="form-label">
              Select a Profile Pic
            </label>
            <input
              className="form-control"
              type="file"
              accept="image/*"
              multiple={false}
              id="profilePhoto"
              onChange={onChangePhoto}
            />
          </div>
          <input
            type="button"
            value="Upload"
            className="btn btn-primary btn-block mt-1"
            onClick={onSubmitPhoto}
          />
        </form>
      </div>
    </>
  );
}

export default User;

Happy BUIDLing :man_mechanic:

2 Likes
Moralis react: saveFile() on IPFS
IPFS no longer working in new Moralis release
How to Save Files using React-Moralis from Twitter-Clone Youtube Tutorial
#9

Happy BUIDLing :man_mechanic:

#10

Yes this is good, but I want to be able call the functions from external files, like a conventional class not always inside a react class. Hope you get what I mean. This is why I prefer the moralis sdk to the moralis-react lib