NicolasCARPi / dropzone

Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.
http://www.dropzone.dev/js
Other
49 stars 4 forks source link

Problem with CDN and jQuery. #12

Closed JG24 closed 1 month ago

JG24 commented 1 month ago

Hi! There is an issue in your code where you specify paths to the CDN. Also, if you have the time and interest, check why your library doesn't load when you're using jQuery (specifically jquery-3.7.1.min.js) on the page. I am getting the following error:

Uncaught TypeError: this.options is undefined value dropzone.ts:1729 u dropzone.ts:104

I should add that when I change these two lines (the path to .js and .css) to the original version 6 (beta), everything works.

NicolasCARPi commented 1 month ago

Dropzone.ts is not part of this project, which is not a typscript project. So I'm not sure what you're talking about. Also, you can't just write "hey there is an issue in your code" but not point exactly to the issue. What do you mean by "where you specify paths to the CDN", where is the issue????

JG24 commented 1 month ago

Okay, I'm sorry, I rushed. Let's start with the error related to the CDN. In the repository description, you have an example:

Not using a package manager or bundler?

Use the standalone files like this:

<script src="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone-min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone.css" type="text/css" />

And i get message: Error: NetworkError when attempting to fetch resource. But that's the least of my problems. The bigger problem is in my script, where I only replaced the version from the original Dropzone with yours - hoping that it would work.

Now, I'll paste a piece of code and if you could be so kind as to take a second to check it, you might understand what I'm talking about.

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dropzone test</title>
        <link rel="stylesheet" href="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone.css" type="text/css" />
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
        <script src="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone-min.js"></script>
    </head>
    <body>

        <div id="filesDropzone"></div>

        <script>
            Dropzone.autoDiscover = false;

            const dropzone = new Dropzone("#filesDropzone", {
                url: "upload.php",
                autoProcessQueue: false,
                paramName: "file",
                acceptedFiles: ".jpg,.jpeg,.png,.gif,.bmp,.heic",
                addRemoveLinks: true,
                maxFiles: 100,
                parallelUploads: 100,
                dictDefaultMessage: "Click here to select files to upload.",
            });
        </script>

    </body>
</html>

If you need anything else, just let me know. Everything is happening on the latest version of Firefox, on a Windows computer.

NicolasCARPi commented 1 month ago

It seems there is an issue with the freshly released 7.1.3. Try with this: https://unpkg.com/@deltablot/dropzone@7.1.2/dist/dropzone-min.js.

NicolasCARPi commented 1 month ago

Okay I found the issue: it would only manifest if using an id attribute to grab the element. You can try with 7.1.4 too!