Uploading and reading images to database in base64 format in react - reactjs

Question

I have an assignment and I need to do it. I'm new to react. There are a lot of resources about uploading pictures on the internet, but they all do it in a different way and it's not what I want. I have a component named product upload in functional component format, and when uploading a product, I want the user to select an image from their computer and upload an image to the product, but this will be in base64 format. At the same time, I need to read the pictures of the products from the database, since I will bring this picture while fetch the products. and the user can cancel the image he selected while uploading the product. Can you make a sample react code with these items? really important. I'm new to React and I don't know much about it.I need to do this.
To summarize briefly, I am writing below in bullet points.
1. the user will select an image from his computer and when he
selects this image, it will appear on the screen in a certain size.
2. if the user clicks the upload button, this image will be
uploaded to the database in base 64 format.
3. if the user presses the cancel button, for example, it may be next
to the picture. The picture selected by the user will be
cancelled.
4. Lastly How can I read the picture information in this database and bring the picture back
to the screen.

Answer 1

I will try to briefly summarize what you need to do and provide a minimal working example.
You need to understand before continuing:
What are Client and Server
HTTP Request Get/Post etc
SQL Database
You need a server. The server will receive the base64 image and store it in the db. It also needs to provide a way to request sending the image back.
For your basic example you can use the python webserver. We use sqlite in python to manage the database.
from http.server import BaseHTTPRequestHandler, HTTPServer
from sqlite3 import connect
if __name__ == "__main__":
db = connect('database.db')
cursor = db.cursor()
cursor.execute(
'CREATE TABLE IF NOT EXISTS images (id INTEGER PRIMARY KEY, base64 TEXT)')
class ServerHandler(BaseHTTPRequestHandler):
def do_GET(self):
cursor.execute("SELECT base64 FROM images LIMIT 1")
image = cursor.fetchnone()
self.send_response(200)
self.send_header('Content-type', 'text/plain')
self.send_header('Content-Length', len(image))
self.end_headers()
self.wfile.write(image)
def do_POST(self):
content_length = int(self.headers['Content-Length'])
post_body = self.rfile.read(content_length)
cursor.execute(
"INSERT INTO images (base64) VALUES (?)", (post_body,))
db.commit()
self.send_response(200)
self.end_headers()
webServer = HTTPServer(("localhost", 8080), ServerHandler)
print("Server started")
try:
webServer.serve_forever()
except KeyboardInterrupt:
pass
webServer.server_close()
db.close()
print("Server stopped.")
For the client side aka your react script take a look at the following component. It has an HTML input element that accepts images.
on upload, the image is converted to base64. We then use fetch to send the data to the post method of our python server.
import React from "react";
export default function ImageUpload() {
function convertBase64(file) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = (error) => {
reject(error);
};
});
}
async function uploadImage(event) {
const file = event.target.files[0];
const base64 = await convertBase64(file);
fetch("http://localhost:8080/", {
method: "POST",
headers: { "Content-Type": "text/plain" },
body: base64,
});
}
return (
<input
type="file"
id="img"
name="img"
accept="image/*"
onChange={uploadImage}
/>
);
}
Now you got the basic idea but there's a lot of work todo.
Make the python server better by sending correct responses, validating that the input is base64 encoded, etc. Come up with a good SQL table to store your images. Make sure the image you want is returned. For the frontend make the component pretty. Write another component that displays the image from the db. catch errors and lots more...