Allow gradio.DataFrame to accept file upload [ x = gr.DataFrame(); x.upload(upload_handler, inputs=x) ]

[nb-programmer]

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

Is your feature request related to a problem? Please describe.
I have a dataframe that loads from a function, and I need to save files by uploading via gradio. I currently use gr.File to upload, then update the gr.DataFrame component, but they become 2 separate components.

Describe the solution you'd like
I would like the DataFrame to have an upload event so that files can be directly dropped onto it. I can see that it is a drop target as I can hover a file over the component and it highlights, but dropping it results in a JS error.

Additional context

• Current solution screenshot (File and Dataframe components):

  

• Drop target of it is able to accept (highlighting border):

Tested on Gradio==3.35.2 Python 3.9.13

Example code (pseudo-ish):

def get_dataframe():
  return ...

def handle_upload(file):
  # Upload routine
  return get_dataframe()

list_files_ready = gr.DataFrame(
    value=get_dataframe(), # just returns pandas DataFrame object
    type="pandas",
    label="Documents in collection",
    interactive=False # Don't want to delete/add rows manually, only from dataframe
)

# upload() Doesn't exist (yet)
list_files_ready.upload(handle_upload,
  inputs=list_files_ready, # This will be different, it should return files not data
  outputs=list_files_ready)

Output:

AttributeError: 'Dataframe' object has no attribute 'upload'

[abidlabs]

Hi @nb-programmer you can upload CSV files to the gr.Dataframe() component. We don't support PDFs (as that would require parsing the PDF which is too heavy).

Does that answer your question?

[nb-programmer]

Sorry, but the file is arbitrary, and doesn't directly go to the component. It first needs to be uploaded (just like the File component) and then the pandas.DataFrame returned by the handler into the gr.DataFrame Basically I want to overlay the File component's functionality with DataFrame.

[abidlabs]

Yep I think I understand what you mean, you want to drop a file into the gr.Dataframe, have it do some processing on the backend, and then populate the contents of the gr.Dataframe based on the file, right?

That feels out-of-scope for the drag-and-drop on the gr.Dataframe (which is designed for simple CSV cases), and I'd advise the gr.File + gr.Dataframe approach that you are currently doing.

This could make for an interesting custom component, which are working towards supporting in gradio, so I'll leave this issue open and designate it as such.

[abidlabs]

Hey! We've now 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
• A "Folium Map Viewer" component that allows you to use interactive maps

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. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[abidlabs]

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).