React-jsonschema-form: File array implementing orderable/addable/removable

[kdelwat]

Prerequisites

• [x] I have read the documentation;

Description

Currently, creating an array of file inputs creates a multi-select input. However, it would be useful to provide some way to create a regular array (similar to an array of strings) where each field is a file input. This would allow adding, removing, and ordering individual files.

I have been trying to do this using the following, but unfortunately it does not work. Is there a way to implement such an array?

Schema

{
  "type": "object",
  "properties": {
    "listOfFiles": {
      "type": "array",
      "title": "A list of files",
      "items": {
        "type": "string",
        "format": "data-url"
      }
    }
  }
}

UI Schema

{
  "listOfStrings": {
    "ui:options": {
      "orderable": true
    }
  }
}

[n1k0]

This is indeed not supported atm. Would you be willing to work on a patch?

[kdelwat]

I'm pretty new to React and JavaScript in general but I'm willing to give it a shot!

[n1k0]

Cool! Here the idea would be to special case a list of data-url field before it's considered as a multiple files widget. Don't hesitate asking for help and guidance if you're struggling :)

[VagishVela]

@kdelwat Are you working on the patch? I'm able to help a bit if you want.

[kdelwat]

@VagishVela I've been very busy and haven't had a chance, so please feel free to come up with a solution 😄

[miswartz]

I'd love a solution! This would be very useful to me!

[miswartz]

@n1k0 What would the workload for this feature be? I'm going to need a reorderable list of file upload selectors relatively soon. Where in the project would I be looking at to add this and what would the solution entail?

Thanks!

[n1k0]

I don't know about the workload. The implementation should be done in ArrayField I think, and reusing the ordering logic for file inputs.

Note that meanwhile you could probably write a custom field doing exactly this for your own needs.

[elieux]

This looks like a good workaround.

{
  "type": "object",
  "properties": {
    "listOfFiles": {
      "type": "array",
      "title": "A list of files",
      "items": {
        "type": "object",
        "properties": {
          "file": {
            "type": "string",
            "format": "data-url",
            "title": "A file"
          }
        }
      }
    }
  }
}

[epicfaace]

Actually, it seems that @elieux 's workaround seems fine.