UploadField: easily preview file/document

[lekoala]

Hello,

Here is a suggestion for the UploadField. I had a valid feedback from a customer saying that to know which file has been uploaded through an UploadField, you need to click first on the eye, wait for the file manager to load and then click on the zoom icon (which is not the most intuitive thing).

In a lot of scenarios, going through the file manager is not necessary, since the end user simply wants to view the file (for image, i guess the preview helps, but for documents it is super useful).

My suggestion is to make the preview icon clickable, linking directly to the file in a new window (either you click on the icon to view the file, or you click on the eye to view the full details)

Also, it seems the public link is broken if the file is in draft mode (for a customer, it feels broken : he uploads a file, click on the eye, click on the zoom icon and gets an error page, not the best thing for confidence into the system).

Thanks,

[lekoala]

So currently I have this which is not too bad, although it would be a lot cleaner to be handled directly by the component.

    $('.uploadfield-item__thumbnail').entwine({
        onclick: function() {
            var id = this.parent().find('input').val();
            var uploadfield = this.parents('div.entwine-uploadfield').find('input.entwine-uploadfield');
            var state = uploadfield.data('state');
            var files = state.data.files;
            for (var i = 0; i < files.length; i++) {
                var item = files[i];
                if (item.id == id) {
                    window.open(item.url);
                }
            }
        }
    });

[mlewis-everley]

@lekoala I have been playing around with something similar on a private fork of this module. What I have done so far is added a "Download" button to each item. Clicking the button downloads the file (or opens it in the browser if it is an image).

I have attached an image of what I have done (this is on a readonly version, but it does the same on a standard version).

Is this work of interest? For example a PR to add the feature?

[lekoala]

@mlewis-everley :-D that should be the default behaviour shipped by the framework

[mlewis-everley]

@lekoala I would be inclined to agree, but I am not sure if any of the core team agree or not.

[clarkepaul]

We have this catered to in the designs although this hasn't gone as far as development yet. Designs are here (top right) with options in dropdown https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/asset/components/5b5e6e3984472000117f3ee4