Question 185946 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Storing image data in MongoDB

I am new to MERN stack and am trying to create a helpdesk ticketing system for IT department of a company.
I want to allow the user to be able to add a new ticket and view all previous tickets on the user interface screen. While filling the ticket, the user must also have the option to upload images regarding the issue or a receipt.
Since I have already used MongoDB to store user data during login, can I store small sized images in binary form in the previous database itself?
If not, where and how else should I store this image data such that it can be retrieved easily?

Tags:

3

Answers


  1. 0

    Reasons why files should be stored in the database:

    1. When files are stored outside of the database, ACID consistency, which includes the capability to roll back an update, is more challenging. This isn’t to be dismissed gently. It can be extremely beneficial to have the documents and data set in a state of harmony and prepared to participate in exchanges.
    2. Files are part of the database and cannot be deleted.
    3. The file binaries are included by default in backups.

    Reason against putting away records in the database:

    1. increases the database’s size: The level of knowledge required to maintain a database increases in direct proportion to its size. Consequently, maintaining large databases is more challenging than maintaining smaller ones.

    2. serving the files to a website is more difficult.

    3. Cannot make use of cloud storage Cost Distributed storage like ‘AWS S3’ are a lot less expensive

    Generally speaking, this is an impractical notion. It will clog up the database files and cause a number of issues with performance. It gets even worse if you put the blobs in a table with a lot of columns.

    The DB’s performance will be affected further:

    1. If you use a SELECT on any BLOB column, you will always use disk access; however, if you don’t use BLOBs, you can get data straight from RAM (high throughput databases are optimized to fit tables in RAM);
    2. Due to the necessity of pushing BLOB to slaves, replication will be sluggish and have a significant delay. Unless you explicitly take that into account, a high replication delay will result in a wide range of race conditions and synchronization issues;
    3. Backups and restores of DBs will take a lot longer;

    Additionally, modern browsers are extremely efficient at serving files from the filesystem, so there is no speed advantage of storing a blob over a file system.

    References:

    1. https://knowledge.e.southern.edu/cgi/viewcontent.cgi?article=1110&context=crd
    2. https://www.linkedin.com/pulse/which-better-saving-files-database-file-system-abuthahir-sulaiman/
    3. https://softwareengineering.stackexchange.com/questions/150669/is-it-a-bad-practice-to-store-large-files-10-mb-in-a-database

    So for your stack the better option would be to store files in filesystem and can be achieved in two ways:

    1. Using server file system — can use a tool like multer
    2. Using AWS S3 — see here

    You can further optimize the AWS S3 upload by using pre signed urls which directly uploads to S3 from your React code. link here

    Login or Signup to reply.
  2. 0

    In general you have two options.

    • GridFS is a specification for storing and retrieving files that exceed the BSON-document size limit of 16 MB. The files are stored separately on the file system and you don’t have any limits on size.

    • Store them in the documents. Either you use the Binary Data data type or you store the Base64 value as string. In either case you must convert your binary image into a Base64. If you store it as text then the 16 MiByte size limit corresponds to 12 MiByte max. image size. For BinData I don’t know whether the limit of 16 MiByte applies to the binary size or the Base64 string.

    Of course, you have a third option by storing the file somewhere else and store just the URL in your database.

    Login or Signup to reply.
  3. 0

    Yes, you can store small-sized images in binary form directly in your MongoDB database. MongoDB supports the Binary Data type, which allows you to store binary data such as images. You can store the image data as a binary blob within a document in your existing MongoDB database.

    To store an image in binary form, you can convert it to a binary format such as Base64 and then store the resulting string in a field of your document. Here’s an example of how you could structure your ticket document in MongoDB to include an image field:

    {
  _id: ObjectId("..."),
  title: "Ticket Title",
  description: "Ticket Description",
  image: "Base64EncodedImageString",
  // Other ticket fields
}

    When a user uploads an image, you would convert it to Base64 using a suitable library (such as Buffer in Node.js) and then save the resulting string in the image field of the ticket document.

    However, keep in mind that storing large amounts of binary data in MongoDB may not be the most efficient solution in terms of performance and database size. It is strongly recommended to store binary data such as images in a file storage system (e.g., local disk, cloud storage, or a specialized service like Amazon S3) and store the reference to the file in the database instead.

    You can follow these steps:

    • When a user uploads an image, save it to a file storage system (e.g.,
      local disk or cloud storage) and generate a unique filename or key
      for it.
    • Store the generated filename or key in the image field of the ticket
      document in your MongoDB database.
    • When you retrieve the ticket document, you can use the stored
      filename or key to fetch the corresponding image file(icluding URL) from the file
      storage system and display it in your user interface.

    By storing the images separately from the database, you can optimize performance, reduce database size, and make use of specialized storage solutions for handling binary data efficiently.

    Consider using libraries or tools like multer or AWS SDK (if you choose cloud storage) to handle file uploads and storage operations more conveniently in your MERN stack application.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search