Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dropzone Issues

Status
Not open for further replies.

edd92

Programmer
Aug 8, 2020
1
GB
Hey,

I am pretty new to javascript and cannot get a dropzone function to upload.
I would like the drag and drop feature of dropzone in my form but would like to upload images when the complete form is submitted. The form also has various text fields that the user can fill in.

At the moment I have a dropzone in my form that allows me to drag image into it. Once the image is dragged into it, it shows this:
Untitled-1_zj4vub.jpg


With an error of this from console;
dropzone.js:2980 GET 403 (Forbidden)

I have checked the user permissions on folder user_uploads and it is set to 777.

Here is my current code (i have included the dropzone.css in the header of the page):
Code:
<div class="row">
                              <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
                                 <label class="control-label">Photos for your ad <small>Please add images of your ad. (350x450)</small></label>
                                 <div id="dropzone" class="dropzone"></div>
                              </div>
                           </div>
 <script type="text/javascript">
      "use strict";
      <!-- DROPZONE JS  -->
      <script src="js/dropzone.js" ></script>

      <script src="js/form-dropzone.js" ></script>
        /*--------- create remove function in dropzone --------*/
         Dropzone.autoDiscover = false;
         var acceptedFileTypes = "image/*"; //dropzone requires this param be a comma separated list
         var fileList = new Array;
         var i = 0;
         $("#dropzone").dropzone({
         addRemoveLinks: true,
         maxFiles: 5, //change limit as per your requirements
         acceptedFiles: '.jpeg,.jpg,.png,.gif',
         dictMaxFilesExceeded: "Maximum upload limit reached",
         acceptedFiles: acceptedFileTypes,
         url: "user_uploads",
         dictInvalidFileType: "upload only JPG/PNG",
         init: function () {
               // Hack: Add the dropzone class to the element
            $(this.element).addClass("dropzone");
           }
         });
</script>

Any help would be much appreciated
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top