Work UI with images (Update from gallery, save as local variable and resize)

[Kateryna Grynko]

Hi Jordi,

To place button in bottom right corner add the following custom CSS code:pre[name=mobilebutton]{
bottom: 41px;
top: auto;
left: auto;
position: absolute;
right: 0;
}/preWhere 'mobilebutton' is a button name.

[Maryna Brodina]

Could you clarify what button doesn't work on Google Nexus 10, but works on Samsung galaxy? I tested your app on Samsung Galaxy Tab 2 (Android 4.1.1) and Samsung Galaxy S (Androin 4.0.4). Only Take Photo button work on both devices.

[Jordi Niubo]

Hi Katya,

thanks for this css, it work nice!

Hi Maryna,

When I test the app:
http://appery.io/app/mobile-frame?src...
In Chrome web browser:
The button "Take Photo" don't work, but this is normal, no have device for take photo.
The button "Update Photo" work like the tutorial, this open a new window and i can select any file in my computer. Then i see this file (photo of the file, if is not a image no see nothing) in the image input.

In Firefox web browser work like Chrome.

In Phone S3 version 4.1.2 :
The button "Take Photo" open camera, take photo and i then i can see it in the image input.
The button "Update Photo" open a new window and i can select photos from gallery or from app with the same function of a gallery. Then i see the photo in the input image.

In Google nexus 10 version 4.4:
The button "Take Photo" works normal. Take Photo and i see in the input image.
The button "Update Photo" don't do nothing. This is the error.

It's possible that the problem is about the version 4.4??

Thanks for your time.

[Maryna Brodina]

Thank you for detailed description! Working on it. I'll update when have more information.

[Maryna Brodina]

Hello! Sorry, still no news...

[Jordi Niubo]

Hi Maryna,

Thank you for the update!

[Maryna Brodina]

Hello! Looks like the problem is that your html component html_4 is invisible. Make it visible and change it's size to 100x10px. For example for form delete prestyle="visibility:hidden"/pre and add prestyle="height: 1px; width:1px; overflow:hidden;"/preUnfortunately we don't have device with Android 4.4 to test. Perhaps there is a problem with 4.4 version, but please try changes we're suggesting and see if it works. Your code won't work on Android 4.0.x. If you're going to support this version change previewFile function prefunction previewFile() {
// display image in preview container
//if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
var image = $('[name=image]');
var src = e.target.result;
if (/data:base64,/.test(src)) {
src = src.replace("data:base64," , "data:;base64,")
}
image.attr('src', src);
$('[class=mobileimage1_div]').show();
}
reader.readAsDataURL(file);
//}
}/pre

[Jordi Niubo]

Hi Maryna!

I change the code of function previewFile():

I tested the new changes in Firefox Browser and Chrome and work.

I installed the app in Google Nexus 10 version 4.4 but still doesn't work.

Posible the problem is with version 4.4 or the Tablet. I don't have other device to test the app.

[Kateryna Grynko]

Hi Jordi,

Please share the app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a, we'll test it deeper.

[Jordi Niubo]

Hi Katya

I shared the App, "TestApp"

Now there are 2 buttons for update. One form like tutorial and other form like Maryna code.

I tryed to install but now give error to export .apk

In web browser the 2 options work. They update photo and can see the image.

For test in web browser: http://appery.io/app/mobile-frame?src...

Thanks for your time