how to show "browse for folder" dialog in html/javascript?

[strutsng]

<input type="file"> only allows the user to browse for files.

How about "browse for folder" dialog? Can html/javascript do that? I
couldn't find any syntax for that. If not, please advise what are the
other approaches.

please advise. thanks!!

 

[David Dorward]

<input type="file"> only allows the user to browse for files.

How about "browse for folder" dialog? Can html/javascript do that?

No.

 

[strutsng]

Yes, if I use <input type="file">, I couldn't select a folder as input,
I can only select a single file as input. So there is no solution to
select a folder as input?

please advise more... thanks!!

 

[Jukka K. Korpela]

Yes, if I use <input type="file">, I couldn't select a folder as input,

You could, in a system that treats a folder as a file. So what?

I can only select a single file as input.

That's a common flaw in browsers (Opera being the most notable exception),
but that's completely different.

So there is no solution to
select a folder as input?

In a system that treats a folder as a file, there is.

please advise more... thanks!!

Analyze what your problem really is (what is it that you are actually
trying to accomplish), explain it in plain English, and select the most
appropriate group. (Crossposting is an almost sure sign of not having
analyzed your problem.)

 

[Jonathan N. Little]

To OP, that's because if I am not mistaken the purpose of the file field
it select a file for upload, not a folder of files.

You could, in a system that treats a folder as a file. So what?

And which system is that? In DOS, Windows and Linux the directory is
just a file on the filesystem with a special directory attribute, right?
Still cannot select the folders with the file input browse dialog...

That's a common flaw in browsers (Opera being the most notable exception),
but that's completely different.

Is this new for Opera? The 7.54 version that I have on W2K for testing
cannot select more than one file. Anyway isn't the browse box, at least
on Windows, the OS's common 'file open' dialog and not part of the
browser? (Just checked on Linux, it is not the same, but Windows it
certainly is!)

In a system that treats a folder as a file, there is.




Analyze what your problem really is (what is it that you are actually
trying to accomplish), explain it in plain English, and select the most
appropriate group. (Crossposting is an almost sure sign of not having
analyzed your problem.)

To OP, You could use the file input field to browse and select each
file, and then use JavaScript to append each section to a list or array.

 

[Joakim Braun]

To OP, You could use the file input field to browse and select each
file, and then use JavaScript to append each section to a list or array.

But there would then be no way of uploading the files, right?

 

[Jonathan N. Little]

But there would then be no way of uploading the files, right?

Well yes if the client has JavaScript disabled! ;-)

I would think you would need more JavaScript to enter list/array into a
form input that would be passed to some server-side script to do the
actual uploading...

 

[Randy Webb]

Jonathan N. Little said the following on 10/2/2005 8:27 AM:

Well yes if the client has JavaScript disabled! ;-)

It wouldn't work even with Javascript enabled.

I would think you would need more JavaScript to enter list/array into a
form input that would be passed to some server-side script to do the
actual uploading...

If what you are describing is possible in javascript, then anybody could
simply set the value of a hidden field to whatever file they wanted off
your PC and upload it automatically. That is not allowed (and what you
are describing) for that very reason. File inputs are very limited in
javascript context for a reason - security.

 

[Jonathan N. Little]

Randy Webb wrote:

It wouldn't work even with Javascript enabled.

Firstly, I am not saying the OP should do this, I think it is a bad
idea. However are you saying that you cannot build a file list of local
files using JavaScript and the file input? Because this simple codes
builds such a list....

<code>
<form>
<textarea name='abc' rows=30 cols=50></textarea>
<input type=file onchange="this.form.abc.value+=';' + this.value; return
true;">
</form>

If what you are describing is possible in javascript, then anybody could
simply set the value of a hidden field to whatever file they wanted off
your PC and upload it automatically. That is not allowed (and what you
are describing) for that very reason. File inputs are very limited in
javascript context for a reason - security.

Now JavaScript cannot be used to upload files, but the list sent to a
server-side script could use the list a as a queue, right? Am I
mistaken? Again, I do not think this is a very good idea...purely
curiosity and a 'what if' question.

 

[Randy Webb]

Jonathan N. Little said the following on 10/2/2005 11:28 AM:

Randy Webb wrote:


Firstly, I am not saying the OP should do this, I think it is a bad
idea. However are you saying that you cannot build a file list of local
files using JavaScript and the file input? Because this simple codes
builds such a list....

<code>
<form>
<textarea name='abc' rows=30 cols=50></textarea>
<input type=file onchange="this.form.abc.value+=';' + this.value; return
true;">
</form>
</code>

You can not programattically set the value of an input type="file" using
Javascript. You can read it's value, but, you can not set it's value.
And in order to upload, you have to set it's value.

