Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 4
Registered: ‎08-06-2011
My Device: Curve 8520
My Carrier: Vodacom
Accepted Solution

File Browser / Explorer in WebWorks

Greetings!

 

I've come across a very difficult hurdle to pass.

 

What I'm trying to do is to enable the end-user on my WebWorks application to select a photo on their BlackBerry device (whether it's on the local device or storage device) and then set the background image of a DIV element in the HTML document to the selected photo.

 

I'm not sure if I'm elaborating too well, but basically, much like how BBM works. You've got a little square/box which you can click on, select a photo on your device, and the box's background or image is changed to that of the photo you selected.

 

Now I've read through and studied the example of blackberry.io.file, and it would make sense to me to use blackberry.file.io.open - but for the life of me, I can't seem to figure it out.

 

My JavaScript code is as followed:

 



 

To my understanding, what might/could happen here is that if no parameter is set in blackberry.io.file(param), then a file explorer/browser opens in order for you to select a file. Once selected, setPhoto(filePath) executes, which alerts the path of the photo that was selected?

 

Is there any specific blackberry.io object I should use in order to achieve this, or is blackberry.io.file in fact the correct object to use for this scenario but my approach and understanding of it is wrong?

 

Thank you for taking the time to contemplate on this with me, lol :Helpsmilie:

 

 

“Shoot for the moon. Even if you miss, you'll land among the stars.” - Brian Littrell
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: File Browser / Explorer in WebWorks

blackberry.file.open() is intended to open up a specified file in its default application based on its mime type.  Basically the equivalent to double clicking on a file on your windows desktop.

 

If you are looking to set the background of a div, you will first want to find the file and then simply change the background-image property of your div to the file:// path used to that local file.

 

You will need to make sure you whitelist the proper file:// root path to ensure that the WebWorks frameworks will allow loading content from that protocol/domain

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 4
Registered: ‎08-06-2011
My Device: Curve 8520
My Carrier: Vodacom

Re: File Browser / Explorer in WebWorks

Thanks for your response Tim, it's much appreciated.

 

What you say makes good sense to me, in that the DIV element's "backgroundImage" value should be changed to the location path of the intended background image to use.

 

Though, what I was hoping for, is if there was possibly a way of executing a command  - for instance "blackberry.io.file.select()" for argument's sake, and what would happen is a dialog box displaying your files and folders on the BlackBerry device will open - allowing you to select a file.

 

Once selected, the dialog box closes and passes the value of the selected file's path - to do with whatever you please.

 

Something like the screenshot below:

 



 

 

When a file in the screenshot above is selected, the dialog box closes and passes the selected file's path value on an "onclose" or "onselected" event (or something similar), so that I can set the DIV's backgroundImage value to the file's path value.

 

Is there any way this can be achieved Tim?

“Shoot for the moon. Even if you miss, you'll land among the stars.” - Brian Littrell
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: File Browser / Explorer in WebWorks

You should be able to create an HTML form that has an input of type="file".  This will provide a browse dialog for your user to browse to a file on the OS.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 4
Registered: ‎08-06-2011
My Device: Curve 8520
My Carrier: Vodacom

Re: File Browser / Explorer in WebWorks

Tim, to be honest - I never even thought of that until you mentioned it :Dots:

 

I was too fixated on the idea of using the WebWorks API to achieve this, that I didn't even realize good ol' HTML will do the same trick, lol.

 

Thanks for your help and input buddy.

 

Much appreciated! :Yes:

“Shoot for the moon. Even if you miss, you'll land among the stars.” - Brian Littrell
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: File Browser / Explorer in WebWorks

This community API might be able to help you out as well.  There are some security constraints around accessing the contents of a file input.

 

https://github.com/blackberry/WebWorks-Community-APIs/tree/master/Smartphone/FilePicker

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 4
Registered: ‎08-06-2011
My Device: Curve 8520
My Carrier: Vodacom

Re: File Browser / Explorer in WebWorks

Tim,

 

This is absolutely fantastic! EXACTLY what I was looking for!

 

Thank you! :Clap:

“Shoot for the moon. Even if you miss, you'll land among the stars.” - Brian Littrell
Contributor
Posts: 12
Registered: ‎07-05-2011
My Device: curve 8520
My Carrier: edge

Re: File Browser / Explorer in WebWorks

Hello guys,

 

I face the same problem and I fail to follow the steps here

https://github.com/blackberry/WebWorks-Community-APIs/tree/master/Smartphone/FilePicker

 

when I add this line in config.xml i got error:         _widgetExtensions.addElement(new blackberry.ui.file.FilePickerExtension());                                                           ^

<feature id="webworks.ui.filePicker" />

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: File Browser / Explorer in WebWorks

double check that you have followed the instructions to the last letter.. the directories that you place into the ext area of your SDK need to be named exactly like specified in the instructions.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
Posts: 12
Registered: ‎07-05-2011
My Device: curve 8520
My Carrier: edge

Re: File Browser / Explorer in WebWorks

Hello Tim,

Thanks for your fast reply.

That is what I did.

in my Eclipse diectory I go to this folder



C:\Eclipse\plugins\net.rim.browser.tools.wcpc_2.0.0.201103231828-18\wcpc\ext

 

I found there all BlackBerry APIs folders like blackberry.app, blackberry.audio, ...

 

I create new folder with name: webworks.ui.filePicker

 

then I paste the library.xml and src in the above folder

 

now I got this path:

C:\Eclipse\plugins\net.rim.browser.tools.wcpc_2.0.0.201103231828-18\wcpc\ext\webworks.ui.filePicker\blackberry\ui\file\

FilePickerExtension.java

and FilePickerNamespace.java

and FunctionOpenPicker.java

 

Is there any thing missing?

 

Thanks for ur help.