massimo-cassandro / js-file-uploader

HTML5 Async File Uploader
https://massimo-cassandro.github.io/js-file-uploader/demo
MIT License
2 stars 3 forks source link

Bug with sort order? #39

Open youradds opened 1 month ago

youradds commented 1 month ago

Hi,

I've almost go this going - but one last hurdle I can't get over. The "fupl_order" doesn't seem to update when you move existing ones. When I upload a new image, its added, and you get:

<input type="hidden" class="fupl-sortable-order" name="file[fupl_item_1721922766793_0][fupl_order]" value="3">

But for existing ones that I've added like so:

window.VARS.current_photos = [{
        "id": "48",
        "rel_id": "48",
        "name": "48",
        "src": "/assets/images/25/1.png",
        "publish": 1,
        "order": 0
    },
    {
        "id": "49",
        "rel_id": "49",
        "name": "49",
        "src": "/assets/images/25/2.png",
        "publish": 1,
        "order": 1
    },
    {
        "id": "50",
        "rel_id": "50",
        "name": "50",
        "src": "/assets/images/25/3.png",
        "publish": 1,
        "order": 2
    }
    ];

window.FileUploader({
                selector    : '#drop-area',
                options: {
                    uploader_url: '/cgi-bin/admin/upload.cgi',
                    multiple: true,
                    filetype: "img",
                    sortable: true,
                    values: window.VARS.current_photos,
                },

});

When you move them, they do move ok in the page - but the fupl_order hidden input isn't updated (it stays at what it was already). Am I missing something?

youradds commented 1 month ago

In fact, it doesn't seem to work even for newly uploaded files either. The code:

    // end dragging
    fupl_item.addEventListener('dragend', function(e) {

console.log("in drag end '" + e.dataTransfer.getData('text') + "'");

      if( e.dataTransfer.getData('text') === 'fupl-sorting' && !uploader_is_disabled) {
        fupl_options.element.classList.remove(classes.sorting_class);
        resetAll();

        //console.dir(item);

        // order variable
        fupl_options.instance_result_wrapper.querySelectorAll('.fupl-sortable-order').forEach((item,idx) => {
          item.value = idx;
        });
      } else {
        console.log("WTF");
      }

    }, false);
  } // end add_sortable_events

This returns an empty string:

console.log("in drag end '" + e.dataTransfer.getData('text') + "'");

I get:

in drag end ''

If I comment out:

if( e.dataTransfer.getData('text') === 'fupl-sorting' && !uploader_is_disabled) {
....
}

Then it works fine, and updates the sort order. Maybe a bug? Or am I misusing it?

Cheers

Andy

massimo-cassandro commented 1 month ago

It could be a bug. The sort option is a feature that I haven't used much myself, I don't remember having problems, but there could be. If you want, make a pull request and I'll check it better, but I fear that before September it won't be possible...

youradds commented 1 month ago

No rush. For now, I have just commented out those lines. I'm not too sure why it isn't set. I can see this runs:

fupl_item.addEventListener('dragstart', function(e) {

and that sets:

        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text', 'fupl-sorting');

But in fupl_item.addEventListener('drop', function(e) {, then e.dataTransfer.getData('text') is empty.

massimo-cassandro commented 1 month ago

At this point, I wonder if it would be better to start the complete rewrite I have planned. I will decide after the summer...