CODEWITHSUNDEEP
javascripthtmldropzone.js
Alerra
Alerra

Reputation: 1519

Dropzone files not processing

I am trying to get a simple Dropzone box working, and I seem to have everything set up, although the file I am trying to upload never gets uploaded. I do not get any errors, however, so I do not really know where to look. Here is the pertinent parts of my code:

HTML to make the Dropzone form

<div class="col-lg-6">
<form action="/" method="post" class="dropzone needsclick dz-clickable" 
    id="demoUpload">
  <div class="dz-message needsclick">
    "Drop SVG Files Here or Click to Upload"
    <br>
    <span class="note needsclick">
      "Only SVG filetypes are accepted. Rasterized img filetypes coming soon."
    </span>
  </div>
</form>
</div>

JS for Dropzone element

    Dropzone.options.demoUpload = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 1000, // MB'
    maxFiles: 1,

    init: function() {
      this.on("addedfile", function(file) { alert("File added.");});
    }
  };

The dropzone shows up fine in browser, but then when I drag a file onto it, it appears as if the file is in the dropzone but the thumbnail only shows half of my image and the progress bar stays at zero. Here is what it looks like.

Screenshot of what the Dropzone looks like after I drag in a file

File I am trying to upload

(The file I am trying to upload is really a .svg file but I can't attach that in this post so I thought the .png would be adequate. They look identical.)

If anyone could help me figure out what I need to change to make the file upload properly, I would be very grateful. Thank you!

Upvotes: 2

Views: 1730

Answers (1)

kblau
kblau

Reputation: 2107

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexStackOverflow101</title>
    <link href="~/Content/dropzone.css" rel="stylesheet" />
    <style type="text/css">
        .dropzone {
            border: 2px dashed #0087F7;
            border-radius: 5px;
            background: white;
        }
    </style>
    <script src="~/Scripts/dropzone.js"></script>
</head>
<body>
    @*changed the id*@
    <form action="/" class="dropzone" enctype="multipart/form-data" id="demoUpload" method="post">
        <div class="dz-message needsclick">
            "Drop SVG Files Here or Click to Upload"
            <br>
            <span class="note needsclick">
                "Only SVG filetypes are accepted. Rasterized img filetypes coming soon."
            </span>
        </div>
    </form>
    <script type="text/javascript">
        //YOU have a dash in the form id, please change it
        Dropzone.options.demoUpload = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 1000, // MB'
            maxFiles: 1,

            init: function () {
                this.on("addedfile", function (file) { alert("File added."); });
            }
        };
    </script>
</body>
</html>

Upvotes: 3

Related Questions