Image Upload takes a lot of time to save in database - javascript

I encountered a problem that when i upload an image , it takes a lot of time to upload it even if its only 1MB.
My Upload process is first use a <input type='file'> then convert the uploaded image to base64, convert it to byte then saving it to the database with image data type.
This is my SQL(Stored Proc):
IF EXISTS(SELECT * FROM VisitationLogs_BVL where UserIdx = #UserIdx and OutletIdx = #OutletIdx and convert(varchar, DateVisited, 23) = convert(varchar, getdate(), 23))
BEGIN
SELECT 0 'Result'
END
ELSE
BEGIN
INSERT INTO VisitationLogs_BVL(UserIdx,OutletIdx,CashierUser,IPAddress,Remarks,[Image])
VALUES(#UserIdx,#OutletIdx,#CashierUser,#IPAddress,#Remarks,#image)
SELECT ##ROWCOUNT Result, SCOPE_IDENTITY() AssignIdx
END

I will suggest you not to store the image in database. Instead you can save the image in your server and you can store the path of the image in database. Or else you can also use Azure Blob storage to save the image.

Storing images in the database is a big no because it uses alot of resources. and by converting the image to base64 you're using more resources, the best way to store images is to store them in a CDN like amazon s3 because then you're letting amazon take care of the whole upload process which won't put a toll on your database and your server. once you upload the image to s3 you can then get the url of it and just display it in your html. this is the most efficient way to store images using CDN will also ensure your images are cached across the world.

It is highly discouraged to store images in a SQL database as it will hugely reduce the performance. The recommended way is to store them as pure image files, store only the path in the database. Then use a simple http server to serve those static files.
More info: https://www.microsoft.com/en-us/research/publication/to-blob-or-not-to-blob-large-object-storage-in-a-database-or-a-filesystem

Related

Retrieve image from MYSQL and display it in HTML

I am currently working on an online text editor for writing wikipedia-like articles.
Therefore I have <input type="file" accept="image/*">in HTML.
What I want to do is save the article as text to a MYSQL database and later, when displaying the article take the text from the database to show it in the page.
But how would I do this with the Images?
What's the best way to save them to a database?
And how can I retrieve them from the DB and display them?
I think wikipedia just displays an img-tag with an link to the image as source:
<img src="link_to_image">
but how could I create such a link?
First of all you can store an image in the DB but it's not a good practice.
There are already posts about this: Example
What I would do, anyway, is:
store the image in a blob column (maybe as base64 string)
First you have to convert the image, then store it in the DB. Assuming you are using PHP, you could do something like this:
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($imageData);
Then store it in the DB with a simple insert.
retrieve the image and return it as a response of a service
In mysql you should just do a select and then return it via (I assume PHP service)
browser side, to display the image: Example
This differs from what you want to do
<img src="link_to_image">
I had to do implement a solution similar to this one and works fine enough. You can encounter problems if the image is large in size (2MB for example) or if you want to fetch multiple images at once.
To achieve what you want to do, the best solution is to store the image in a file system that allows you to serve the files or , for example in AWS S3, and just save the image URL in the DB.

What is the standard way to display a large number of images for each item in my database

I'm quite inexperienced and I am building a movie database website of roughly 100 movies using node.js, express, and mongoDB. Each movie has roughly 25-30 images, some of which will need captions, as well as a handful of text fields. I am comfortable with adding and storing the text to MongoDB but I'm not sure how to address the image section. I have all of the images stored locally on my device but I'm not sure where to go from here.
Would pushing all of the images into the database be the best way forward? That seems like an unnecessary step, but once again, I'm a beginner.
the best way is like this. create column image_url like char.
and your code :- before save the image , you need to generate some unique string. then rename your image using that unique string. now you can save your image into any cloud or, your storage path. after image saved, add db record. when you add db record save generated unique string into image_url column in db.
when you retrieve image from db, find your image in your saved storage path using that image_url ( unique string ) ❤️
don’t try to save full image with format in db directly. because it is bad practice.

What is the most performant way to store an image as base64 dataURL?

I am using Django 3.0 with PostgreSQL 12.
I need to store an image and render it on a page as base64 for use in a javascript function.
Is it more performant to:
store the image as TextField and save the raw base64 in the database
store the image as a file on the server (using filefield), and convert the image server side to base64 before returning it in context
store the image as a file on the server, and convert the image client side to base64?
The images are all <10kb big, and typically would be less than 50 per page. However there may be a large number of page loads with concurrent users.

What is proper way to upload a image to a MySQL database?

What is the proper way to upload images into a MySQL database?
Generally, I declare the 'image' field as text and I use move_uploaded_file() function in order to save images on my server.
Is this the correct way to upload images into a database? I will have to upload lot of images, as social networking website might have to, for instance.
I think there are two reliable ways to work with images into your database:
1 - Store the file in some folder at your server, then write the filepath in some field in your image table.
2 - Encode your image as base64 with the base64_encode($yourImageData) method. This method will return a string that can be inserted into your table.
Preferably upload the image to server using File handling and PHP image libraries like GD and then store path as string in database. I think that should work.
As pointed out, it is not a good idea to save the image directly into database compared to save image on filesystem then save path/link to table fields.
but since the question is "upload images into mysql database"
I think you can check http://www.mysqltutorial.org/php-mysql-blob/

Best format to send image from javascript client to SQL server

I am making an application that will store a Azure SQL server DB user information, including profile photo downloaded from Facebook. On the server side, ASP.NET MVC4'll have a controller that will receive the information and send it to the database.
The client side is Javascript and thought to give the image in json (once converted to base64). Is it a good option? Is it better to directly send the jpg? What are the advantages of sending information in json?
In SQL Server image field would be stored as a nvarchar (max)
Are you going to return the image as a binary stream content type image/jpeg or as a text stream encoded base64? Is far more likely that you're going to do the former, so there is little reason to go through an intermediate base64 encoded transfer. And of course, store them as VARBINARY(MAX). Even if you would choose to store them as base64, choosing an Unicode data type for base64 text is really wasteful, (double the storage cost for no reason...), base64 can fit very well in VARCHAR(max).
But, specially in a SQL Azure environemnt, you should consider storing media in Azure BLOB storage and store only the Blob path in your database.
In my opinion, it's better sending the image directly in .jpg using Multipart Forms or something like that.
Sending information in Json is useful when you transfer explicit data, like collections or objects that you will be able to query or de-serialize later.
The client side is Javascript and thought to give the image in json (once converted to base64). Is it a good option?
As Pasrus pointed out, you are not going to manipulate the image data. So JSON does not seems to be a good choice here.
One option is, you can add the base64 data into src attribute in html tag and send it.
What are the advantages of sending information in json?
Please check this answers and there are so many:
Advantages of using application/json over text/plain?
In SQL Server image field would be stored as a nvarchar (max)
Please refer this link:
Storing images in SQL Server?

Categories

Resources