Select image/file on click

Hi,

We are making use of the file explorer to display thumbnails of images. We have the checkbox enabled so that the user can select the image. Is there a way for us to enable the user to select the image just by clicking on the image. We've tried to hookup an onclick event but it seems the file explorer unselects the item when a different image is clicked.

        $('#noteImagesExplorer #noteImagesExplorer_tileView img').off('click').on('click', function (args) {
            var containerItem = $(args.target).closest('li');
            var itemText = containerItem.find('.e-file-info').text();

            var currentSelectedItems = $('#noteImagesExplorer').data('ejFileExplorer').model.selectedItems;

            var exists = false;
            for (var i = 0; i < currentSelectedItems.length; i++) {
                if (currentSelectedItems[i] == itemText) {
                    exists = true;
                    break;
                }
            }

            if (!exists) {
                currentSelectedItems.push(itemText);
                $('#noteImagesExplorer').data('ejFileExplorer').option('selectedItems', currentSelectedItems);
            }
        });

Please advise.

Thank you

3 Replies 1 reply marked as answer

KR Keerthana Rajendran Syncfusion Team August 31, 2020 09:28 AM UTC

Hi Malcolm, 

Thanks for contacting Syncfusion support.  

Based on your code , we suspect that you need to choose multiple images at same time in FileExplorer. You can use “Ctrl + mouseclick” on images to make multiple selection. Please refer to the following image 

 

To more details about FileExplorer, refer to the following links 

Demo 
UG Documentation 
API 

If we have misunderstood, kindly share us some details on the following to proceed further.  

  1. Rendering code of FileExplorer along with details on where the currently provided code(in your update) is executed.
  2. Whether you need to select multiple items programmatically through code without user interaction?
  3. Is there any specific reason to make multiple selection on single click without using “Ctrl” keys?

Please let us know if you need any further assistance.  

Regards, 
Keerthana.  



MV Malcolm van Staden August 31, 2020 09:42 AM UTC

Hi,

Thank you for the response.

We are using the file explorer specifically to select multiple files. So we want the default click behaviour to be selection. 

Is this possible?


MK Muthukrishnan Kandasamy Syncfusion Team September 2, 2020 10:22 AM UTC

 
Hi Malcolm, 
 
We have validated your requirement in File Explorer control. For achieving your requirement in EJ File Explorer control, we have overridden the default behavior.  Please refer to the below code block. 
 
