Manually remove or re-sort uploaded files list in editor

klingler

Good afternoon (o;

Currently working on modifying the editors upload function where I need to upload 5 images at maximum and display them in a nice manner...furthermore I need to add some sorting function within the editor dialog.

So right now I added first a custom css so I the max. 5 images are displayed better instead of being shifted out at right. Also removed the ugly "delete" button:

.rendered {
  margin-left:  -250px;
  margin-top:  20px;
}

.rendered img {
  width:  150px;
  padding-left:  10px;
  box-shadow: 5px 5px 3px 1px rgba(0, 0, 0, 0.2);
}

div.DTE div.editor_upload.multi ul li button { display:  none; }

Furthermore in the file display function I use this to add custom buttons:

                display: function ( fileId, counter ) {
                    var count = editor.field('files[].id').val().length;
                    var dom = '<img src="https://shop.wedernoch.ch/images/products/' + editor.file( 'files', fileId ).filename + '_200.jpg"">';
                    dom = dom + '<div class="upload-buttons">';
                    if(counter == 0)
                        dom = dom + '<span class="material-icons" style="color: #ccc;">arrow_back</span> ';
                    else
                        dom = dom + '<span class="material-icons">arrow_back</span> ';
                    dom = dom + '<span class="material-icons">delete</span> ';
                    if((count - 1) == counter)
                        dom = dom + '<span class="material-icons" style="color: #ccc;">arrow_forward</span></div>';
                    else
                        dom = dom + '<span class="material-icons">arrow_forward</span></div>';
                    return dom;
                },

Looks like:

So can I now just mess around with the editor.field('files[].id').val() files array?

How would I trigger that when I remove a file or re-sort them that the display is updated and marked for storing when I press OK?

thanks in advance
richard

klingler

Hmm...interesting....

For removing this seems to work fine and automatically calls the display function again (id coming from the display functions counter value):

function delete_picture(id)
{
    console.log("Delete picture: " + id);
    console.log(editor.field('files[].id').val());
    var pictures = editor.field('files[].id').val();
    pictures.splice(id, 1);
    editor.field('files[].id').val(pictures);
    console.log(editor.field('files[].id').val());
}

klingler

Seems to be everything automatically triggered....even when moving array elements for the uploaded files:

function move_picture(fromIndex, toIndex) {
    var pictures = editor.field('files[].id').val();
    var element = pictures[fromIndex];
    pictures.splice(fromIndex, 1);
    pictures.splice(toIndex, 0, element);
    editor.field('files[].id').val(pictures);
}

display: function ( fileId, counter ) {
    var count = editor.field('files[].id').val().length;
    var dom = '<img src="https://shop.example.com/images/products/' + editor.file( 'files', fileId ).filename + '_200.jpg"">';
    dom = dom + '<div class="upload-buttons">';
    if(counter == 0)
        dom = dom + '<span class="material-icons" style="color: #ccc;">arrow_back</span> ';
    else
        dom = dom + '<a href="javascript:move_picture(' + counter + ',' + (counter-1) + ');"><span class="material-icons">arrow_back</span></a> ';
    dom = dom + '<a href="javascript:delete_picture(' + counter + ');"><span class="material-icons">delete</span></a> ';
    if((count - 1) == counter)
        dom = dom + '<span class="material-icons" style="color: #ccc;">arrow_forward</span></div>';
    else
        dom = dom + '<a href="javascript:move_picture(' + counter + ',' + (counter+1) + ');"><span class="material-icons">arrow_forward</span></div></a>';
    return dom;
},

And I can see in the POST request that the sorting of pictures has indeed changed...

Just perfect :-)

colin

Glad we could help

Colin

klingler

Big thing is that with the array modification even the sorting is automatically displayed correctly :-)

Before:

And when I click the right arrow button at the left:

Just magic :-)

nice weekend everybody (o;
richard