6 Replies Latest reply on Jul 6, 2016 10:53 AM by martinb77004568

    iOS image picker with localization

    martinb77004568 Level 1

      Hi,

       

      I am currently looking for an image picker plugin for iOS. I have tried GitHub - Telerik-Verified-Plugins/ImagePicker: Cordova Plugin For Multiple Image Selection  and GitHub - wymsee/cordova-imagePicker: Cordova Plugin For Multiple Image Selection

       

      My problem is: Even if the first plugin seems to include multiple localized files (e.g. src/ios/GMImagePicker/de.lproj/GMImagePicker.strings), my application shows the controls in English only. I am compiling using PGB with cli-6.0.0. Is there any reason why the .strings files don't get added correctly? Do you know and similar plugin that is available in multiple languages and works on PGB?

       

      And yes: All native controls (such as the native file input) are translated correctly.

        • 1. Re: iOS image picker with localization
          kerrishotts Adobe Community Professional

          Are you using any other plugins? If so, what versions? Do those plugins which have user interfaces present properly localized UIs? If you don't have another plugin that uses a localized UI, you might want to add the media capture plugin which has localization and see if it displays properly or not.

          • 2. Re: iOS image picker with localization
            martinb77004568 Level 1

            Thanks for your reply.

            I have created a simple test app with the ImagePicker and media-capture plugin (see below). I am firing the functions through weinre.

             

            config.xml:

            <?xml version="1.0" encoding="UTF-8" ?>
            
            <widget xmlns   = "http://www.w3.org/ns/widgets"
                    xmlns:android = "http://schemas.android.com/apk/res/android"
                    xmlns:gap   = "http://phonegap.com/ns/1.0"
                    id          = "com.example.example"
                    version        = "1.0.0"
                    versionCode = "1">        
                
                <name>Test-App</name>
               
                <description>Description...</description>    
                <access origin="*" />
                
                
                
                <platform name="ios" />
                
                <preference name="BackgroundColor" value="0xffffffff" />
                <preference name='phonegap-version' value='cli-6.0.0' />
                
                
                <content src="index.html" />
                
                <preference name="DisallowOverscroll" value="true" />    
                
                    
                <!-- iOS -->   
                <gap:config-file platform="ios" parent="CFBundleDevelopmentRegion" mode="replace">
                    <array>
                        <string>en-US</string>
                    </array>
                </gap:config-file>
                <gap:config-file platform="ios" parent="CFBundleLocalizations" mode="replace">
                    <array>            
                        <string>en</string>
                        <string>de</string>        
                    </array>
                </gap:config-file>
                
                <plugin name="ImagePicker" spec="https://github.com/Telerik-Verified-Plugins/ImagePicker" source="git" />
                <plugin name="cordova-plugin-media-capture" source="npm" />    
                
            </widget>
            

             

            index.html:

            <!DOCTYPE html>
            <html>
                <head>
                </head>
            
                <body>
                    <h3>HTML file input</h3>
                    <input type="file" />
                    <script type="text/javascript" src="cordova.js"></script>
            
                </body>
            </html>
            
            

             

             

            The result (I hope I am looking for the right things)

             

            Standard file input:

            file-input.png

             

            media-capture (navigator.device.capture.captureAudio())

            media-capture.png

            If the plugin wasn't localized correctly, the "Fertig" button should show "Done" instead, am I right?

             

            And finally, the ImagePicker:

             

            image-picker.png

             

            What could be the reason for that?

            What I did not really understand: I unpacked the .ipa file (like a .zip file). There is a folder Payload/TestApp.app/CDVCapture.bundle/  which includes folders like de.lproj and en.lproj. These folders get added by the media capture plugin. So there should be a similar folder for the image picker. But: There is only one single file: Payload/TestApp.app/GMImagePicker.strings

            I can find the German files for the GMImagePicker right inside Payload/TestApp.app/www/res/strings-de/GMImagePicker.strings. This doesn't look right to me :-)

             

            What can I do to make it work like expected?

             

            (And sorry if the code isn't formatted correctly - the editor doesn't like me )

            • 3. Re: iOS image picker with localization
              kerrishotts Adobe Community Professional

              I agree; that doesn't look right, and so I'm going to guess that this is a bug in the plugin. Clearly localization is working in the media capture plugin, so it can't be an issue that the app is incorrectly detecting the device's locale.

               

              Note that there is a notable difference in the image picker's plugin.xml file. See https://github.com/Telerik-Verified-Plugins/ImagePicker/blob/master/plugin.xml#L70 -- the file you mention as making it to your IPA file in the correct location is using the "resource-file" tag, whereas the others are using the "asset" tag. I suspect that is the issue. You could test this out by forking the repo, adjusting plugin.xml, commit those changes, and then point to the repo in your config.xml file (instead of using the official plugin). If that's the issue, I'm sure the plugin devs would love to have a pull request to fix it.

              • 4. Re: iOS image picker with localization
                martinb77004568 Level 1

                Hm I actually tried a few things (as you said - I forked the repo and changed the plugin.xml) but the attempts I made didn't really help. Do you probably know the correct folder structure we need here? If I find something that isn't too ugly, I will create a PR of course :-)

                 

                Is there another plugin I can use providing similar functionality?

                • 5. Re: iOS image picker with localization
                  kerrishotts Adobe Community Professional

                  Can you share the URL to the fork you made?

                   

                  I don't know any other plugin offhand, no. All I can suggest there is to search the Cordova plugin repository (http://cordova.apache.org/plugins)

                  • 6. Re: iOS image picker with localization
                    martinb77004568 Level 1

                    I had to delete my original fork because people suddenly started using this plugin for some reason (forking it again). The tests I made didn't even compile so I didn't want anybody to use this.

                    But I have created a new one. And I just managed to fix it :-) Or - at least I think so.

                     

                    GitHub - MBuchalik/ImagePicker: Cordova Plugin For Multiple Image Selection

                     

                    The only thing that doesn' get translated is the title (hardcoded in imagepicker.js). But this can be set using JS so that's ok.