Opening multiple files 1

[sagarB]

Can someone Guide me Opening multiple files simultaneously using javascript

 

[kaht]

Opening multiple websites, or opening multiple files from a user's computer?

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[sagarB]

Hi kaht,
Browising, opening and attaching multiple files simultaneously sir

 

[cLFlaVA]

unfortunately, in that one sentence, you managed to describe a project that could take 160 man-hours to complete. we'll not be able to help you out much. i suggest trying to search the web for examples, or try something yourself. once you have specific questions, feel free to come back and ask about specific code.



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[kaht]

Ok, that still didn't answer my question. But I'll assume you mean files on a client's computer.

To do this you will need to use an ActiveX object - which will work in IE only.

Here's a website to get you started:

http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[sagarB]

Hey,
I am just curious to know whether there is a possibility of browsing multiple files simultaneuosly using javascript or HTML. I know we can do this usinga secured applets.

 

[theniteowl]

The answer is conditionally yes but depends on your implementation.

As kaht said you can do it with ActiveX but that limits you to only supporting IE browsers.

You can use Javascript/JScript or VBScript client side code and an ActiveX object to bring up Windows objects to let you browse to and select files on the local PC. This causes ActiveX warning messages the client has to acknowledge in order to continue.

If you intend to browse to and select files in order to upload them to a server folder or to a database then you can do this without ActiveX but you can only select one file at a time. That is NOT to say that you can only upload one file at a time, it's just that you have to brwose to one file and select it, then browse to the next file and select it, etc.
You do the selection using the an input tag with type="file", which will give you a browse button to go select the file.
In order to do more than one file you will need more input fields. I do this by dynamically creating a new input field when it is needed and keeping track of the sequential number at the end of the field name so I know how many files there are and what field their object is stored in.




At my age I still learn something new every day, but I forget two others.

 

[sagarB]

Hi theNiteOwl,
Thanks for the reply.

Even I was able to browse one file at a time using input type= file.

Can you kindly send a code snippet how to dynamically create a new input field when it is needed??

I appreciate your effort sir

 

[theniteowl]

Unfortunately it's not an entirely easy thing to do.
I use DOM methods to create the new HTML elements which is straightforward enough but a lot of other code is used to handle how it displays, track the field names, etc.

Here is the tricky part.
If you allow people to add more files then you will have to know the name of the field so that on your next page you can retrieve those objects. Having an unknown number of fields means you have to keep count and pass that value to your next page as well. To complicate things, if you want to give them the ability to remove an item they already browsed and selected then you have to keep track of what the field names are as they may no longer be sequential. For instance if you have fields File1, File2, File3 but the client opts to delete the second one your next page has to know the names of the fields to look for are File1, File3. You can no longer just rely on knowing how many fields to look for, you have to know the field names.

I just code like this to create the additional field when an ADD File button is pressed.

    var newdiv = document.createElement("div");
      newdiv.id = whichform + "divfile" + filenum;
    var newtr = document.createElement("TR");
    var newtd1 = document.createElement("TD");
      newtd1.width = "250"
    var spanfilename = document.createElement("span");
      spanfilename.id = whichform + "FileAttachName" + filenum;
    var newtd2 = document.createElement("TD");
      newtd2.width = "530"
    var spaninput = document.createElement("span");
      spaninput.id = whichform + "FileAttachSel" + filenum;
    var mytext = document.createTextNode('File: ');
    var fileinput = document.createElement("input");
      fileinput.size = 40;
      fileinput.type = "file";
      fileinput.name = whichform + "file" + filenum;
      fileinput.UNSELECTABLE = "on";
    newtd1.appendChild(spanfilename);
    newtr.appendChild(newtd1);
    spaninput.appendChild(mytext);
    spaninput.appendChild(fileinput);
    newtd2.appendChild(spaninput);
    newtr.appendChild(newtd2);
    newdiv.appendChild(newtr);
    myouterspan.appendChild(newdiv);

The above code is incomplete because it is a much more complex function. It would take me more time than I have right now to break it down into a simpler one that would fit your needs more directly but you can see the methods above used to create the new input object.

Essentially I have the file input field inside a div on the form. When they select a file I have an Add button. That button stores the fieldname of the field, hides the original input field and then creates a new field with a sequential name. I display the filename of the previous selected file up above the new input field with a hyperlink to allow removing it. So each time you select a file and click ADD the filename appears at the top, the original input field is hidden and a new one created.
When an item is selected for removal I remove the name of the field from the list of fields that is passed to the next page. On the next page I read a hidden field that contains a comma delimited list of fieldnames so my upload script knows which fields contain objects I need to upload.

The script was written a while ago and may use some IE only commands that need to be altered. I have learned a lot since I wrote the code and one day plan to go in and wrote it a bit cleaner but have not had time.


At my age I still learn something new every day, but I forget two others.

 

[sagarB]

Thank u so much sir

 

[sagarB]

Hi theNiteOwl,
I am a new comer to javascript. I apolozise if I commit any mistake to understand your code.

If I predict it correctly, Is this what you meant:


<span>
<div id = whichform + "divfile" + filenum>
<tr>
<td width = "250">
<span id = whichform+"FileAttachName"+filenum>
</span>
</td>
<td>
<span id = whichform+"FileAttachSel"+ filenum>
<input type= "file"
size= "40"
name = whichform+"file"+filenum
UNSELECTABLE = "on"/>
</span>
</td
</tr>
</div>
</span>


If above is the code snippet what you were tryin to provide, It was'nt working.

