Hello!
1) In Panel on Upload page add add line with < canvas tag so that entire code in Panel woul be:
code<form enctype="multipart/form-data" method="post" name="fileinfo" style="visibility:hidden">
<fieldset>
<input type ="file" name ="fileselect" id="fileselect"></input>
</fieldset>
</form>
<script type="text/javascript">
// set event listener for call preview after select file
var fileselect = $('#fileselect');
fileselect.bind("change", fileSelectHandler);
</script>
<canvas id="canvas" style="display:none;"></canvas>/code
2) change upload function to look it like this:
codefunction upload() {
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
Code: Select all
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function( e) {
img.src = e.target.result
var canvas = document.getElementById('canvas');
var serverUrl = 'https://api.appery.io/rest/1/db/files/' + file.name;
var MAX_WIDTH = 100;
var MAX_HEIGHT = 100;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Appery-Database-Id", FileDB_settings['database_id']),
request.setRequestHeader("X-Appery-Session-Token", localStorage.getItem('token')),
request.setRequestHeader("Content-Type", 'image/jpeg');
},
url: serverUrl,
data: blob,
processData: false,
contentType: false,
success: function(data) {
// OPTIONAL, this is the file name under which the image was stored in database....
// localStorage.setItem('db_file_name', file.name);
},
error: function(data) {
// do something in case of an error...
}
});
}
reader.readAsDataURL(file);
}/code
