I am following along with this how-to which works fine.
http://docs.appery.io/tutorials/uploa...
I am wondering how to resize the images either before they get to database. I am new to html5 but it seems like use of canvas may be the answer. I came across this but I am not sure how to integrate this with how-to code:
https://hacks.mozilla.org/2011/01/how...
What would you need to do in the how-to to limit your file sizes?
Any tips would be appreciated 
Hello Sean,
This would need some time to find an answer for you.
We are working on it.
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
Very Cool! Works beautifully- thank you so much!
After closer review, I am having a problem with this example far as order of execution. For example, I set the returned image url to a local storage variable (image_url) in the upload function. It sets ok, but its updated value is not available when I think it should be.
Within upload:
success: function(data) {
// OPTIONAL, this is the file name under which the image was stored in database....
// localStorage.setItem('db_file_name', file.name);
localStorage.setItem('image_url', data.fileurl);
},
On uploadButton click I run upload() then invoke another service which saves related info including the image_url location. This mapping (createAd) seems to get the image_url value before upload() is run even though in the events area upload is run first.
Any idea on what is going on here?
The result is that when the upload is done, the image_url for the previous image gets saved with the current image.
Hi Sean,
You should call service createAd.execute( {} ); in your code. That is, there should be the following:
codesuccess: function(data) {
// OPTIONAL, this is the file name under which the image was stored in database....
// localStorage.setItem('db_file_name', file.name);
localStorage.setItem('image_url', data.fileurl);
createAd.execute( {} );
}, /code
You'll probably have to move here the definition of two variables that are put in your screenshot. The reason is asynchronous execution. Next click handler (setting variables values and then invoking a service) is executed immediately after requesting the first call, without waiting for an answer.
Thanks again- that works perfectly
After testing this code, I noticed that all three of the following devices have a different result. It does not seem to matter if browsing or using camera to capture.
Nexus 7 android tablet- using camera and browse works without issues using Chrome browser. Image is saved ok and displays ok.
iPhone 4 with iOS 6- using camera or browsing previews fine. Upload service completes successfully. Trying to view image is broken. An image download direct form Appery database says "Invalid image"
Android phone (android 4.1.2 with Chrome 18.0.x) -Upload button does nothing and no photo gets to database.
Do you have any ideas on what can be changed to work in all three cases? Also, desktop chrome browser browses and save/displays image fine.
I am going to share my app link via email with login to test.
Hello Sean! Received your email. We'll test it and update asap.
Hi Sean,
We are working on it. You can test it yourself: https://developers.google.com/chrome-...