Customizable Dropzone

[titusgahissy]

Hello, I'm following up on issue #2.

1. Is it possible to customize this preview screen? Instead of showing a generic icon and the filename, maybe the actual uploaded image. Developers should be able to do that through a render or parameterized children props

[ljwagerfield]

This would be an excellent feature!

We've also received interest in displaying custom progress (e.g. horizontal bars, instead of the circles we use currently).

The challenge is that React Uploader is a simple wrapper for Uploader, which is a plain JavaScript library.

The Uploader library is also extended by several other framework wrappers that we maintain (see below).

Each framework wrapper provides a very similar API, and we really want to keep it this way.

Thus, the solution we choose essentially needs to be supported by 5 these libraries:

• Uploader
• React Uploader
• Vue Uploader
• Angular Uploader
• jQuery Uploader

So whilst it's possible, I think it starts to get a little complicated, given the interop between each framework wrapper and the "plain JS" base component (which incidentally is written in Preact).

[ljwagerfield]

In general -- and because of the above -- we try to solve these issues by supporting the specific feature the user is after natively, rather than allowing areas of the component to accept arbitrary HTML.

In this case, it sounds like you want image thumbnails (instead of a generic icon)?

If so, we can certainly look into adding this.

[titusgahissy]

I opened the issue because I wanted to create the following UI that uses a grid instead of a list.

[ljwagerfield]

Thanks for sharing :)

I don't think we'll be at a point (any time soon) where we can support UI changes as significant as this.

If you'd like to build a completely bespoke upload UI, you can use Upload.js to handle file uploading, progress reporting, and cancellation.

It's a headless library, so you'd need to build the UI for yourself.

[titusgahissy]

Makes sense. I will explore this approach.