0

I am creating a mobile app using React Native and I want to have the ability for the user to change their profile picture. I am using an ImagePicker for the user to select their image.

What I am having trouble with is how do I use the response from image picker to maintain state when the app is opened and closed, what should I save in my MongoDB Database so that I can reference this image later?

For instance, this is how a user decides they want to change this image as their profile picture

 const chooseImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1
        })
        if (!result.canceled) {
          console.log('this is result from image picking ' + JSON.stringify(result))
          let uri = result.uri;
          setImage(uri);
        }
  }

When I print out the screen the result of picking an image, this is a sample output for instance...

this is result from image picking {"height":3026,
"uri":"file:///var/mobile/Containers/Data/Application/7C984772-6DE3-40A1-9322-8AC0D2A5C963/Library/Caches/ExponentExperienceData/%2540anonymous%252Fjellyclient-43cadc71-e89c-4d72-a2eb-1470d9bdf6c5/ImagePicker/3746A73C-AEAD-43AE-A789-5D2C5D16578E.jpg",
"type":"image",
"width":3024,
"cancelled":false}

is any of this response useful? Since my image is not a simple link from the web, I am having trouble saving the image into my database. Any insight or tools I should use would be much appreciated!

Right now, my profile schema for my MongoDB Database is like below:

const ProfileSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
  bio: {type: String, required: false},
  friends: [{ type: mongoose.Schema.Types.ObjectId, ref: "User", required: false }],
  postHistory: [{ type: String, required: false }],
  list: [{ type: mongoose.Schema.Types.ObjectId, ref: "List", required: false }],
  profilePic: { type: String, required: false }, //can change to...?
});
marcelomo
  • 161
  • 2
  • 14

1 Answers1

0

First you Cannot save it directly to DB. You cannot save it locally to your mobile storage to read it again.

Second You need a Backend Api where you will push image as formData

Third your backend code must have file read.

Vishal
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 20 '22 at 00:35