0

I am currently working on a Stream-Chat API project, and I want the users to be able to upload an image directly from their device. When I have tested it, everything goes without issue, but the image doesn't get displayed, only the default avatar of the first user's letter. Is there any way to fix it?

This is the code which handles the image input:

{isSignup && (
                            <div className="auth__form-container_fields-content_input">
                                <label htmlFor="avatarURL">Profile Picture</label>
                                <input 
                                    name="avatarURL" 
                                    type="file"
                                    accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
                                    placeholder="Avatar URL"
                                    onChange={handleChange}
                                    required
                                />
                            </div>
                        )}

This is the handleChange function:

const handleChange = (e) => {
        setForm({ ...form, [e.target.name]: e.target.value });
    }

When I check the backend all it says is:

C:\fakepath\image.png

Jecs
  • 7
  • 6

1 Answers1

0

The problem is that you're setting the image path to be that of your local file system (where the image is located on your computer).

The process that you should follow is:

  1. Upload the image to a CDN (Content Delivery Network) of your choice, or to your custom backend that can serve images/files.
  2. Then you can set the image URL for the user to point to the location the image is now reachable on the Internet.

For Stream Chat you will need to follow a similar process when you want to send images/files in a chat channel. Stream provides a CDN for you and simplifies the process. Check out: https://getstream.io/chat/docs/react/file_uploads/?language=javascript

Gordon Hayes
  • 231
  • 1
  • 7