- ABP Framework version: v3.3.1
- UI type: Angular
- Tiered (MVC) or Identity Server Seperated (Angular): no
- Exception message and stack trace: n/a
- Steps to reproduce the issue: n/a
I want to integrate the file management system into my UI. I want my users to be able to select a file to associate it with an entity.
How can I put a file picker component in my Angular component so the user can pick a file from the File Mangement system?
9 Answer(s)
-
0
Hello,
I'm not quite sure about what you are trying to achieve. Could you explain your case little bit further with images if possible?
Thank you
-
0
if you are trying to achieve something like this "adding a picture to the user", then you need to implement this manually, by adding a byte[] to the IdentityUser and showing it on the relavant UI's... this module is for managing general files without any entity relationship.
-
0
Hi yea, sorry.
I want to allow the user to select a file from the file manager and associate it with an entity.
Obviously I'll need some kind of property on my entity to store the reference.
Let's say I have an Application Form entity and I want a Signed Copy attaching to it. I'd like the user to click a button to spawn the file browser (the tree view in file management) and then be able to browse and select a file. I imagine the file browser would give me back an Id or a FileDto which has the Id and/or virtual path to the file. I can then store this Id in my entity.
-
0
If you simply want to enable users to choose a picture from their computer, you can use something like
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
. This is the native way of choosing files from your computer.If you want them to choose a file that is already uploaded via the file-management module, you have to implement your own interface to do it. For the tree component, we use the tree component of ng-zorro
-
0
Hi @bunyamin.
Thanks for the reply. Yes, I want to use the the File Management system for a few features. Presumably the FileManagement AppService has some methods that build a ViewModel suitable for passing to ng-zorro. Is there any documentation around it's API so I can look at re-using it?
Thanks, Greg
-
0
I'm not sure if this helps https://docs.abp.io/en/commercial/latest/modules/file-management But I'd do it without File Management. It'd be a forced solution.
-
0
Hello @GregB,
We are utilizing this tree adapter which is available within
@abp/ng.components
package.Hope it helps.
-
0
Hey @bunyamin,
Thanks for that pointer. Any chance you can give me a snippet of how you wire it up?
Cheers, Greg
-
0
Hello,
You can simply initiate it as
new TreeAdapter(list)
.The important bit is that the
list
should have children that has fields likeid
,parentId
which builds up the tree.