search

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
36 stars 3 forks source link

Not uploading .mov files - moved from dropzone/dropzone #8

Closed adit-s closed 1 month ago

adit-s commented 1 month ago

Hello. Thanks for the response at the dropzone/dropzone repository. I thought I'd move it here to keep it in one place.

This is the original question and as you suggested, "Can you try with the maintained fork? https://github.com/NicolasCARPi/dropzone?tab=readme-ov-file#fork" I'm trying to make it work:

Hello. I just started using dropzone.js so don't have too much experience with it, but have a strange problem. I've configured it without any custom options so it should upload all files. It seems to work fine except for files with a .mov extension which don't get uploaded. I'm not sure if there's a setting or something else I'm missing or a "bug." If anyone has a suggestion or knows how to fix it, I'd appreciate the help.

Adit

PS I searched the issues and also the Internet to see if I could find an answer, but didn't.

adit-s commented 1 month ago

Here's my original code and I substituted 

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

but can't make to seem it work. I'm not a JS programmer so learning as I go.

This is the original code; could you suggest how I can make it work with the new libraries? Thanks in advance for your help and maintaining a very useful library.

<!DOCTYPE html>
<html>
<head>
        <title>PHP - Multiple Image upload using dropzone.js</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
        <link href="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone.css" rel="stylesheet">
        <script src="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone-min.js"></script>
</head>
<body>

<div class="container">
        <div class="row">
                <div class="col-md-12">
                        <h2>PHP - Multiple Image upload using dropzone.js</h2>
                        <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                                <div>
                                        <h3>Upload Multiple Image By Click On Box</h3>
                                </div>
                        </form>
                </div>
        </div>
</div>

<script type="text/javascript">
        Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".mov,.jpeg,.jpg,.png,.gif"
    };
</script>

</body>
</html>
adit-s commented 1 month ago

Hi again. I'm not a programmer but was looking for a clean way to have files uploaded with some controls (like size, type, number...) and NicolasCARPi/dropzone seems like a very good approach but I can't seem to make it work cleanly. If you could suggest some straight forward code or point me to a working example, I would appreciate it.

Thanks in advance, Adit

NicolasCARPi commented 1 month ago

Try this:

<!DOCTYPE html>
<html>
<head>
        <title>PHP - Multiple Image upload using dropzone.js</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
        <link href="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone.css" rel="stylesheet">
        <script src="https://unpkg.com/@deltablot/dropzone@7/dist/dropzone-min.js"></script>
</head>
<body>

<div class="container">
        <div class="row">
                <div class="col-md-12">
                        <h2>PHP - Multiple Image upload using dropzone.js</h2>
                        <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                                <div>
                                        <h3>Upload Multiple Image By Click On Box</h3>
                                </div>
                        </form>
                </div>
        </div>
</div>

<script type="text/javascript">
   const dropzone = new Dropzone(".dropzone", { url: "/upload.php",
        maxFilesize:1,
        acceptedFiles: ".mov,.jpeg,.jpg,.png,.gif"
    });
</script>

</body>
</html>
adit-s commented 1 month ago

Hi again. Thanks for the suggestion. Unfortunately, I couldn't get it to work. I guess I'll just have to find a template or when I have some extra time, try to figure it out.

adit-s commented 1 month ago

I found the issue. It wasn't related to dropzone.js, but the limits on the php default configuration limiting the maximum upload file size to 2MB. The fix was to modify the php.ini file to set the following maximums to the desired size: upload_max_filesize post_max_size

Note: The default setting also sets a limit of 20 maximum simultaneous uploads. If you want more, you will need to change it as well.

NicolasCARPi commented 1 month ago

I'm glad you could resolve the issue :)