Suggestion: icon parameter, default preview style

[MilanObrenovic]

1. There is no ability to add an icon in the attribute. Adding a material icon above the placeholder text in ngx-mat-dropzone would help

2. I know the documentation says there is intentionally no default preview, but optionally having a default one would help save time from reinventing the wheel of building this to show the preview, styling it etc. If anyone wants to use the default one, they can use it and then override its default styling if necessary. I think this is a much better choice. Could this be added?

[hackingharold]

Hi @MilanObrenovic,

you're right, rendering an icon within the dropzone should be possible. I will add that.

I am really struggling about the file preview though. What would be a good default preview for you personally?
I mean we have elements like the Material Chips which are easily usable for this.

[MilanObrenovic]

Hi @MilanObrenovic,

you're right, rendering an icon within the dropzone should be possible. I will add that.

I am really struggling about the file preview though. What would be a good default preview for you personally? I mean we have elements like the Material Chips which are easily usable for this.

How about something like this?

Within a card, there can be a preview image which illustrates what the user is expected to upload, and below it is the dropzone. A very useful default functionality would be:

1. Drag and drop file to upload (or click and choose)
2. The text region that said "drag and drop..." gets replaced with the actual file that was just uploaded
3. Below the card, the filename + extension gets written
4. A Delete icon gets shown (perhaps on top right corner of the uploaded document), and when clicked, the uploaded file just gets reset back to null, and "drag and drop..." text gets shown again, basically reset the dropzone back to default

[hackingharold]

Hi there,

sounds like a great idea UX-wise, although I think the use case is a little too specific for my library.
A more generic solution would be to provide a simple file preview, so behaviors like yours can easily be implemented by the consumer.

• Allow icons within dropzone
• Add file preview with filename and extension
• Add file preview for actual content like images
• Update documentation

[hackingharold]

Hi there,

I just released the latest version for Angular v17 which includes support for chips-based file previews (see readme).
Please let me know if this helps you. After thinking about it, I decided to leave anything like image previews to the consumer.

Releases