resize image before upload to db

[Sean Kelley]

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

[Maryna Brodina]

Hello! Please tell us your app name.

[Sean Kelley]

Name:
tack-web-file-api

I emailed the link 7 days ago

[Maryna Brodina]

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

[Maryna Brodina]

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

[Sean Kelley]

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

[Maryna Brodina]

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

[Maryna Brodina]

Hello! Working on problem with rotating images on iPhone.

[Maryna Brodina]

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

[Sean Kelley]

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?