React File Upload/Profile Pic Issues πŸ™

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;

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

For ulpoading files take a look at:

1 Like

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

I’m checking :man_mechanic:

1 Like

Thanks for the reference. I did read through the react/moralis github and used the saveFile(). For some reason the file is not uploading on my server instance though.

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:

1 Like

Yomoo! Thank you so much for your help. I was able to take your code and put it back into my user profile and now the files uploading works! Thank you again!

1 Like

Happy BUIDLing :man_mechanic:

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