Open Closed

How can I spawn a File picker for the File Managment module from my component #623


User avatar
0
GregB created
  • 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)
  • User Avatar
    0
    bunyamin created

    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

  • User Avatar
    0
    alper created
    Support Team Director

    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.

  • User Avatar
    0
    GregB created

    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.

  • User Avatar
    0
    bunyamin created

    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

  • User Avatar
    0
    GregB created

    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

  • User Avatar
    0
    alper created
    Support Team Director

    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.

  • User Avatar
    0
    bunyamin created

    Hello @GregB,

    We are utilizing this tree adapter which is available within @abp/ng.components package.

    Hope it helps.

  • User Avatar
    0
    GregB created

    Hey @bunyamin,

    Thanks for that pointer. Any chance you can give me a snippet of how you wire it up?

    Cheers, Greg

  • User Avatar
    0
    bunyamin created

    Hello,

    You can simply initiate it as new TreeAdapter(list).

    The important bit is that the list should have children that has fields like id, parentId which builds up the tree.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11