1

I am using Bootstrap File-Input to pick a file on client side, and now need to get a Base64 string from this file and submit it using AJAX (It is required that the page should not reload, and that callback should be shown in File-Input window).

I have previously had it as a normal file upload to the server, but now have been required to store the Base64 string to DB (MS SQL 2019) instead, so I need to figure out how to:

  1. Get the Base64 String.
  2. Submit the string using AJAX and get JSON callback.

I have searched on google and https://plugins.krajee.com/file-input to find some info on how to convert it to get the Base64 string and how the JSON callback should look like, but with out any luck, and have comeup with the following my self - but does not seem to be working:

output = "{""uploaded"":""File uploaded.""}"
Response.ContentType = "application/json"
Response.Write output

I have the following "base" script from File-Input that has worked for my previously script :

$("#input-fas").fileinput({
    theme: "fas",
    uploadUrl: "upload_profile.asp?FileName=<%=Request.Querystring("initials")%>",
    allowedFileExtensions: ['jpg'],
    overwriteInitial: false,
    maxFileSize:2000,
    maxFilesNum: 1,
    language: "da",
    browseOnZoneClick: true,
    initialPreviewShowDelete: 0,
    initialPreview: [
    "<img src='<%=ProfileImage%>' class='file-preview-image' alt='Nuværende' title='Nuværende' style='width: 75%'>",
],
// initial preview configuration
initialPreviewConfig: [
    {
        caption: 'Nuværende (<%=Request.QueryString("initials")%>.jpg)', 
        width: '120px', 
        frameAttr: {
            title: 'Nuværende',
        },
    }
],
})

and have failed to incorporate the below to the above script, that I thought would get me the needed string:

var base64URL = fileinput.toDataURL('image/png').replace('image/png', 'image/octet-stream');
document.getElementById('input-fas').value = base64URL;
console.log(base64URL);

Can someone guide me in the right direction for the above 2 issue I have for making this work?

Stig Kølbæk
  • 432
  • 2
  • 18

0 Answers0