Forum | Appery.io

Hi
Just wondering if you have made any progress on this issue.

Hello! Please tell us your app name.

Name:
tack-web-file-api

I emailed the link 7 days ago

Sorry, no progress for now. We'll continue testing and I update this post as soon as possible.

Hi, could you clarify do you have problem with images from device memory or images captured with Camera?

iphone ios6 file browsing=ok

iphone ios6 camera capture=rotate 90 degrees counter clockwise when saved but previews ok with no rotation

android 4.1.2 phone with android browser: when selecting existing image= no preview happens

android 4.1.2 phone with android browser:using camera=preview happens but no upload

android 4.1.2 with chrome browser: camera capture ok

android 4.1.2 with chrome browser: file browsing ok

Hello! Still testing and have some problems with resolving this...

Hello! Working on problem with rotating images on iPhone.

Hello! Thank you for link you sent us! It helped a lot! To fix problem with uploading big files and image rotation on iOS devices you would need to use canvasresize plugin (https://gokercebeci.com/dev/download/...)
1) create JS assets with files jquery.canvasResize.js and jquery.exif.js
2) replace upload function with the following:
codefunction upload() {
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString&#46;length; i++) {
ia = byteString&#46;charCodeAt(i);
}
return new Blob([ab], {type: 'image&#47;jpeg'});
}
var serverUrl = 'https:&#47;&#47;api&#46;appery&#46;io&#47;rest&#47;1&#47;db&#47;files&#47;' + file&#46;name;
$&#46;canvasResize(file, {
width: 300,
height: 0,
crop: false,
quality: 80,
&#47;&#47;rotate: 90,
callback: function(data, width, height) {
$('<img>')&#46;attr('src', data);
var f = dataURItoBlob(data);
$&#46;ajax({
type: "POST",
beforeSend: function(request) {
request&#46;setRequestHeader("X-Appery-Database-Id", FileDB_settings['database_id']);
request&#46;setRequestHeader("X-Appery-Session-Token", localStorage&#46;getItem('token'));
request&#46;setRequestHeader("Content-Type", 'image&#47;jpeg');
},
url: serverUrl,
data: f,
processData: false,
contentType: false,
success: function(data) {
alert("success");
},
error: function(data) {
alert("error");
}
});
}
});
}/code

thanks for your help- after some initial testing this seems to work for iphone camera capture. I have not tested with android to make sure it still works. However, it works differently. The image that gets displayed in preview is the full size image, not the edited image. The resizing gets done on file upload in $.canvasResize(file, {...

How would one edit preview to show the modified file instead of the original?