Dropzone ceased functioning following the transition from version "4.2.0" to "5.7.0" while utilizing jquery version "3.3.1"

Currently, I am loading my libraries in the following way: 

<link href="~/lib/dropzone/dropzone.min.css" rel="stylesheet" />
<script src="~/lib/dropzone/dropzone.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

For implementing Dropzone, I am using the code snippet below: 

var CountFiles = 0;
Dropzone.autoDiscover = false;
jQuery(document).ready(function () {

    Dropzone.autoDiscover = false;

    $("div#myPrincipalDropzone").dropzone({ ...etc.... even another dropzones...

Previously, this setup was functional, but recently I encountered an issue where it shows 'dropzone is not defined.' Additionally, when I explicitly include the libraries in the Index file, I receive an error stating "'Symbol(Symbol.iterator)' is undefined"

I have attempted adding multiple instances of Dropzone.autoDiscover = false; and also experimenting with different syntax for the functions. Any suggestions?

javascriptdropzone

Answer №1

Here is the corrected syntax for the script:

<script type="text/javascript">

var CountFiles = 0;

$(document).ready(function () {

    Dropzone.autoDiscover = false;

    var Drop1 = new Dropzone("div#myPrincipalDropzone", { url: "/Article/UploadFiles",

        paramName: "file",
        maxFiles: 1,
        maxFilesize: 1200,
        maxFileHeight: 840,
        maxFileWidth: 840,
        acceptedFiles: ".png,.jpg",           
        addRemoveLinks: true,
        parallelUploads: 1,
        renameFile: function () {
            let newname = new Date().getTime() + '_' + 'Test';
            console.log("Nombre en RenameFile:" + newname);
            return newname;
        //},

        //init: function (newname) {

            this.on("addedfile", function (file) {

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

You can't send headers to the client in Express after they have already been set

I successfully registered and inserted a record in my MongoDB. However, I encountered an error when trying to log in at the line "!user && res.status(401).json("Wrong User Name");" Cannot set headers after they are sent to the client at new NodeError ...

javascriptnode.jsexpressmongoose

Using Google Maps: How can I trigger an InfoWindow to open by hovering over a link?

Trying to figure out how to make the "info window" on my map pop up when hovering over a corresponding link in the list of points. Currently, you have to click on a point to see the information. Any suggestions on how to achieve this while ensuring that al ...

javascripthtmlgoogle-maps

Checking the Ajax request with an if statement

$("#Submit").click(function(event){ event.preventDefault(); var th = '<tr><th>' + "Business" +'</th><th>' + "Address"+ '</th><th>'+ "Rating" + '</th><th>' + "Da ...

javascriptjqueryajax

The URL in React Router updates as expected, but when attempting to render a component using a button component link

I have encountered a situation similar to the one portrayed in this CodeSandBox example, where I am required to implement react routing within two distinct components. The issue that is perplexing me is that, when I navigate down to either the Profile or ...

javascriptreactjsreact-routermaterial-ui

CreatePortalLink directs users to a payment URL instead of a dashboard

I am currently working on a project that utilizes the Stripe payments extension in conjunction with Firebase. The application is built using Next JS. After a user subscribes, I want to provide them with a tab where they can manage their subscription. The ...

javascripttypescriptfirebasenext.jsstripe-payments

Tips for effectively implementing a curried selector function with the useSelector hook in react-redux

In my project using react-redux with hooks, I encountered a situation where I needed a selector that takes a parameter which is not passed as a prop. Upon checking the documentation, it mentioned: The selector function does not receive an ownProps argum ...

javascriptreactjsreduxreact-reduxreact-hooks

The ESLint rule "eqeqeq" configuration is deemed incorrect

After successfully running eslint with the provided .eslintrc file, I encountered an issue when making a simple change to use 'standard' instead of 'airbnb-base' as the extend: module.exports = { root: true, parser: 'babel-esl ...

javascriptnpmeslint

What is the best way to bind a model to a directive in Angular.js?

I have been experimenting with different methods to create a two-way binding between my directive and repeater, but so far I haven't been successful. Although I have tried various strategies suggested online, the current setup does not pass item.myDat ...

javascriptangularjs

ng-if not working properly upon scope destruction

While working on a isolate scope directive, I encountered an issue. In the link function of this directive, I am compiling an HTML template and then appending it to the body of the document. const template = `<div ng-if="vm.open"></div>`; body ...

javascriptangularjsangular-ng-if

Application with menu design, similar to the layout of google.com on mobile devices

Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...

javascriptandroidjqueryhtmlcss

Troubles with loading images on Node.js, Express, and EJS powered Bootstrap 5 navbar

Currently, I am in the process of creating a website using express/node.js/ejs. However, I am facing challenges when it comes to constructing a navbar with Bootstrap 5.0. In my app.js file, I have included express.static: app.use(express.static('publi ...

javascripthtmlexpressejsbootstrap-5

Enhancing Kendo Grid with Checkbox Columns

I am facing a situation with my kendo grid where I need to insert two checkbox columns in addition to the existing set of columns. <script id="sectionPage" type="text/kendo-tmpl"> @(Html.Kendo().Grid<SectionPageModel>() .Na ...

javascripthtmlasp.net-mvckendo-uikendo-grid

Get Subject Alternative Name from X.509 in a Node.js environment

Having trouble retrieving the SAN from a DoD Smart Card, as the subject alternative name is returning othername:<unsupported>. I have not been able to find many examples on how to parse this information. I would have thought that X509 li in node woul ...

javascriptnode.jssmartcardx509pki

The connection timed out when attempting to send a POST request from the client side to the API

After setting up a basic https response to send JSON data from the client to an API endpoint named /api on my a2 web server, I encountered an issue where the connection was being refused and no logs were appearing in the terminal accessed through SSH. The ...

javascriptnode.jshttpbackendweb-development-server

The function of the 'Class' attribute is not functioning properly

I am currently working on a search field with a drop-down menu that determines the type of data being searched. This, in turn, dictates the input type for the search field. For example, if I am searching by "name" or "ID number", the input type is set to t ...

javascriptjqueryhtml

Altering the color of a Fabulous Icon in real-time

I'm having trouble changing the color of an Awesome Icon with this code I created. Instead of getting the desired color, I am getting 'undefined' as a result. <script type="text/javascript"> function changeAIColor(idName) { alert ...

javascriptjqueryhtmlthymeleaffont-awesome

Whenever I try to run npm start, my webpack is not able to locate my index.html page

Recently delving into the world of node.js and its packages, I initiated by executing npm init to lay out the package.json structure shown below: { "name": "test", "version": "1.0.0", "description": & ...

javascriptnode.jsnpmwebpack

The HTML form submission button fails to submit the form and instead just refreshes the page

I'm struggling to get the save button working on my Chrome Extension settings page. The .click() event doesn't seem to be activating at all. I've included my code below. Should I use the commented out button instead (see below)? HTML <! ...

javascriptjqueryhtmlforms

What is the best way to transfer variables defined in PHP to JavaScript?

Can the variables previously defined in JavaScript be used in the line that starts with $sql =? var southWestLat = map.getBounds().getSouthWest().lat(); var southWestLng = map.getBounds().getSouthWest().lng(); var northEastLat = map.getBounds().getNort ...

phpjavascript

Expand the accordion to reveal all the content

I'm facing an issue with my accordion where a scrollbar appears in every content section. To fix this, I tried setting overflow: hidden in the CSS: .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: hidd ...

javascriptjqueryhtmlcssaccordion