Now JavaScript cannot be used to upload files, but the list sent to a
server-side script could use the list a as a queue, right?

It would still take user interaction. But, if you set the file name
server-side and send the page back to the browser, it will not have the
file set in the type="file" input. Try it

Think about the implications if you could set it:

<form name="myForm">
<div style="display:none">
<input type="file" value="Whateverfileyouwantontheserver">
</div>

<input type="text" name="usersName">

.... more legitimate inputs ....

</form>

When the user submitted the form, you could get what ever file you
wanted off the users computer. That is a very huge security risk and
because of it, you can not set the value of a file input.

Am I mistaken?
Yes.

Again, I do not think this is a very good idea...purely
curiosity and a 'what if' question.

Nothing wrong with curiosity

 

[Jonathan N. Little]

Randy Webb wrote:

You can not programattically set the value of an input type="file" using
Javascript. You can read it's value, but, you can not set it's value.
And in order to upload, you have to set it's value.

Not trying to be argumentative, just trying understand here, agreed you
cannot set the input type="file" programattically, but you can use said
input to collect the list of local files for upload, right? That's what
my little demo does. Next that list can be sent via form field (not
type="file"), right?

It would still take user interaction. But, if you set the file name
server-side and send the page back to the browser, it will not have the
file set in the type="file" input. Try it

I did not say without user interaction, and I did not say that the file
list or that form initiate the file upload, just send the list.

Think about the implications if you could set it:

<form name="myForm">
<div style="display:none">
<input type="file" value="Whateverfileyouwantontheserver">
</div>

<input type="text" name="usersName">

... more legitimate inputs ....

</form>

Yes this would be wildly dangerous!!!!

When the user submitted the form, you could get what ever file you
wanted off the users computer. That is a very huge security risk and
because of it, you can not set the value of a file input.

I'm just saying the form could send the file list data then the
receiving CGI on the server can make the fit connection and upload the
files. It's this how those cookie-cutter server-side site building apps
lik work, or webmail form's attachment routines work?

 

[Jukka K. Korpela]

And which system is that? In DOS, Windows and Linux the directory is
just a file on the filesystem with a special directory attribute,
right?

More or less so.

Still cannot select the folders with the file input browse dialog...

That depends on the browser, as almost anything in file input. I was simply
pointing out that it's up to the browser to decide what is a "file" that
can be submitted.

Is this new for Opera?

