ThinkGeo.com    |     Documentation    |     Premium Support

HTML5 file input - show only .shp files but select all three

#1

I am trying to add a file input that the user will use to select shape files from their hard drive in order to import the shape and load it in the map. Our company also uses your desktop version which is doing the same. 



In the desktop version, when you click on the file selection control, it has the ability to filter to only the *.shp files so the users don’t see the .dbf or the .shx files. Can that be done on the web too, so that the user will see only the files with extension .shp and when they select one, the other two (.dbf, and .shx) with the same name will be automatically selected?



Please help, as it might be confusing to the users to  select all three files with the same name instead of selecting just one .shp file.

#2

Hi Debarupa,



I don’t know if there is an existing solution about this but I did some investigations and still didn’t find any uploader can do that. But I think it should be possible by doing some modifications based on some plugins like “Uploadify plugin for JQuery”. As I just am thinking the key point is getting the selected files array, so, if we can do some modifications in the plugin codes to get the other two file names, then insert into the target selected file array, I think it should be done. But it is just my guess and not sure if it is easy to find out those part codes in Uploadify plugin.



Or, maybe you need to do more researching on this.



here is the jquery-multiple-file-upload-plugin



Hope it helps.

Regards,

Troy

#3

all the files for the same shp should be the same?



so u may just assume all needed files are there and try to upload, if not exists, just ignored.

#4

Hi Guangming, 
  
 Thanks for the reply, but we can’t ignore the other two necessary files “shx” and “dbf” file when uploading the shape files, or the shape file can’t be rendered in the server side. So, we still need to find a solution to get the two file paths in the upload plugin automatically. 
  
 Thanks, 
 Troy

#5

they should be in the same folder as shp file.

#6

guangming,



I am not sure if we are at the same page on Debarupa’s problem “as it might be confusing to the users to  select all three files with the same name instead of selecting just one .shp file.”. He wants to only select the shape file and then upload all the three files automatically. 



If you have any ideas, that would be great you can share with us.

Thanks,

Troy

#7

what i meant is that after the user specify the shp file path, you can use that path to try to load other files as well, because all these files should be in the same folder and have the same file names but different extensions. 
  
 If u did not find one of them, just skip it.

#8

Hi Debarupa&Guangming,



I did some investigations on the Html5 file input and the result is it doesn’t support add files programmatically. The reason is the FileList (an object of this type is returned by the files property of the HTML input element) is read-only. So, I think it is impossible to archive it no matter which upload plugins. I am afraid you still have to let user to select all of the three files and do some validations to make sure the uploading files are included the three extension file types.



Here are some specifications on HTML 5 input element.

developer.mozilla.org/en-US…plications

developer.mozilla.org/en-US…I/FileList

stackoverflow.com/questions/…s-filelist



Hope it helps.

Thanks,

Troy