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:
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):
Any help would be much appreciated
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:
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