Web and WebWorks Development

[hoangan_it]

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

[kamal_nigam]

What code you are using to browse file 

[LBP]

---

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.

[hoangan_it]

Hi kamal_nigam,

To get Image on local PlayBook.

[hoangan_it]

Hi LBP,

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

[LBP]

---

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!

[LBP]

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

[chadtatro · Accepted solution]

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.

[LBP]

---

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?

[LBP]

---

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?