• 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
  • Liutauras Vilda
  • Bear Bibeault
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Paul Clapham
  • Devaka Cooray
  • Knute Snortum
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Frits Walraven
Bartenders:
  • Carey Brown
  • salvin francis
  • Claude Moore

File Picker  RSS feed

 
Ranch Hand
Posts: 174
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: 174
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: 96
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
 
Ranch Hand
Posts: 381
2
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: 5413
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: 174
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: 174
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
Ranch Hand
Posts: 381
2
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: 5413
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).
 
The problems of the world fade way as you eat a piece of pie. This tiny ad has never known problems:
Create Edit Print & Convert PDF Using Free API with Java
https://coderanch.com/wiki/703735/Create-Convert-PDF-Free-Spire
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!