4

Im sorry if my question is a bit confusing but I think can clarify this by my detailed explanation.

Im very new to saving/uploading files. I have recently been able to upload image and save it to database as base64 (datatype = mediumblob) and display it again in the browser by setting <img src='base64_data_from_db' />.

Now for my actual problem.

I have to upload file of any type to the database. After saving it, the user must be able to download the file using the browser by clicking a link/button (I used link). Im able to save the file using base64.

The problem I have right now is that how can I convert the base64 string to the actual/original file (like MS Word, text file, image.. etc) and download it to the user.

I removed the prefix of the base64 string and used window.atob(str) to convert it. I can see somehow the contents of the file when I console.log(window.atob(str)) but I don't know how to download it.

NOTE: I used base64 when saving because I save it using JSON. Im using Java Spring Hibernate. I tried to google but most of the time I see how to convert Base64 to image... As I have said earlier I have already displayed the image in <img src=''/>. Im also reading about javascript FileReader but it requires a Blob as parameter and what I have is a base64 string.

I have a very incomplete code below because I don't know what to do next...

// strBase64 -- The base64 string equivalent of the file 
function convBase64ToFile(strBase64) {
    var tmp = strBase64.split(","); // To remove the prefix
    var converted = window.atob(tmp[1]); //
    console.log(converted); // Displays the content of the actual file
}

Please help....

TheOnlyIdiot
  • 1,182
  • 7
  • 17
  • 37
  • There are two separate issues here: one is base64 conversion; the other is saving a file on the client. I suggest you tackle the two problems separately. – Jon Skeet Feb 03 '15 at 07:17
  • Also, you should **really** re-think your approach here. Databases aren't optimised for storing files. That's what filesystems are for. You should really be trying to figure out how to store files as files, instead of how to convert base64 to downloadable files. – Christian Feb 03 '15 at 07:19
  • 1
    @ChristianVarga I have to save it to database because its the requirement. – TheOnlyIdiot Feb 03 '15 at 07:27
  • @TheOnlyIdiot who specified the requirement? Cleary it wasn't someone who knows what they are doing. People who don't understand the difference between databases and filesystems should not make such decisions, it's your job as a developer to implement the **best** solution (and voice your concerns where relevant) rather than simply doing everything people tell you to do (especially if those people don't know what they're talking about). – Christian Feb 04 '15 at 00:12

1 Answers1

3

I have solved this issue... I converted base64 string to Blob then get the url using URL.createObjectURL() then open a new window the set the blob's url as the window's url.

function convBase64ToFile(strBase64) {
    var tmp = strBase64.split(",");
    var prefix = tmp[0];
    var contentType = prefix.split(/[:;]+/)[1];
    var byteCharacters = atob(tmp[1]);

    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
         byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    var blob = new Blob([byteArray], {type: contentType});
    var blobUrl = URL.createObjectURL(blob);
    window.open(blobUrl, "popup","width=1000,height=500,scrollbars=1,resizable=no," +
    "toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
}
TheOnlyIdiot
  • 1,182
  • 7
  • 17
  • 37