How to handle image in nativescript-Sqlite


#1

I am receiving Image base64 content in Response from the Server… I am handling as below,

// assign base64 content to Imagesource
  var image = new ImageSource();
  image.loadFromBase64(getImageData[0].Image.File);

Now I would like to Implement to Store image in SQLIte
Sqlite only supports BLOB .

Base64 to BLOB file save in SQLIte

To convert base64 to BLOB i have used (NOT WORKING)

 var blob = this.b64toBlob(getImageData[0].Image.File);
 console.log("blob data: " + blob);*/

How to save and retrieve BLOB Image from Database and set to Image-Source ?


#2

Curious as to why you’d store images in a database? Would that not make the db slower?


#3

I am developing chat application. In order to get that chat history while internet connection is not available then It shoul display all the Images from the Database…?

Do you have any other option to save it…? Open for suggetions and feedback


#4

I may be wrong so don’t take this as gospel. I would think the way to do it would be store the images locally and a reference to them in the db. That would keep the db from having to deal with potentially large files and the app would in theory be much faster.

Maybe some of the more experienced people here could chime in!


#5

Did you contact the author of the plugin?


#6

You should store the images locally (like, for example, whatsapp does), unless you don’t want the images to appear on the device’s gallery app. In that case base64 is OK (but you could store them as plain text files, may be?).


#7

Create Table

     (new Sqlite("TestImage.db")).then(db => {
        // 0 (false) and 1 (true).
        db.execSQL("CREATE TABLE IF NOT EXISTS TestPrivateChatHistory (userId INTEGER,userToIdInMsg INTEGER,messageId INTEGER PRIMARY KEY,messageText TEXT,date NUMERIC, isIncoming INTEGER,isImage INTEGER, image TEXT, base64Image TEXT, fileId INTEGER,fileName TEXT, isPDF INTEGER, TextVisible INTEGER)").then(id => {
          this.database = db;
          console.log("Test Image table created successfully...!!!");
        }, error => {
          console.log("CREATE TABLE ERROR ", error);
        });
        this.database = db;
      }

Response from Server base64 Handling
Note: getImageData[0].Image.File is base64

 "UserToIdInMsg": resultMessageData.UserTo.UserID, "messageId": resultMessageData.Msg.MessageID, "messageText": resultMessageData.Msg.Text,
              "date": resultMessageData.Msg.Date, "isIncoming": 0, "isImage": 1, "image": getImageData[0].Image.File, "base64Image": "image", "fileId": getImageData[0].Id,
              "fileName": getImageData[0].Name, "isPDF": 0, "TextVisible": 1

Insert into Table

 this.database.execSQL("INSERT INTO TestPrivateChatHistory (userId,userToIdInMsg,messageId,messageText,date,isIncoming,isImage,image,base64Image,fileId,fileName,isPDF,TextVisible) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)",
      [receiverId, UserToIdInMsg, messageId, messageText, date, isIncoming, isImage, image, baseImage64, fileId, fileName, isPDF, TextVisible]).then(id => {
       
        this.fetchPrivateChatHistrory(receiverId);
      }, error => {
        console.log("INSERT ERROR:", error);
      });

Retrive from Database:

Set to Image Source while Loading from Database

Retrieve base64 String from database and convert it into ImageSource.

    this.database.all("SELECT * FROM TestPrivateChatHistory WHERE userId=" + receiverId).then(rows => {
      this.messages = [];

      for (var row in rows) {


        if (rows[row][7].length > 1) {
          var src = new ImageSource();
          src.loadFromBase64(rows[row][7]);
          this.messages.push({
            "userId": rows[row][0],
            "userToIdInMsg": rows[row][1],
            "messageId": rows[row][2],
            "messageText": rows[row][3],
            "date": rows[row][4],
            "isIncoming": rows[row][5],
            "isImage": rows[row][6],
            "image": src,
            "base64Image": rows[row][8],
            "fileId": rows[row][9],
            "fileName": rows[row][10],
            "isPDF": rows[row][11],
            "TextVisible": rows[row][12],

          })
        }
        else {
          this.messages.push({
            "userId": rows[row][0],
            "userToIdInMsg": rows[row][1],
            "messageId": rows[row][2],
            "messageText": rows[row][3],
            "date": rows[row][4],
            "isIncoming": rows[row][5],
            "isImage": rows[row][6],
            "image": rows[row][7],
            "base64Image": rows[row][8],
            "fileId": rows[row][9],
            "fileName": rows[row][10],
            "isPDF": rows[row][11],
            "TextVisible": rows[row][12],

          });
        }
        this.messagesArray = new ObservableArray(this.messages);
      }