Align UI with CKAN core

[amercader]

Following up from ckan/ckanext-validation#83

Copy the form elements from upstream CKAN. I've used the form fields in CKAN 2.10, which were refactored to simplify them and drop the infamous image-upload.js module in ckan/ckan#6227.

The markup is clearly separated in three blocks:

1. Upload/Link buttons
2. File input + Remove button
3. URL input + Remove button

Clicking one of the Upload/Link buttons shows the relevant input field + remove button (for uploads, it triggers the file picker immediately). This is the standard behaviour from CKAN 2.10, which is replicated in the component:

create_resource.mp4

What is missing here is the Messages + Progress bar section, which I think should appear just below the inputs as shown in these crude mockups (we don't need to use emojis, we can use font awesome for instance):

The style classes have been copied verbatim from CKAN 2.10, but prefixed to avoid clashes with the other image-upload field we have in the resource form (the resource schema one, which will eventually be replaced):

• .resource-upload-field -> .ckan-resource-upload-field
• .btn-remove-url -> .btn-remove-url-upload

TODO

• Hook into upload logic (ie making it work again :) ) I don't think that will be a big effort but let me know if there's a problem with the new markup
• Add the messages and progress bar UI
• Autopopulate name field. This is done here in upstream CKAN

[aivuk]

Ok, I got it. But the implementation will be a bit different because I'm not going to use the jquery and I will use svelte to handle the logic, ok?

[amercader]

AFAICT there is no jquery used in the markup I added, except for the linked name field logic that yes, can of course be moved to svelte. (same for the inline click handlers if there is a better way of implementing them)

[aivuk]

AFAICT there is no jquery used in the markup I added, except for the linked name field logic that yes, can of course be moved to svelte. (same for the inline click handlers if there is a better way of implementing them)

I was talking about that:

$('#field-resource-upload').replaceWith($('#field-resource-upload').val('').clone(true))