This week's giveaway is in the JDBC forum.
We're giving away four copies of Java Database Connections & Transactions (e-book only) and have Marco Behler on-line!
See this thread for details.
Win a copy of Java Database Connections & Transactions (e-book only) this week in the JDBC forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Devaka Cooray
  • Knute Snortum
  • Paul Clapham
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Bear Bibeault
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Ron McLeod
  • Piet Souris
  • Frits Walraven
Bartenders:
  • Ganesh Patekar
  • Tim Holloway
  • salvin francis

File Picker  RSS feed

 
Ranch Hand
Posts: 176
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Does anyone have any code for a file picker in Angular?  Basically I just want a typical bar that you can either enter in the file name or click on an icon to browse for the file. I then need the path returned and the file name (both separate variables).  I have searched around for something like this but all I could find is file upload tutorials, which is not what I want (although some of the components are similar).

Thanks.
 
John Morgan
Ranch Hand
Posts: 176
2
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
For any in the future that need this... here is a github I found that does what I am looking for....

https://www.npmjs.com/package/ngx-file-helpers
 
Ranch Hand
Posts: 97
AngularJS Chrome Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You use primeng file picker. It's with MIT licence

https://www.primefaces.org/primeng/#/fileupload

Find source code of file upload component here.

https://github.com/primefaces/primeng/blob/master/src/app/components/fileupload/fileupload.ts
 
Rancher
Posts: 427
6
Fedora IntelliJ IDE Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why don't you just use the html file input?
 
Saloon Keeper
Posts: 5504
143
Android Firefox Browser Mac OS X Safari Tomcat Server VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

John Morgan wrote:I then need the path returned and the file name (both separate variables).


By "path", do you mean the client-side path of the file? I doubt there are any browsers left that provide that information at this point, as it's considered a security risk. (And most browsers never sent it to begin with.)
 
John Morgan
Ranch Hand
Posts: 176
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Tim Moores wrote:

John Morgan wrote:I then need the path returned and the file name (both separate variables).


By "path", do you mean the client-side path of the file? I doubt there are any browsers left that provide that information at this point, as it's considered a security risk. (And most browsers never sent it to begin with.)


I am talking about the path where the file is located on the local disk... i.e. C:\Users\{username}\Downloads
 
John Morgan
Ranch Hand
Posts: 176
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
As a quick note, this would not be a security violation as you already know where the file was located (hence the pop up window) so you would already know where it is (you just browsed to there). So it would be something like:

1) Click button to find file
2) Dialog box opens
3) If suggested directory does not exist, dialog box starts in browser default
4) Browse to location of file you want to upload if necessary (this is the path I need to capture)
5) Click on file (also need to capture file name separate from file path)
6) Do stuff to the file programmatically
7) Save file in the same location as the captured path but with a different file name

I have all but steps 4 and part of 7 figured out.  I can save the file under a different name but the location is incorrect... Saves the file in the root of the project not in the file path where the original file was located.

Hope that clears up what I am trying to attempt.
 
Al Hobbs
Rancher
Posts: 427
6
Fedora IntelliJ IDE Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The stuff you do programmatically you are going to do with typescript/javascript? When you saved the file did you use the whole file path when you saved?
You might not be able to just save the file to their computer.
SO
 
Tim Moores
Saloon Keeper
Posts: 5504
143
Android Firefox Browser Mac OS X Safari Tomcat Server VI Editor
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, it is a security risk for the web app to know about the client file system; that's why browsers don't provide it. It's also not possible to download a file to a location determined by the web app - the browser determines where files go (usually into a user-designated download directory, or onto the desktop).
 
John Morgan
Ranch Hand
Posts: 176
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Currently the path is hard coded into the program. The program to manipulate the spreadsheet is written in Java as it connects to a DB2 database.

Al Hobbs wrote:The stuff you do programmatically you are going to do with typescript/javascript? When you saved the file did you use the whole file path when you saved?
You might not be able to just save the file to their computer.
SO

 
John Morgan
Ranch Hand
Posts: 176
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Okay... that is kind of what I thought but I was hoping that there was some way of saving to the original location where the file was grabbed in the first place. As the user chose the file they would know the path to the original file. I was hoping to capture that path so the file would be saved to the same location.

I can see why it would be a security risk to know of the client file system, but I would have thought there would be a way to capture a path.

Tim Moores wrote:Yes, it is a security risk for the web app to know about the client file system; that's why browsers don't provide it. It's also not possible to download a file to a location determined by the web app - the browser determines where files go (usually into a user-designated download directory, or onto the desktop).

 
Blueberry pie is best when it is firm and you can hold in your hand. Smell it. And smell this tiny ad:
how do I do my own kindle-like thing - without amazon
https://coderanch.com/t/711421/engineering/kindle-amazon
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!