Dropzone is created but do not show drag and drop box

Question

May be it's a very simple task but there is unexpected behavior in my project!

I'm creating a form and want to use Dropzone in my form inside blade file of my Laravel 10 project.

I added CSS and JS file to my page.

@section('style')
    @parent

{{--    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />--}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/basic.css" type="text/css" />

@endsection

and JS:

@section('scripts')
    @parent

{{--    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>--}}
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

Commented links is because I did test with them too.

When I inspect my form, there's dropzone functions attached to my form:

And this is my js to create dropzone:

    <script type="text/javascript">
        Dropzone.options.solo = { //solo is form id 
            maxFiles: 50,
            acceptedFiles: ".jpeg,.jpg,.png",
            addRemoveLinks: true,
            timeout: 500,
            success: function (file, response) {
                console.log(file, response);
            },
            error: function (file, response) {
                return false;
            },

        };

        // $(()=> {
        //     $('#solo').dropzone({
        //         url: '/some/address'
        //     })
        // })
    </script>

And this is my output:

Do you know whats my problem with this?

Thanks in Advance.

Answer 1

It is really difficult to replicate the problem with the provided code, but I guess it is important that you only include the libraries once and jQuery is included first.

Here is a working example:

Dropzone.options.solo = { //solo is form id 
  maxFiles: 50,
  acceptedFiles: ".jpeg,.jpg,.png",
  addRemoveLinks: true,
  timeout: 500,
  success: function(file, response) {
    console.log(file, response);
  },
  error: function(file, response) {
    return false;
  }
};

form {
  border: solid thin black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<form id="solo" action="/target" class="dropzone">
  <input type="text" name="title">
</form>