If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

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
Regular Contributor
hoangan_it
Posts: 63
Registered: ‎06-08-2012
My Device: BlackBerry
My Carrier: BlackBerry
Accepted Solution

How to get path (use <input type='file' />)

Hi everyone,

 

I 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.

 

And my code:

 

function handleFileSelectForMyShop(evt)
{
var blnFileReaderSupported = false;

try
{

debug.log("handleFileSelect", "start handleFileSelect");
var reader = new FileReader();
blnFileReaderSupported = true;
var files = evt.target.files;
var size = files.length;

debug.log("handleFileSelect", "in handleFileSelect # files selected : " + size, debug.info);

for (var i = 0; i < size; i++)
{
debug.log("handleFileSelect", "in handleFileSelect parsing file index " + i, debug.info);
var f = files[i];
reader.onload = (function(theFile)
{
debug.log("handleFileSelect", "start reader.onload", debug.info);
return function(e)
{
debug.log("handleFileSelect", "start function(e)", debug.info);

debug.log("handleFileSelect", "reading file " + theFile.name + " (" + theFile.size + ") " + theFile.type, debug.info);

if (theFile.type.match('image.*')) {
var path = e.target.result;
alert(path );
// create path

} else {
jAlert('Please select picture!', 'Error');
}
};
})(f);

if ((f.type.match('image.*')) || (f.type.match('audio.*')) || (f.type.match('video.*')))
{
debug.log("handleFileSelect", "in handleFileSelect calling reader.readAsDataURL for type " + f.type, debug.info);
// Read in the media file as a data URL.
reader.readAsDataURL(f);
}
}

debug.log("handleFileSelect", "Complete", debug.info);
}
catch (e) {
debug.log("handleFileSelect", e, debug.exception);
if (!blnFileReaderSupported)
{
alert('Error. The FileReader API is not supported.');
}
}
}

function doPageLoad()
{
try
{
var ele = document.getElementById('txtFile_staffInfo');
if (ele)
{
ele.addEventListener("change", handleFileSelectForMyShop, false);
}
imgSelectPictureClick = 0;
}
catch (e) {
debug.log("doPageLoad", e, debug.exception);
}
}


window.addEventListener("load", doPageLoad, false);

 

 

 

Note: And result of alert(path) is a Base64 string ! It is not a path of image which I browse a imgae file on the OS.

I want to have a full file path. For example: file:///accounts/1000/appdata/WebWorksAppTemplate.testa3NBcHBUZW1wbGF0ZSAgICA/shared/camera/image01.jpg

 

 

I hope see your response soon!

 

Thanks and Regards,

An Pham


Please use plain text.
Developer
kamal_nigam
Posts: 434
Registered: ‎07-23-2012
My Device: Blackberry 10
My Carrier: Orange

Re: How to get path (use <input type='file' />)

What code you are using to browse file 

Thanks
-------------------------------------------------------------------------------------
Press the Accept as solution Button when u got the Solution
Press Kudo to say thank to developer.
-------------------------------------------------------------------------------------.
Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to get path (use <input type='file' />)

[ Edited ]

hoangan_it wrote:

Hi everyone,

 

I 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.

 

And my code:

 

...

 

if (theFile.type.match('image.*')) {
var path = e.target.result;
alert(path );
// create path

 

...

 

Note: And result of alert(path) is a Base64 string ! It is not a path of image which I browse a imgae file on the OS.

I want to have a full file path. For example: file:///accounts/1000/appdata/WebWorksAppTemplate.testa3NBcHBUZW1wbGF0ZSAgICA/shared/camera/image01.jpg


From the File API documetation I would assume you will have the files full path in

 

theFile.fullPath

 

so try this instead of your red mark source:

 

var path = theFile.fullPath;
alert(path );

 

@kamal_nigam: the file browse dialog is a "system dialog message" automaticaly opened up if you use an:


<input type="file" />

 

Regards.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.
Regular Contributor
hoangan_it
Posts: 63
Registered: ‎06-08-2012
My Device: BlackBerry
My Carrier: BlackBerry

Re: How to get path (use <input type='file' />)

Hi kamal_nigam,

 

To get Image on local PlayBook.

Please use plain text.
Regular Contributor
hoangan_it
Posts: 63
Registered: ‎06-08-2012
My Device: BlackBerry
My Carrier: BlackBerry

Re: How to get path (use <input type='file' />)

Hi LBP,

 

I try to do that and I see the message: undefined

Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to get path (use <input type='file' />)

[ Edited ]

hoangan_it wrote:

Hi LBP,

 

I try to do that and I see the message: undefined


Hi. I tried to set up an example and you are really right, the file object in evt.target.files[0] you are getting back is an object like that:

 

{fileName: "image001.gif", fileSize: 6926, lastModifiedDate: Sun Jul 15 2012 18:54:31 GMT+0200 (CEST), name: "image001.gif", size: 6926, type: "image/gif", ...}

From what I also can see, there isn't given back any information about the selected path here what is really disappointing me so much. I also can see that in the evt.target there is an attribute


value: "C:\fakepath\image001.gif"

and this brings me to the the thought that there is something buggy, isn't it. Since when selecting a file from filesystem using the <input> tag there should be a HTML5 FileEntry object containing all neccessary informations or a value with the path+filename given back in any way to work with those use cases.

 

For now I would use the informations provide by the evt.target.files[0] and this is:

1.) images are in shared/camera or ...

2.) videos are in shared/videos or ...

3.) music is in shared/music or ...

4.) documents are in shared/documents or shared/downloads or shared/print or ...?!?!

So you could go on with your coding from there, but also as we see in 4. all other points may be positioned somewhere else as well, so we can see there isn't quite a good solution at this time and we need to throw a bug report.

 

I haven't tried the 2.1 sim for now, but hopefully it is working better there?!

Think we need somebody from RIM to have a closer look to it or pointing to the right way here!!

 

BTW: On BB10 Dev Alpha with OS version 10.0.6.386 it is working quite the same way for me!



"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to get path (use <input type='file' />)

I filed an issue report on this to the BB10 Framework repo, hopefully the right place for it, to point things out. Maybe someone wants to add more issues on this here: https://github.com/blackberry/BB10-WebWorks-Framework/issues/150


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.
BlackBerry Development Advisor
chadtatro
Posts: 614
Registered: ‎10-01-2009
My Device: Z10
My Carrier: Bell

Re: How to get path (use <input type='file' />)

[ Edited ]

An Pham,


I believe that you cannot get the absolute path of a file due to browser security, when using the <input type="file"...

 

This is something that you'd likely need a PlayBook extension for.

 

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to get path (use <input type='file' />)


chadtatro wrote:

...


I believe that you cannot get the absolute path of a file due to browser security, when using the <input type="file"...


Why shouldn't it be possible due to security. I'm able to read the file system on the same folder using HTML5 fileSystem and reading the same file by input tag ins't possible. What about an app to select a file to play when the a timer ended, you can not store the timer to eg. localstorage due to the drawback that you are not able to get the filepath of a selected file, also not if you have the permission to access shared_folder?


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to get path (use <input type='file' />)


chadtatro wrote:

...


I believe that you cannot get the absolute path of a file due to browser security, when using the <input type="file"...


BTW: it doesn't make any sence to me to not include the path of a file or be able to get it since you get complete File objects. Think of a use case I want to select a file and upload it to a remote host, how would it be possible to do a filetransfer using the BB10 FileTransfer API or even on PB by using the implementation of the WebWorks Community APIs  where I need to define the localPath as an attribute for it to work?


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.