Can you please correct me in the above code and post it again. I really really appreciate your effort sir.
This part of work has really become an important job to me for my client. He is relying on me. Hope you understand.

Thanks - sagar

 

[Foamcow]

If you have access to PHP then you can do the multiple file inputs like so.

Here's the PHP for part of the form

<fieldset id="fset_images">
<legend>Images</legend>
<p><input type="file" name="fld_images[]" /></p>
<a href="#" id="addImage">+ Add another image</a>
</fieldset>

and here is the javascript for adding the new DOM nodes

	window.onload = function(){
		var addImageButton = document.getElementById('addImage');
		addImageButton.onclick = function(){
			//create an input element
			var element = document.createElement('input');
			element.setAttribute('type','file');
			element.setAttribute('name','fld_images[]');

			//insert the element into the DOM
			var imageSet = document.getElementById('fset_images');
			
			var para = document.createElement('p');
			imageSet.insertBefore(para,addImageButton);
			para.appendChild(element);
		}
	}

If using PHP, when the form is submitted a global array is created called $_FILES. This array contains information about the uploaded files and can be looped through and each file processed accordingly.
The other nice thing about using PHP to do this is that you can just create the input boxes with the name "something[]" and it will automatically create an array and append each file to it. So no need to track how many files and count sequences etc.


I'm not sure if that will help your specific problem, but it might offer some insight. I'm posting it mainly because I did it the other day for a job and it worked out really nicely!

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[sagarB]

Hi FoamCow,
Thanks for replying.

The code which you have send me is used to add browse buttons and text fields when Add Another Image is clicked.

By doing this I am able to attach only One file at a time.

But my request was to open multiple files and attach them simultaneously.

Hope you have some idea on this.

thanks - sagar

 

[sagarB]

Hi kaht,
I also tried using ActiveXObject. I am able to readall the file systems , But the program jus reads and appends and displays on the page as a list, Instead of givin an option to select files.

Can you tell me how to select files from those retrieved file systems??

Thanks - sagar

 

[theniteowl]

sagarB, my code was not intended for you to decipher into HTML to use, it is part of a function that will create a new div element with an file input tag inside of it.
The name of the div is dynamically created with the name of the form it goes to (though this can be removed for your own purposes, I have two forms for different purposes on the page so needed to identify which one) then it adds the text divfile and an incremental number so the fieldnames are always unique. The first one would be named like:
name="form1divfile1", the next form1divfile2, form1divfile3, etc.

It is possible that you could name all of them the same and access them as an array, I just have not attempted it that way yet.

Look at it this way. If you implement it similar to what I have done you will want a single field for selecting files from and an area to display the names of the files that have been selected.
You start with one file field on the page named something like file1. When a file is selected and added the name of the file should be displayed in the proper location, the old file input field has to be hidden and then a new one created in the same location but with the name file2.
You cannot re-use the same input field because it's value is a reference to the file object and if you mess with that you lose that object and replace it with another one so you have to create a new field and hide the old.

Technically the type="file" field SHOULD allow you to select multiple files which are returned in a comma delimited list but most browsers do not implement it correctly. I believe Opera is the only one that supports it as it was intended. So you have to work around that limitation by having more than one file input field. Many people just create multiple fields on the page either all displayed at once or most hidden until they are needed. That works well if you know you will never have more than a specific number of files. If you want the number to be flexible then you have to use a function to dynamically create the new field on the page as needed and that is what the bit of code I posted will do, though it is as it sits not a complete solution. My posted code here relies on several values being passed into the function for reasons that were specific to my own application. It would have to be modified to work in your situation but I posted it so you could see the DOM methods used to create the new div and insert a new file input field into it.
It is also creating table rows and cells that are specific to my own application and could be eliminated.

It is not a simple question you are asking and the approach is highly variable based on your own implementation which makes it difficult to answer with sample code.


At my age I still learn something new every day, but I forget two others.

 

[sagarB]

Hi TheniteOwl,
Good Morning,
Thanks for the reply.

I was able to dynamically increase the input file fields initially also. But My user says he has 30 - 40 files to be uploaded everytime and he wants all to be browsed and attached at once. Thats a bit of concern. Any ways Will try and see how to implement. But mean while if you thought any idea on this Do please ping me and lemme know. I would really appreciate that effort.

Thanks - Sagar

 

[theniteowl]

Without a custom component I do not think you are going to be able to do it.

Using ActiveX you could browse and select multiple files but the input type would not work as file and so the selected file objects would not be exposed to your code to upload them. You would need client-side code to handle the uploading rather than server-side and that is a different story.

To do the uploads from client-side script you would have to have a non-web based method to upload the files either through FTP or copying files directly to a server folder. Otherwise you need a custom control to allow the web browser to access the client side files and pass them to the server and that is an entirely different approach.

Where do the files go to when they upload them? Is it a local server on their own network? Can they go to an FTP server? Those approaches are not as difficult.


At my age I still learn something new every day, but I forget two others.

 

[sagarB]

TheNiteOwl,
It ultimately has to be saved in the database.

 

[theniteowl]

The file input field exposes the browse window but only accepts one file selection at a time in most browsers (IE included) but the only way the upload scripts server-side can access client-side files is via that input field so that leaves you in a difficult place.

You can use client-side code to browse the files and insert them into the database directly without going through a web browser. Using VB or VBA you can directly access the Windows components for the file browser for selecting files and then you would have to figure out how to upload the files from VB into the database. You would not be able to do it directly from the web browser using a file input field though.


At my age I still learn something new every day, but I forget two others.

 

[cLFlaVA]

niteowl, i commend your patience a great deal, but enough is enough... don't ya think?



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]