ej.FileExplorer.prototype._upDatePathFromTileView = function (event) { 
            var $target = $(event.target); 
            if (event["pointerType"] == "touch" && this._customPop != null && this.model.allowMultiSelection) { 
                if (!this._customPop.is(":visible")) 
                    this._customPop.show(); 
                if (this._customPop.is(":visible") && !this._customPop.find(".e-rowselect").hasClass("e-spanclicked")) { 
                    var offset = $target.offset(); 
                    this._customPop.offset({ left: offset.left - 40top: offset.top - 40 }); 
                } 
                else 
                    event.ctrlKey = true; 
            } 
            else 
                this._hidePopup(); 
            if (!(this._searchbar && $.trim(this._searchbar.val()))) 
                this._suggestionItems = []; 
            if (!event.innerEvent) 
                this._lastItemIndex = $(event.currentTarget).index(); 
            this._addFocus(this._tileViewWrapper); 
            this._isTreeNode = false; 
            var proxy = this; 
            var checkboxObj; 
            if(this.model.showCheckbox){ 
                checkboxObj = $(event.target).closest(".e-tilenode").find(".e-tile-checkbox").data("ejCheckBox"); 
                if ($(event.target).hasClass("e-chk-image")) 
                    event.ctrlKey = this.model.showCheckbox; 
            } 
            if (!event.shiftKey) { 
                var _unselectedItem = []; 
                if ($(event.currentTarget).hasClass("e-active")) { 
                    $(event.currentTarget).removeClass("e-active").attr("aria-selected"false); 
                    checkboxObj && checkboxObj.option("checked"false); 
                } 
                else { 
                    $(event.currentTarget).addClass("e-active").attr("aria-selected"true); 
                    checkboxObj && checkboxObj.option("checked"true); 
                } 
                var nodeType = "File"_childItems_isUpdate = true; 
                this._toDownload = this._toUpload = this._toEdit = this._toEditContents = this._toRead = this._toCopy = true; 
                var name = $(event.currentTarget).find(".e-file-name").text(); 
                if (this._currentPath != this._originalPath) { 
                    this._currentPath = this._originalPath; 
                } 
                var items = this._suggestionItems.length ? this._suggestionItems : this._fileExplorer[this._originalPath]; 
                if (items) { 
                    for (var i = 0i < items.lengthi++) { 
                        if ((this._suggestionItems < 1 && items[i].name == name) || (this._suggestionItems.length > 0 && items[i].filterPath == $(event.currentTarget).attr('data-parent-path') && items[i].name == name)) { 
                            if ($(event.currentTarget).hasClass("e-active")) { 
                                this._sizeInByte += items[i].sizeInByte; 
                                this._selectedTileItems.push(items[i]); 
                            } else if (event.ctrlKey) { 
                                this._sizeInByte -= items[i].sizeInByte; 
                                var index = $.inArray(items[i], this._selectedTileItems); 
                                if (index > -1) { 
                                    _unselectedItem.push(this._selectedTileItems[index]); 
                                    this._selectedTileItems.splice(index1); 
                                } 
                            } 
                            break; 
                        } 
                    } 
                } 
                $.each(this._selectedTileItemsfunction (indexvalue) { 
                    if (!value.isFile) { 
                        proxy._update = true; 
                        _isUpdate = true; 
                        proxy._toDownload = true; 
                    } 
                    proxy._updateAccessValue(value); 
                }); 
 
                this._FilteredFiles = []; 
                for (var i = 0i < this._selectedTileItems.lengthi++) { 
                    this._FilteredFiles.push(this._selectedTileItems[i].filterPath + this._selectedTileItems[i].name) 
                } 
 
                if ($(event.currentTarget).find(".e-fe-folder").length) { 
                    nodeType = "Directory"; 
                    if ($(event.currentTarget).hasClass("e-active")) 
                        this._updateNode(name); 
                } 
                this._currntNode = $(event.currentTarget); 
                if (this._currntNode.attr("data-parent-path")) {                     
                    name = this._currntNode.attr("data-parent-path").replace(this._originalPath"") + name; 
                }                 
                this._selectedContent = name; 
                if ($(event.currentTarget).hasClass("e-active")) 
                    this._selectedItems.push(this._selectedContent); 
                else { 
                    var index = $.inArray(this._selectedContentthis._selectedItems), _unselectedContent = this._selectedContent_nodeType = nodeType; 
                    if (index > -1) 
                        this._selectedItems.splice(index1); 
                    if (this._selectedTileItems.length > 0) { 
                        this._selectedContent = this._selectedItems[this._selectedItems.length - 1]; 
                        nodeType = this._selectedTileItems[this._selectedTileItems.length - 1].type; 
                        if (nodeType == "Directory") 
                            this._updateNode(this._selectedContent); 
                    } 
                }                 
                if ((!this._startNode) || this._selectItems.length == 0 || this._selectItems.length == this._selectedItems.length) { 
                    if (!this._selectItems || this._selectItems.length <= 0) 
                        this._startNode = null; 
                    this._selectedItemsTag && this._selectedItemsTag.html((this._selectedItems.length > 0 ? (this._selectedItems.length + " " + (this._selectedItems.length > 1 ? this._getLocalizedLabels("Items") : this._getLocalizedLabels("Item")) + " " + this._getLocalizedLabels("Selected")) : "") + (this._sizeInByte ? (_isUpdate ? "  " + this._bytesToSize(this._sizeInByte) : "") : "")); 
                    this._nodeType = nodeType; 
                    this._setFilteredItemsName(); 
                    this.model.selectedItems = this._filteredItemsName; 
                    var args = { name: this._selectedItemsnames: this._selectedItemspath: this.model.selectedFoldernodeType: this._nodeTypeselectedItems: this._getSelectedItemDetails(this.model.selectedFolderthis._filteredItemsName) }; 
                    this._urlTag && this._urlTag.find("input").val(args.url); 
                    this._nameTag && this._nameTag.find("input").val(args.name); 
                    this._updateSelectionDetails(this._nodeType); 
                    if (this._isClicked) 
                        if ($(event.currentTarget).hasClass("e-active")) { 
                            if (this._initializeFlag) { 
                                this._trigger("select"args); 
                            } 
                        } 
                        else { 
                            var args = { name: _unselectedContentnames: [_unselectedContent], path: this.model.selectedFoldernodeType: _nodeTypeunselectedItem: _unselectedItem[0], unselectedItems: _unselectedItem }; 
                            this._trigger("unselect"args); 
                        } 
                    this._selectItems = []; 
                }                 
            } else { 
                this._selectItems = []; 
                if (!this._startNode) 
                    this._startNode = this._currntNode; 
                var startIndex = $(event.currentTarget).index(); 
                var endIndex = this._startNode.index(); 
                if (startIndex > endIndex) { 
                    var temp = startIndex; 
                    startIndex = endIndex; 
                    endIndex = temp; 
                } 
                var items = this._tileContent.find(".e-tilenode"); 
                items.removeClass("e-active").attr("aria-selected"false); 
                for (var i = startIndex ; i <= endIndexi++) { 
                    this._selectItems.push($(items.get(i)).find(".e-file-name").text()); 
                } 
                this._setSelectedItems(this._selectItems); 
            } 
        } 
 
 
We have prepared sample to meet your requirement, please refer to the below link for the sample. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


Marked as answer
Loader.
Up arrow icon