Ability to provide a file preview for the gradio.File component

[jcampbell05]

• [ x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.

Our application has a requirement to upload JPEG, PNG and RAW files (i.e DNGs). The only way currently to do this is to use the gradio.File component.

However this has one draw back, it doesn't have previews meaning that when we use gradio.Examples we just get a list of file names rather than a preview of the example image.

This means we either have to reimplement the entire examples functionality (hard) or have a hidden image field the examples component is linked to, so that it shows a preview. And add an event listener which detects when the image field has been filled in and sets the file field (Annoying). We still don't get a preview for the file field so user will have to hope the correct file has been selected but it works.

Example of that code:

file = gr.File(label='Original')

        image = gr.Image(
            label='Original',
            type="filepath",
            visible=False
        )

        def set_image(paths):

            print(paths)

            return {
                file: paths
            }

        image.change(set_image, inputs=image, outputs=[
            file
        ])

        gr.Examples(
            examples=example_paths,
            inputs=image,
            cache_examples=False,
        )

Describe the solution you'd like

I would love to be able to provide the file component a function that could generate a preview to be shown in the UI which components like the Example component could use.

def make_preview(file_path):
    return cv.imread(file_path) 

file = gradio.File(type='file_path',  preview=make_preview)

Or allow the image component to accept other files types other than just JPEG, PNG etc.

[abidlabs]

Thanks @jcampbell05 for creating the issue. Just to understand, why are you not using the regular gr.Image() component for this? Is it because you need to restrict users to only use JPEG, PNG, and RAW files? What if we set a parameter that allowed users to restrict the type of image formats that could be uploaded?

[jcampbell05]

Thanks @jcampbell05 for creating the issue. Just to understand, why are you not using the regular gr.Image() component for this? Is it because you need to restrict users to only use JPEG, PNG, and RAW files? What if we set a parameter that allowed users to restrict the type of image formats that could be uploaded?

It's because we need to be able to upload RAW files and the gr.Image() component doesn't appear to allow you to do this or customise which files you want to accept that perhaps their browser supports.

See here how "NEF" is disabled on my browser

It makes sense because maybe Gradio can't convert to numpy. And it's less confusing to developers if they can't enable such a format and wonder why it isn't being converted.

TLDR; In our case we really just need the image preview functionality and a file path to the file. Right now the File component lacks the preview functionality and the Image lacks the ability to load any arbitrary image format beyond what gradio supports.

[abidlabs]

Ah I see, yeah it seems like this format is not supported by browsers. This has come up with other specialized formats as well, which we feel are out of scope of the core Gradio library. In this case, what I highly recommend is this:

We've made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox
• A "Folium Map Viewer" component that allows you to use interactive maps: https://huggingface.co/spaces/freddyaboulton/gradio_folium

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. You can create a custom based on an existing Gradio component as a template. In this case, you'd use the File component as a template, and then you can change how the Examples appear.

If you'd like to get started, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. I'll close this issue as its out-of-scope of the Gradio library, but feel free to ask any questions about custom components in this thread.