EasyUI Forum
March 28, 2024, 08:40:18 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Filebox - Limit Displayed Files by File Extension  (Read 22311 times)
devnull
Sr. Member
****
Posts: 431


View Profile
« on: March 04, 2021, 05:39:04 PM »

Is it possible, that when the filebox is clicked, the list of files that is displayed for selection can be restricted to a specific file extension ??

I know that I can check the filename AFTER selection, but I want to restrict the file extension type that the user can select.

Thanks
Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: March 04, 2021, 10:30:28 PM »

Please set the 'accept' property for the filebox component.

Code:
<input class="easyui-filebox" label="File1:" labelPosition="top" data-options="accept:'application/vnd.ms-excel',prompt:'Choose a file...'" style="width:100%">
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #2 on: March 04, 2021, 11:22:05 PM »

Thanks, but I want to limit to extension type, not mime type i.e *.xyz

Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #3 on: March 05, 2021, 01:07:02 AM »

Please try to use this code.
Code:
<input class="easyui-filebox" label="File1:" labelPosition="top" data-options="accept:'.txt,.docx',prompt:'Choose a file...'" style="width:100%">
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #4 on: March 05, 2021, 04:40:27 PM »

Jarry, thanks, that does NOT work.

in chrome (osx) the finder window that is opened to select a file still shows all files and not only files with the extension set in accepts.

UPDATE

OK, I just checked the generated html, and it appears that even though I have defined the 'accept' param in the javascript def, it does not get added to the <input type="file"> as an attribute, but it does get added to another input generated by the control ??

Code:
   $('#myfile').filebox({
      multiple: false,
      accept:'.xyz',
      onChange: function(nv,ov){
      ... more code
    });

html:
Code:
<input class="easyui-filebox filebox-f textbox-f" id="myfile" accept=".xyz" style="display: none;">
... more code

### Shouldn't this be the input that the accept attribute is attached to ???
<input type="file" class="textbox-value" id="filebox_file_id_6" name="">

If I then manually add the accept attr to the type=file it works as expected, I think this is a bug ?!

Code:
<input type="file" class="textbox-value" id="filebox_file_id_6" name="" accept=".xyz">

I can fix this issue with:

Code:
$('#myfile').next('span.filebox').find('input[type="file"]').attr('accept','.xyz');


« Last Edit: March 05, 2021, 05:17:29 PM by devnull » Logged

-- Licensed User --
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #5 on: March 05, 2021, 07:17:50 PM »

can a patch be applied to fix this issue ??
Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #6 on: March 06, 2021, 06:43:22 AM »

Please look at this example http://code.reloado.com/oqosip3/edit#preview.
The 'accept' property value is attached to the input element.
Code:
<input type="file" class="textbox-value" id="filebox_file_id_1" name="" accept=".txt,.docx" capture="">
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #7 on: March 17, 2021, 01:55:19 AM »

I am using 1.44, maybe this was a bug that was fixed in a later version, but I am unable to upgrade due to all the fixes and customisation we have added ??
Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #8 on: March 18, 2021, 07:32:39 PM »

The 'accept' property is not available in version 1.4.4. Please update the 'jquery.filebox.js' file that is located in the 'plugins' directory to a newer version and then include it on the page.

Code:
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../plugins/jquery.filebox.js"></script>
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!