It's been in Opera as long as I remember. Since version 3.60 or so.
Now that I test Opera 8.02, I notice that they seem to have removed the
functionality. Oh well. Why would a browser try to compete by being better
and by conforming to specifications? (Please tell me I'm wrong. But using
Ctrl or Shift that used to work in Opera's file input dialog for multiple
selections seems to be dysfunctional now.

The 7.54 version that I have on W2K for testing
cannot select more than one file. Anyway isn't the browse box, at least
on Windows, the OS's common 'file open' dialog and not part of the
browser?

Typically yes, but it can be invoked with different parameters.

To OP, You could use the file input field to browse and select each
file, and then use JavaScript to append each section to a list or
array.

It's rather pointless to suggest solutions before we know the real problem,
and inherently unreliable solutions at that.

 

[Randy Webb]

Jonathan N. Little said the following on 10/2/2005 1:52 PM:

Randy Webb wrote:


Not trying to be argumentative, just trying understand here, agreed you
cannot set the input type="file" programattically, but you can use said
input to collect the list of local files for upload, right? That's what
my little demo does. Next that list can be sent via form field (not
type="file"), right?

That gets the list of files to the server, not the files themselves. In
order to upload the files, they have to be set as the value of a file
input. And the user has to do that, you can't do it programatically.
Whether you attempt it from the server or the client.

I did not say without user interaction, and I did not say that the file
list or that form initiate the file upload, just send the list.

Getting the list is of no use without the files though, is it?
If you attempted to set the file values on a post back from the server,
you run into the example I showed. And you can't do that.

Yes this would be wildly dangerous!!!!

And that is why it is not allowed. It's not allowed by the server, it's
not allowed to be done in the browser. It is just not allowed to be done.

I'm just saying the form could send the file list data then the
receiving CGI on the server can make the fit connection and upload the
files. It's this how those cookie-cutter server-side site building apps
lik work, or webmail form's attachment routines work?

I have never used either so I couldn't answer that. Can you give URL's
to either?

I have read in the last week or so where an XMLHTTPRequestObject might
be able to upload files but I would think that would be a security
violation as well, for the same reasons.

 

[Jonathan N. Little]

Jonathan N. Little said the following on 10/2/2005 1:52 PM:



That gets the list of files to the server, not the files themselves. In
order to upload the files, they have to be set as the value of a file
input. And the user has to do that, you can't do it programatically.
Whether you attempt it from the server or the client.



Getting the list is of no use without the files though, is it?
If you attempted to set the file values on a post back from the server,
you run into the example I showed. And you can't do that.




And that is why it is not allowed. It's not allowed by the server, it's
not allowed to be done in the browser. It is just not allowed to be done.



I have never used either so I couldn't answer that. Can you give URL's
to either?

Neither had I, but I had seen folks with Hotmail and Yahoo accounts and
the webmail , essentially a form in a browser, seem to use the
input=’file’ to browse for attachments and would build a list on the
page similar to what I was describing. Just speculating, but that was
how I thought they did it.

I have read in the last week or so where an XMLHTTPRequestObject might
be able to upload files but I would think that would be a security
violation as well, for the same reasons.

Never used function, just learning PHP, but there are a slew of PHP
functions for FTP. Onced logged on the server, did not think the
fopen() command that reads the local file had to get the filename from a
form's input=’file’. You can hand type source, or hardcode in script to
then be uploaded via ftp_fput(), right?

 

[Martin Kurz]

Neither had I, but I had seen folks with Hotmail and Yahoo accounts and
the webmail , essentially a form in a browser, seem to use the
input=’file’ to browse for attachments and would build a list on the
page similar to what I was describing. Just speculating, but that was
how I thought they did it.

No way. I've seen lots of browser based applications. There are generally two
methods submitting files to the server:

First one is by using the HTML-File-Input-Field. There's only one possibility
uploading files with this: The user has to browser for each single file and
submit the form.

The second one is using something like a java applet doing the upload. If the
user allows the applet to browse the local disc and submit data (there's allways
a security warning from Java-Sandbox when trying this), you can upload mutliple
files or a folders content by this applet (have a look for JUpload on
sourceforge ie).

But because of security restrictions in browsers, there's no way in setting the
file by JS or predefining the file on the server (like allready multiple times
mentioned).

Never used function, just learning PHP, but there are a slew of PHP
functions for FTP. Onced logged on the server, did not think the fopen()
command that reads the local file had to get the filename from a form's
input=’file’. You can hand type source, or hardcode in script to then be
uploaded via ftp_fput(), right?

Even if you're having the filename an dpath on teh server, really getting the
file from the client by using file something like FTP requires three things:
First, the client must have a connectable FTP-Server running. Second: You're in
need of an account to connect to the FTP-Server on the client. And the third
thing: you have to find the right file (FTP-Path != absolute Filepath).

So in very few cases, you could transfer data to the server this way. But in
allmost all cases, this won't working.

martin

 

[Amit C]

Hiii..
I am also facing a similar problem.
My Problem :
I want the user to select one particular file, and the rest of the
files of similar formats should be uploaded automatically.without user
selecting them. I know that we cant assign value to the file control.
So I created ActiveX Object WScript.Shell. object and used the method
sendkeys() to write the path of the file to a hidden file control. Now
I was able to upload a 100 file together when the client and server
were in the same domain.
Now, My server will reside in different domain,. so the IE which
accesses the server is not allowing the form to get submitted.

I hope I have been clear in expressing the problem,
Hoping for a quick reply.
Thanks in Advance.

 

[galatoms]

JavaScript+HTML+CSS on client side allows you initiate File Dialog!

JavaScript (together with HTML and CSS) strictly on client side (without server support) allows you initiate File Dialog and store results in the specified object as shown here:
http://www.ardentedge.com/pr_fd.htm
and
http://www.ardentedge.com/pr_WidgetBuilder_FileDialog.htm

When user gets the file name from File Dialog, s/he can do what he wants: open, upload, save appropriate file...

 

[Marc_Charmois]

open folder files, dialog with JavaScript

Hi,

you can do whatever you want with JavaScript regarding File System Objects, folders, directories etc., using ActiveX objects.

If you use it

in an Internet site , the user will have to accept the use of the ActiveX and have set security policies in order to let the ActiveX do its job.

In an Intranet site, these kinds of settings may be performed wtih GPO.

Finally you can also use it in .HTA applications

Here is code and objects samples that I have used in a HTA application :

Opening the folder where my HTA application is :

<script>

function OpenAppContainingFolder(){


fso = new ActiveXObject("Scripting.FileSystemObject")
url = self.location.pathname
dir = fso.GetParentFolderName(url)

}

function openFolder(dir) {

var shapp = new ActiveXObject("Shell.Application");
shapp.Open(dir);

}


OpenAppContainingFolder();

</script>



Hope that helps...

Marc Charmois