I'm encountering an issue with the dropify plugin where the data-allowed-file-

While using the dropify library to style file upload elements in my form, I ran into an issue with the data-allowed-file-extensions parameter not working as expected. Despite specifying allowed file extensions like "png jpg jpeg", the validation for input file extensions is not functioning properly. Has anyone encountered a similar issue when working with dropify before?

Here is the code for my input field - it currently accepts files of any extension.

 <input type="file" name="thumbnail_2"  class="dropify" id="thumbnail_2" data-allowed-file-extensions="png jpg jpeg" data-max-file-size="1M" >
jqueryhtmlfile-uploaddropify

Answer №1

To resolve this issue, make sure to update your dropify.min.js or dropify.js to the most recent version available at https://github.com/JeremyFagis/dropify

It is likely that you are currently using an outdated version that does not include the file-extensions feature.

Answer №2

For a solution, you can check out this demo link

<div class="file-loading">
    <input id="input-b7" name="input-b7[]" multiple type="file" class="file" data-allowed-file-extensions='["csv", "txt"]'>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with div not updating after successful ajax request, troubleshoots fine on initial request but not subsequent ones

I have coded a livesearch feature in my header.php file. This livesearch functionality includes an 'Add to Cart' button for users to easily add products directly from the search results. Additionally, I have a Cart section in the header where the ...

phpjqueryajax

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

Choose a numeric value and then adjust it to display with exactly two decimal places

My goal is to create a code that achieves the following tasks: Add an ID to every nth child Round the number in each nth child to 2 decimal places Prefix the numbers with a pound sign (£) Loop through until all the nth children in a table are processed ...

javascriptjquery

Creating a custom script for a search field that retrieves information from an XML document

Attempting to create a script that iterates through an XML file, the provided code currently displays alerts but fails to show information when a valid value is entered into the search field. However, upon removing the error checks and keeping the final ...

javascripthtml

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

javascripthtmljqueryif-statementtext

Loading jQuery on an ajax request

The loader is working with the code now, but it is not replacing and calling the URL. The ajax url call should be placed within searchable. <button onclick="myFunction()">LOAD</button><br /><br /> <div class="spinner bar hide" ...

javascriptphpjqueryhtmlajax

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

javascriptjqueryhtmlradio-buttonradio-group

How can I delete a video on mobile in WordPress?

Looking for some assistance with my webshop www.spidercatcher.dk. I'm trying to have a background video display only on PCs, while showing a still photo on phones and tablets. I've tried using a poster tag but I can't seem to scale it proper ...

htmlcsswordpresswoocommerce

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

javascriptjqueryhtmlcssnav

Insert HTML code that is activated when the selection is modified

I have a simple dropdown menu in my HTML code. HTML <select name="breed" onchange="breedChanged()"> <?php while ($row = gdrcd_query($result, 'fetch')){ ?> <option value="<?php echo $row['id_breed']; ?& ...

javascripthtml

Saving and accessing AJAX XML responses in sessionStorage

I have encountered an issue with storing XML response from ajax into sessionStorage. Despite successfully setting the data, I am unable to retrieve it. $.ajax({ url: '/webservice.svc/getProfile', data: { "memberId": $(authenticat ...

jqueryajaxxml

Issue with the table background in Internet Explorer

My website displays a table with a background image that appears normal in FF and Chrome, but not in IE. The background image seems to shift and produce strange results. Can anyone here help me figure out what's causing this issue? Please refer to the ...

csshtmlinternet-explorer

Design and styling with HTML5 and CSS

Having a small issue with my code as I venture back into coding after a long hiatus, resulting in me forgetting some basics. Currently, I am attempting to create a simple HTML layout. Upon inspecting the page, I noticed that it appears slightly longer tha ...

htmlcss

Java Library for Converting HTML to Textile Format

I have a requirement to convert a String from HTML format to Textile format. After researching various libraries such as Textile4J, Textile-J, JTextile, and PLextile, I found that none of them offer the specific functionality I need. Although they do prov ...

javahtmltextile

How to easily upload zip files in Angular 8

Currently, I am working on integrating zip file upload feature into my Angular 8 application. There are 3 specific requirements that need to be met: 1. Only allow uploading of zip files; display an error message for other file types 2. Restrict the file s ...

htmlangulartypescriptfile-uploadangular8

Validation is performed on the Bootstrap modal form, ensuring that the modal is only loaded after the

In order to provide a better understanding of my website's file structure, I would like to give an overview. The index.php file dynamically adds many pages to my website. Here is the code from index.php: <?php include ('pages/tillBody.php ...

javascriptphpjqueryhtmlajax

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

phphtmlmysqllaravel

What is the best way to integrate AJAX with draggable columns in a Laravel application?

I have successfully integrated draggable functionality for table columns using jQuery Sortable within my Laravel application. I am now facing the challenge of updating the database with the data from these columns through AJAX. Despite researching online ...

javascriptphpjqueryajaxlaravel

Ways to retrieve AJAX variables from outside the AJAX function

$(document).ready(function() { var items; $.ajax({ url: 'item/getProducts', dataType: 'json', success: function(data){ items=data; ...

jqueryajax

Issues with Filterable Jquery Portfolio functionality

Currently utilizing the Filterable Jquery Portfolio This is how my code looks like Check out the View section <div class="genre"> <ul id="filter"> <li class="current"><a href="#">All</a></li> <li><a h ...

jqueryasp.net-mvc-3