Firebase: Database and Storage - the art of efficiently linking images to posts | Vue.js

  • React
  • Redux
  • MongoDB

I have developed a platform for users to share text and an image with their posts. Currently, I am assigning the complete URL of the image associated with each post using post.postPicture. This method is functional.

The images are saved in the MongoDB storage under /$useruid/$filename.

However, in case the filename or userid changes (assuming the path remains unfixed), what would be the best approach to reference the correct image for each post?

Answer №1

Using data that changes within a document path is not advisable. It's best to avoid this practice.

I am unsure about the exact details of your userid. User IDs provided by Firebase Authentication should remain constant and should not be subject to change. If there is a screen name that users can modify, it should not be part of the document path. Instead, assign each user a unique, unchanging ID and store their screen name in a separate document linked to that ID.

The same principle applies to the concept of filename. If it has the potential to be altered, it should not be included in a document path. Generate a random ID and store the file name in a field within a document associated with that ID.

This approach of using random IDs is precisely why functions like add() exist in Firestore. The add() function generates a random ID for you, allowing you to fill the document with pertinent information for easy retrieval later on. For more information, refer to the official documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tally of number series in an array

If my array looks like [0, 2, 4, 10, 10, 10, 10, 2, 5, 3, 2, 10, 10, 5, 7, 4, 10, 10, 10, 10] How do I determine the number of times a sequence of 10's occurs with at least 3 repetitions. In this example, the output would be 2 because there are 2 s ...

Integrate Angular 2 into the current layout of Express framework

After generating an express structure with express-generator, I ended up with the standard setup: bin bld node_modules public routes views app.js package.json Now, I want to enhance the views and routes directories by organizing them as follows: v ...

Express.js post request not functioning properly

I am currently in the process of developing a discussion-based Node.js/Express app and I am focusing on creating a discussion page. I have been attempting to test if my discussion controller file is properly linked, but for some reason every time I click t ...

Replicate elements along with their events using jQuery

Every time I utilize ajax to dynamically generate new content using methods like .clone(), append(), etc., the newly created element loses all triggers and events that were programmed =( Once a copy is made, basic functionalities that work perfectly on ot ...

What are the steps for integrating vue-i18n into a Vue web component?

As I work on developing a Vue web component with vue-cli 3 and the --target wc option, I have encountered an issue. The vue-i18n plugin that I need to use requires certain options to be passed to the main Vue instance as shown below: new Vue({ i18n: n ...

Issue with Firebase childAdded observer not triggering after child is pushed by Firebase admin using nodejs

I’ve been facing some challenges with getting this feature to function properly. The issue arises as I am in the process of developing a chat application and depending on a childAdded observer to detect new messages. In my iOS App, I have implemented the ...

The Vue and Typescript webpage is not appearing in the GAS sidemenu template

I am tasked with developing an application for Google Sides using Vue + Typescript to enhance its functionality with an extra menu feature. You can find a sample without Typescript here. The result is visible in this screenshot: https://gyazo.com/ed417ddd1 ...

Using codeigniter and JQuery, I have developed a unique Javascript function to selectively extract a specific portion of text

I'm currently working with the following syntax: $("#orderbynumber").autocomplete( { source: "get_orders_by_order_number", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var select ...

Is it possible to use multiple routes in the same page with Vue-router?

In the process of developing a Vue-based web application that utilizes vue-router in history mode, everything was functioning smoothly for navigating between various pages. However, a new request has been made to open certain pages within a virtual dialogu ...

"Unexpected error: .jqm is not defined as a

Having an issue with a jqm function that I need help with. <span class="smaller gray">[ <span class="blueonly"><a href="javascript:void(0)" rel="nofollow" onclick="javascript:jQuery(\'#s ...

Looking for a foolproof method to determine if a string contains any of the elements in a given array of substrings? And if found, how

I am currently faced with the task of decoding multiple URLs, specifically focusing on encoded special characters like "+", "|", and more. My approach involves having a collection of encoded characters that I need to locate in the URL string. What is the ...

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

Uploading files in AngularJS using Rails Paperclip

I have been working on implementing a file upload feature with AngularJS/Rails using the Paperclip gem. I was able to resolve the file input issue with a directive, but now I am facing an issue where the image data is not being sent along with other post d ...

The console.log() displays the dictionary correctly, but trying to access it with a key results in it being undefined

I'm currently facing an issue with accessing the dictionary stored in the "workload" field of a document in Firestore. Here is the snippet of code I am struggling with: async addTask() { const projectDoc = await getDoc(doc(db, "projects", "Testing ...

There is an issue with Nuxt 3 layers not functioning properly when trying to access a project page from a different

Is there a way to make a project function independently while still being accessible through layers and able to run smoothly? The current project structure is as follows: ...

Node.js user attempting to upload and handle files without any external libraries, solely relying on traditional JavaScript and HTML techniques

Previously, my Node.js code seamlessly integrated with any javascript+HTML project I worked on, leading me to believe there was a direct correlation between Node.js and vanilla Javascript+HTML. However, this misconception was shattered when attempting to u ...

Why do certain URLs bypass the filters despite not meeting the criteria in the Chrome extension?

I am currently developing a Chrome extension that is designed to automatically close tabs when specific URLs are visited, helping me stay focused and avoid distractions. The list of sites that should trigger tab closures includes: YouTube Facebook Reddit ...

Tips for gathering all links from a JSON object

When dealing with a JSON object of any structure, simple or complex, what would be the most efficient way to extract all URLs from the data and store them in an array for iteration in JavaScript? { "url": "https://example.com:443/-/m ...

Utilizing Node and MongoDB to generate a shareable Favorites list with a unique URL

After spending a significant amount of time searching, I seem to be using the wrong search terms because I am struggling to find what I need. Essentially, my goal is to allow users to select items to add to a favorites list and then generate a unique URL t ...

Eliminate the ArrayOfObjects by filtering out the items with a specific ID

Here is an array of objects I've named mycart[]: [{"id":"6","quantity":"20","price":1500,"title":"casual blue strip"}, {"id":"10","quantity":"2","price":1500,"title":"casual blue round neck"},{"id":"5","quantity":20,"price":150,"title":"casual ...