2

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!

Alerra
  • 1,479
  • 11
  • 25

1 Answers1

3
<!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>
kblau
  • 2,094
  • 1
  • 8
  • 20
  • The only major difference between us is that I didn't have the `enctype="multipart/form-data"` part of the form element, so I added that but the same result persists. Although, I greatly appreciate the help and I am very open to other ideas you may have. – Alerra Jul 17 '17 at 21:28
  • @Alerra I reposted. Can you please tell me if I can compare my debugging to yours? – kblau Jul 17 '17 at 21:54
  • Yea, how should I get you my code? (I'm new to this site) – Alerra Jul 17 '17 at 21:56
  • You should just keep editing your question. You can start by editing your question for the line
    and take out the dash in id.
     – kblau Jul 17 '17 at 21:58
  • Got it, will do that in a sec. Also, your test code as the javascript all contained in the head of the html. My JS is referenced in the body to another JS. Will this make a difference? – Alerra Jul 17 '17 at 22:01
  • I am referencing jquery and using $(function(){}); to make sure DOM elements load. Your way is similar. If we can agree to do as I posted that would be good. We can analyze this to see if it is needed after we get it working. – kblau Jul 17 '17 at 22:03
  • Do I need to use JQuery for this? Or is what I have okay? Everything else is working fine as is, so if possible I would like to leave jQuery out. – Alerra Jul 17 '17 at 22:05
  • Ok, got the jQuery stuff in there. Now, the SVG loads about halfway and then I get the following error: `dropzone.js:1503 POST http://localhost:8000/ net::ERR_CONNECTION_ABORTED` – Alerra Jul 17 '17 at 22:11
  • Ok, I copied exactly what you have and ran it and got the same thing. One thing that may be the problem is that the svg is quite hefty in size relative to the png version (svg is 0.7 mb), but I am not sure if that would cause it to give the "ERR_CONNECTION_ABORTED" error, especially because the max file size was explicitly set to 1000mb. – Alerra Jul 17 '17 at 22:20
  • Took out your add eventlistener on the document to get it work. Listening on a document is a bad idea anyways, and you don't need it. Took out the jquery. The file name parameter does not work in dropzone and you don't need it anyway. Please exactly as I posted and let me know what you get. – kblau Jul 17 '17 at 22:23
  • Please go to your picture link and do a save as .png to your file system and tell me what you get. – kblau Jul 17 '17 at 22:25
  • So the png uploads fine (progress bar fills up all the way), but then I get an error that says: `dropzone.js:1503 POST http://localhost:8000/ 501 (Unsupported method ('POST'))` Any ideas? – Alerra Jul 17 '17 at 22:26
  • I am using c# and you are using php or someother language. I don't know why you are getting 501 error. I searched quick and found that your server my not support post. https://stackoverflow.com/questions/17431515/getting-a-501-error – kblau Jul 17 '17 at 22:32
  • Ok, I can probably figure out why that error is happening. Would you know of any reason why the larger svg file won't upload? – Alerra Jul 17 '17 at 22:34
  • Glad you figured out posting error. Was going to ask you to run a simple post. Now, I changed a file name of mine to have an svg extension and I successfully uploaded 3mb file, which is larger than what you specified. The problem would be in the setting that allows you to set the bytes allowed in a post. For example, for me it is: https://stackoverflow.com/questions/288612/how-to-increase-the-max-upload-file-size-in-asp-net "xxx" is in KB. The default is 4096 (= 4 MB). – kblau Jul 17 '17 at 22:46
  • I do not have a "web.config" file in my project. Can I simply make one and have it contain this property or is it located somewhere else? – Alerra Jul 17 '17 at 22:50
  • Can you please tell me what language you are using. Your question mentions javascript, html, and dropzone.js, but I need to know the server code. Thanks. – kblau Jul 17 '17 at 22:56
  • Actually, I haven't really gotten there yet, but I will be using PHP most likely. – Alerra Jul 17 '17 at 22:58
  • Not to rush you, but I found this link that seems really useful. Perhaps you can put some time aside for this : https://www.w3schools.com/php/php_file_upload.asp – kblau Jul 17 '17 at 23:08
  • Ok, I think I can take it from here. Thanks so much! – Alerra Jul 17 '17 at 23:10
  • *20 reputation yet, so the website wont let me upvote. However, once I do get there, I will come back to this and upvote. You were really helpful! – Alerra Jul 18 '17 at 04:45
  • Also, you could boost my reputation if you upvoted my question, then I could upvote your answer. – Alerra Jul 18 '17 at 18:44