PHPackages                             dia-nz/sortablefile - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. dia-nz/sortablefile

ActiveSilverstripe-vendormodule[File & Storage](/categories/file-storage)

dia-nz/sortablefile
===================

An extension for SilverStripe 4 that adds sorting to UploadField.

2.1.6(6y ago)095BSD-3-ClausePHP

Since Apr 20Pushed 6y agoCompare

[ Source](https://github.com/DIA-NZ/sortablefile)[ Packagist](https://packagist.org/packages/dia-nz/sortablefile)[ RSS](/packages/dia-nz-sortablefile/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (2)Dependencies (5)Versions (18)Used By (0)

Sortable UploadField
====================

[](#sortable-uploadfield)

[![Scrutinizer Code Quality](https://camo.githubusercontent.com/0fbfac568a0359e24febc7ff8be2e2eaac19ef0713592fa8e5dc99da39b62b48/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6469612d6e7a2f736f727461626c6566696c652f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/dia-nz/sortablefile/?branch=master)[![Code Coverage](https://camo.githubusercontent.com/37809281dc589c1a2f9c26dd3d0e43290b35f5237f886565b9d5b7767573d54b/68747470733a2f2f636f6465636f762e696f2f67682f6469612d6e7a2f736f727461626c6566696c652f6272616e63682f6d61737465722f67726170682f62616467652e737667)](https://codecov.io/gh/dia-nz/sortablefile)[![Build Status](https://camo.githubusercontent.com/5674a8547572bfe82cfd0bcd25aa76a1d7a450aeab943b3fc0e7b3a5176faf73/68747470733a2f2f7472617669732d63692e6f72672f6469612d6e7a2f736f727461626c6566696c652e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/dia-nz/sortablefile)[![Latest Stable Version](https://camo.githubusercontent.com/29b130c0d5b53a4e67ed2bf7b5bb61565d1424db63acd45cd287de21381cd564/68747470733a2f2f706f7365722e707567782e6f72672f6469612d6e7a2f736f727461626c6566696c652f762f737461626c65)](https://packagist.org/packages/dia-nz/sortablefile)[![Latest Unstable Version](https://camo.githubusercontent.com/94e190d553a68d04e2b6294c01092466bac8797a1f85759f1b273afd96161b77/68747470733a2f2f706f7365722e707567782e6f72672f6469612d6e7a2f736f727461626c6566696c652f762f756e737461626c65)](https://packagist.org/packages/dia-nz/sortablefile)[![Monthly Downloads](https://camo.githubusercontent.com/bdfddb802e4230255b5a8d1a358ab93b7f60edd07c7c35b77330794bd8462235/68747470733a2f2f706f7365722e707567782e6f72672f6469612d6e7a2f736f727461626c6566696c652f642f6d6f6e74686c79)](https://packagist.org/packages/dia-nz/sortablefile)

An extension for SilverStripe 4.1+ that allows sorting of files attached via `UploadField`.

This module decorates the existing `UploadField` and adds sorting capabilities to it. This is meant to be used with a `many_many` relation of Files or Images.

[![screen-capture](docs/assets/sorting.gif)](docs/assets/sorting.gif)

Installation
------------

[](#installation)

This module only works with SilverStripe 4.1+.

For a version compatible with SilverStripe 3, please use a `1.x` release.

The easiest way is to use [composer](https://getcomposer.org/):

```
composer require dia-nz/sortablefile ^2.0

```

Run `dev/build` afterwards.

Usage
-----

[](#usage)

Usage is pretty simple. Just use `SortableUploadField` instead of `UploadField` to manage your `many_many` relations. To persist the sort-order, an additional extra-field with the sort-order has to be added to the `many_many` relation. You can do so by specifying the sort column via `many_many_extraFields` (see example below).

By default the `SortableUploadField` assumes that the sort-column is named `SortOrder`. If you want to use another field-name (for example `Sort`), you have to explicitly set it:

```
SortableUploadField::create('Files')->setSortColumn('Sort');

```

Example setup for many\_many
----------------------------

[](#example-setup-for-many_many)

Let's assume we have a `PortfolioPage` that has multiple `Images` attached.

The `PortfolioPage` looks like this:

```
use SilverStripe\Assets\Image;
use SilverStripe\Forms\FieldList;
use Bummzack\SortableFile\Forms\SortableUploadField;

class PortfolioPage extends Page
{
    // This page can have many images
    private static $many_many = [
        'Images' => Image::class
    ];

    // this adds the SortOrder field to the relation table.
    // Please note that the key (in this case 'Images')
    // has to be the same key as in the $many_many definition!
    private static $many_many_extraFields = [
        'Images' => ['SortOrder' => 'Int']
    ];

    public function getCMSFields()
    {
        $this->beforeUpdateCMSFields(function (FieldList $fields) {
            $fields->addFieldToTab('Root.Main', SortableUploadField::create(
                'Images', $this->fieldLabel('Images')
            ));
        });

        return parent::getCMSFields();
    }
}
```

Once this has been set up like described above, then you should be able to add images in the CMS and sort them by dragging them (use the handle on the left).

Templates
---------

[](#templates)

Sorting the Files via a relation table isn't easily achievable via a DataExtension. This is why it's currently up to the user to implement a getter that will return the sorted files, something along the lines of:

```
// Use this in your templates to get the correctly sorted images
public function SortedImages()
{
    return $this->Images()->Sort('SortOrder');
}
```

And then in your templates use:

```

  $ScaleWidth(500)

```

Alternatively, you could simply use the sort statement in your template, which will remove the need for a special getter method in your page class.

```

  $ScaleWidth(500)

```

Many Many Through
-----------------

[](#many-many-through)

The module supports editing many many through lists as well. The advantage of using `many_many through` is, that your relations can be versioned properly.

### Example Setup

[](#example-setup)

Here's an example setup with the same `PortfolioPage` as above, but now using `many_many through` instead. If this seems unclear, please also consult the [official documentation](https://docs.silverstripe.org/en/4/developer_guides/model/relations/#many-many-through-relationship-joined-on-a-separate-dataobject).

First, the `PortfolioPage` class:

```