3
9 Comments

Problem with retrieving data from database of react-native app

I completed the data upload logic to mongodb database for ndashi, a react-native app. However, I have been stuck on retrieving the data from multipart form data to display on the app. I posted the problem in details in the stackoverflow link below please feel free to help.

https://stackoverflow.com/questions/59336895/retrieving-multipart-form-data-from-a-mongodb-gridfs-database-and-displaying-ima

on December 14, 2019
  1. 1

    Maybe I'm misunderstanding as I've never really used react native before but it seems like you're passing in just a file name. This would give no indication of where the file is actually located or the data that makes up the file.

    Unless there is something deeper happening in setPhoto that is actually supplying the image tag with more information, this could be your problem.

    1. 1

      As for your second problem, I'm a little confused.

      You say that the foreign key is:

      post.mediaData.id -> image id, does this mean the post id? I don't understand why you would store media data in both the post table AND image_uploads tables.

      My guess is that you actually need to search on one of your image_uploads tables to find a row that is connected by your foreign key to the post you are processing in your /posts GET route.

      It may be that the UI you have pictured is just showing you this foreign key but confusing you a little because it makes it look like your mediaData is located within the post document itself; but I can't say for sure without a look into what the rest of the schema looks like.

      Anyways, hope this was at least a little helpful. Feel free to let me know if I can answer any other questions.

      1. 1

        Thanks @faucet. No setPhoto only assign values to photo variable to store the state of photo nothing more. You are right I think just the file name gives no indication of where the file is coming from thats what I need help with on how is the proper way of reading the file from the db and passing it to an image tag.

        For the second part. The post id is different from post.mediaData.id which is just a reference id for the image associated to the post which will be in image_uploads.files. I would have just stored the image id alone in the post, the point of doing that is for every post, I want a reference to the image associated with that post. Since I used multipart form data to upload the data, it gives me the ability to upload text information (i.e. title of post, duration, postType etc) along with the image file. The text info is stored in the post collection while the image file data is stored in image_uploads.chunks and image_uploads.files. So what I want to do is for every image, retrieve the image file as well as the text data in post collection that is associated to the image. However, in my get route I am only able to retrieve the image file info in image_uploads.files but not the text info in post collection.

        I have included an image of image_uploads.files in the stackoverflow post for clarity

        1. 2

          found this: https://github.com/aheckmann/gridfs-stream

          specifically:

          // streaming from gridfs
          var readstream = gfs.createReadStream({
            filename: 'my_file.txt'
          });
          

          or, alternatively:

          var readstream = gfs.createReadStream({
            _id: '50e03d29edfdc00d34000001'
          });
          

          then you would need to use that stream and either pipe it to your request or write the chunks to a buffer that can be returned in your response.

          1. 2

            Also, you don't really want to return both the data and the post text information in the same request.

            What you want is to provide the current /posts response objects with an 'imageUrl' that points to a new http GET route in your express project, for example: website.com/images/:imageId or something. Then this url will be given to your react image tag as the source uri.

            Alternatively, you can leave the posts response as is and just create the image urls client side knowing that the id. Either way, you need that new route.

            1. 1

              This is the flow I actually needed to make it work. It solved my issues, thanks so much @faucet.

              1. 2

                cool, glad I could help!

  2. 1

    I tried to understand the problem but I can't if I can get more details

    1. 1

      I added more details in my comment above, thanks @Rickafds