Click here to Skip to main content
15,446,510 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am building an application where my client required to upload some images and download them back when required I am using Mysql Database for rest application so I have decided to save all images as Blob file in my database in this I need to accomplish below task

1.upload image file from client side to node js express server using XMLHttpRequest
2.save image as blob file from node js express backend to Mysql Databse
3.retrive Image back when required from Mysql Databse using node js express backend and send image file to client
4.display/Download Image received from backend

from this above 4 tasks I was able to complete 3 but at unable to complete last one details of code is as per below

please advice how to convert blob file back to Image and display or download same at client side

What I have tried:

1.upload image file from client side to node js express server using XMLHttpRequest

JavaScript
var file=document.getElementById("uploadedfile").files[0];
    let formData=new FormData();
    formData.append("file",file);    
    var xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange=function(){}
    xhttp.open("POST","/formula144",true);    
    xhttp.send(formData);


2.save image as blob file from node js express backend to Mysql Databse

JavaScript
if(!req.files){
            console.log("No Files Found");
        }else{
            let imagedata=req.files.file;
            console.log(imagedata);
            let sql="UPDATE form92 SET form92.rc_photo=? WHERE form92.trucknoform11='RJ-52GA-1362'";
            let query=conn.query(sql,[imagedata.data],(err,results)=>{
                if(err){
                    console.log(err);
                }
            });            
        }


3.retrive Image back when required from Mysql Databse using node js express backend and send image file to client

JavaScript
sql3="SELECT form92.rc_photo FROM form92 WHERE form92.trucknoform11='"+req.query.truck_no+"'";
                   let query3=conn.query(sql3,(err,results3)=>{
                       if(err){
                           console.log(err);
                       }else{
                           res.send(results3[0].rc_photo);
                       }
                   });


4.display/Download Image received from backend

JavaScript
xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange=function(){
      if(this.readyState==4&&this.status==200){
          var myblobObj=this.response;
          var encodedUri=encodeURI(myblobObj);
          var link=document.createElement('a');
          link.setAttribute("href",encodedUri);
          link.setAttribute("download","file.jpg");
          document.body.appendChild(link);
          link.click();
      }
  }
  xhttp.open("GET","/formula143a?"+fdata,true);
  xhttp.setRequestHeader('Content-Type','application/X-www-form-urlencoded');
  xhttp.send();
Posted
Updated 18-Feb-22 22:34pm
Comments
Richard Deeming 18-Feb-22 5:25am     CRLF
sql3="SELECT form92.rc_photo FROM form92 WHERE form92.trucknoform11='"+req.query.truck_no+"'";
Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation/interpolation to build a SQL query. ALWAYS use a parameterized query. Everything you wanted to know about SQL injection (but were afraid to ask) | Troy Hunt[^] How can I explain SQL injection without technical jargon? | Information Security Stack Exchange[^] Query Parameterization Cheat Sheet | OWASP[^]
Andre Oosthuizen 18-Feb-22 10:14am     CRLF
You should also consider saving the image to your server files and only save the location path in your database to avoid speed issues. More info

1 solution

I have found Solution on YouTube in this video that We can display images in html img tag or embded tag from base64 string so I have changed my code of uploading Image on MySql Server and instead of uploading buffer I have converted buffer to base64 string and than uploaded to MySql database and at time of displaying Image just send that base64' codes to html img tag source I have also found that We can also display PDF through this technic in html embded tag
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900