Browse or Click Image and Upload it to Server using Inappbrowser

  • 1
  • Question
  • Updated 5 years ago
  • Doesn't Need an Answer
I am using Cordova IAB (https://github.com/apache/cordova-plu...) to load external website from outside application. In this IAB on one page I have option for user to either click an image from device camera or can open gallery and select image from it. So can anyone assist me how can I do such operation in both Android and iOS.
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like

Posted 5 years ago

  • 1
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Himanshu,
Please read the docs for InAppBrowser you will see

NOTE: The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs.

This means neither the camera nor the gallery are available for this.

Jesse
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
Is there any other alternate available to get this feature. Like something using jquery or any other plugin so that I can resolve this issue. And i guess it's old docs as the latest docs https://github.com/apache/cordova-plu... cordova.InAppBrowser.open to open any external URL. whereas in your link it's still using window.open
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes, Camera and File System are available from the inAppBrowser (or from any mobile browser, for that matter).
As Jesse said, the Cordova APIs are not available. But who needs them, when you can make use of the HTML5 APIs?

Your best bet would be the HTML5 Camera API
https://developer.mozilla.org/en-US/d...
http://www.syntaxxx.com/accessing-use...

Perhaps you need the HTML5 File API, depending on your needs:
http://www.w3.org/TR/2014/NOTE-file-s...
https://www.safaribooksonline.com/lib...

As you see above, your requirements can be met using plain HTML5 (isn't it amazing what modern browser can do these days?). This means, that your question has actually nothing to do with Phonegap/PGB - so I'm afraid you were a bit off-topic here.
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
I have tried various demos that support File API of HTML5 in IAB by simply opening their URL in cordova.InAppBrowser.open() method but none of example worked inside this. Whereas If I try those example in native browsers like safari or chrome then in those browsers it's working perfectly. So why it's not working with IAB. Please let me know how can I enable that inside IAB.
Following demo I have tried which works fine on native browsers; but not working inside IAB:

http://html5demos.com/file-api-simple
https://scotch.io/tutorials/use-the-h...

Also after browsing I want to send selected file to upload on server so how can I do that too in IAB?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. How is it "not working"? Do you get any javascript error messages?
2. Upload to server using an XHR Post request. Be aware that there might be size limitations.
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
1. When I tap on "Browse" button then nothing happens in IAB; while in native browsers they are showing me options to browse file. In IAB I am not able to debug as I am testing after building APK/IPA from https://build.phonegap.com/apps
2. Yes, file size limitation won't be any issue.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Have you read the Docs (Debugging section)?
http://docs.build.phonegap.com/en_US/...
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
I don't see any error on console after I enable debugging in http://debug2.build.phonegap.com/client/
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
 Resource interpreted as Script but transferred with MIME type text/html: "http://fallbacks.carbonads.com/home/e99a260b94849497ea962f674f0aebd9/?144178962". azcarbon_2_1_0_VERT:13

_carbonads_go azcarbon_2_1_0_VERT:13
(anonymous function) C6AILKT.json?segment=placement:html5demoscom&callback=_carbonads_go:1


This is console log when I trying http://html5demos.com/file-api-simple demo in IAB.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, what can I say?
You need to find out on which line of code your javascript stops working as expected, then detect what is causing this.

As said, this has nothing to do with Phonegap Build, so you might find assistance in a javascript forum or perhaps in the Phonegap Google Group.
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
It might be some IAB or phonegap issues because these demo are working perfectly in device native browsers whereas not working in my IAB. But I am not able to find any error in console if I debug them.
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
Is there any plugin available so that I can resolve my issue; or is there any specific configuration required to make in config.xml to make it support HTML5 file API?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Himanshu,
you have been working on getting your website to act as an app, by showing it in an inAppBrowser window (as the only app functionality) for more than a month, now. You have run into difficulties with the back() functionality, the opening of external websites in the system browser, and now with image retrieval and upload. Probably more issues are about to come next.

Wouldn't this be a great moment to make a decent decision?
Either (a) let your website be a (mobile) website in a browser or (b) create an app with the desired functionality.
What you are attempting to do now is neither (a) nor (b)....and you are experiencing time after time what that is leading to.
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
Thank you for suggestion, I have tried a very simple app that nothing to do with IAB or anything else. It's just a fresh new demo sample project in which I have only added HTML5 file API.

<input type="file" name="attachment" id="attachment"/>

In this above code nothing happened if I click on "Choose file" button.

Also; I have tried this code in empty html page with above code in IAB of npm but in that also it didn't work.

So now can you tell me what can be the issue ?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Sure.
Now, you're not in the inAppBrowser, but rather in the Android webview within a Phonegap app. Restrictions apply. Find many discussions through Google for "Phonegap input file"
In this case, you would use the file plugin or the fileopener2 plugin. In case you want to invoke the functions with jQuery, here are some articles:
http://ramkulkarni.com/blog/file-choo...
http://www.digitalnoiz.com/mobile-dev...
Photo of Himanshu NakLabs

Himanshu NakLabs

  • 74 Posts
  • 1 Reply Like
I have tried <input type="file" name="attachment" id="attachment"/> It was working perfectly in default browsers; as soon I open those page in IAB of cordova it's stops working and nothing happens nor any error. Its happening in both Android as well as in iOS.
Photo of dehinde molade

dehinde molade

  • 3 Posts
  • 0 Reply Likes
same problem here.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What 'same problem'?
In the above thread, several architectures and variations have been discussed. Also, meanwhile, PGB and plugin versions have changed.
How can you be sure to have a 'same problem'?
Photo of dehinde molade

dehinde molade

  • 3 Posts
  • 0 Reply Likes
when i'm debugging in my app using IAB cordova,and i want to access the ios photo library, it refreshes me back to the phonegap access screen
Photo of dehinde molade

dehinde molade

  • 3 Posts
  • 0 Reply Likes
would the html5 api's work?