CODEWITHSUNDEEP
javascripthtmlextjsextjs7-classicextjs6.5.1
scott f
scott f

Reputation: 35

Multi-Select FileField is not returning list of files based in the order I selected them

I am trying to upload multiple images at once using the filefield xtype but when I get the list of selected files, the list is not in the order I selected them in. It looks to be automatically sorting them based on some other criteria. Is there a way to get list of file names based on the order I selected them?

xtype: 'filefield',
id: 'figureFileUpload',
buttonText: 'Browse Files From Device',
handler: 'onBrowseFiles',
buttonOnly: true,
multiple: true,
height: 45,
listeners: {
    change: 'figureFilefieldChange',
    render: function (me, eOpts) {
        var el = document.getElementById(me.id+'-button-fileInputEl');
        if(me.multiple) {
            el.multiple = true;
        }
    }
}

Upvotes: 1

Views: 53

Answers (1)

Dinkheller
Dinkheller

Reputation: 5054

You have to grab the files and store them yourself.

Here is an example:

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'fieldset',
        title: 'My Uploader',
        items: [{
            xtype: 'filefield',

            /**
             * @cfg {String[]} fileArray
             * Array to store your files in order of choosing
             */
            fileArray: [],
            
            buttonText: 'Browse Files From Device',
            buttonOnly: true,
            multiple: true,
            
            listeners: {
                change: function (fileField) {
                    // => store the new file
                    fileField.fileArray.push(fileField.getValue());

                    // for Demo only
                    Ext.Array.each(
                        fileField.fileArray,
                        function(filePath) {
                            console.log(filePath)
                        }
                    );
                }
            }
        }]
    }]
});

If you are looking for the multiple functionality, here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3rtk

Upvotes: 0

Related Questions