Read my older post first and read my posted answer first to understand my current situation better Link.
Dose any body know of any JavaScript methods to escape sensitive characters of a encoded base 64 string in a JSON object to be read correctly in the server side?
Recently I could not get my encoded base 64 string from a JSON object to be read correctly in the server side. So I used a JavaScript method call encodeURIComponent() and that is used to escape special characters of a URL
string. So I used it on my encoded base 64 string from my JSON object from the client side and it worked surprisingly but this resolved method has limits since encodeURIComponent() is used for URL strings it can not work on really really long encoded base 64 strings. I tested this on a encoded base 64 string of a large video and it gave me this error
Uncaught RangeError: Invalid string length
I know that method is used for URLs but it made it work and I realized I have to find another way to escape my encoded base 64 string from my JSON object from the client side to be able to work correctly in the server side so do any of you guys know any other JavaScript methods that can escape the encoded base 64 string from the client side to be read properly in the server side?
This is my code
index.php
<style>
#photo-input{
display: block;
margin-bottom: 50px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#submit').addEventListener('click',function(){
var photo_input= document.querySelector('#photo-input').files[0];
//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);
reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//
});
function sendUploadInfo(photo_input_result){
//Remove the data:image/file_extension;base64, prefix by not removing this you wont be able to view this as a file in any computing application
var remove_the_photo_file_reader_prefix= photo_input_result.split(',')[1];
//
//Escape incompatible characters that won't work properly in JSON and PHP
var escape_incompatible_characters_from_the_photo= encodeURIComponent(remove_the_photo_file_reader_prefix);
//
var photo= escape_incompatible_characters_from_the_photo;
//<JSON data>
var upload_info = {
first_name: "John",
last_name: "Smith",
photo: photo
};
//</JSON data>
var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info);
//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState == 4){
document.querySelector('#output').innerHTML= xhr.responseText;
}
}
xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}
});
</script>
<input type='file' id='photo-input'>
<button id='submit'>Send JSON data</button>
<div id='output'></div>
x.php
<?php
$upload_info_json_object = json_decode($_POST['upload_info_json_object']);
$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;
//Photo upload section
$photo= $upload_info_json_object->photo;
//Decode into a file
$photo= base64_decode($photo);
file_put_contents('geeksforgeeks-22.jpg',$photo);
//
?>
<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>
One more thing
Please don't comment criticizing statements about how bad it is to send a large file that is encoded in a base 64 string to the server because if you do I will just ignore your comments and I am aware of other easier methods like the HTML
form tag method and JavaScript's FormData() method so please don't suggest those methods or other methods that is not base 64 related because for personal reasons I want know how I can do this in base 64 regardless how inferior this method is when compared to other methods I'm just saying.
