I have been having trouble trying to add dropzone with other input fields on the same form but finally i have managed to acplish it. The problem I have currently is that the dropzone field is not reponsive on click or drag and get this error "Uncaught TypeError: $(...).dropzone is not a function" in my console. Below is my code:
<link href=".0.1/dropzone.css" rel="stylesheet" />
<link href=".0.1/min/basic.min.css" rel="stylesheet" />
<script src=".11.1/jquery.min.js"></script>
<script src=".0.1/dropzone.js"></script>
{!! Form::open([ 'action'=>'MainController@uploadCar', 'files' => true, 'enctype' => 'multipart/form-data']) !!}
<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
<div class="col-md-6">
<label class="required">Location</label>
<input type="text" class="full-col" name="location">
</div>
{!! Form::close() !!}
<script type="text/javascript">
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
$("div#my-awesome-dropzone").dropzone({
url: "/uploadcar"
});
});
</script>
Assistance will be greatly appreciated
I have been having trouble trying to add dropzone with other input fields on the same form but finally i have managed to acplish it. The problem I have currently is that the dropzone field is not reponsive on click or drag and get this error "Uncaught TypeError: $(...).dropzone is not a function" in my console. Below is my code:
<link href="https://cdnjs.cloudflare./ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare./ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/dropzone/4.0.1/dropzone.js"></script>
{!! Form::open([ 'action'=>'MainController@uploadCar', 'files' => true, 'enctype' => 'multipart/form-data']) !!}
<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
<div class="col-md-6">
<label class="required">Location</label>
<input type="text" class="full-col" name="location">
</div>
{!! Form::close() !!}
<script type="text/javascript">
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
$("div#my-awesome-dropzone").dropzone({
url: "/uploadcar"
});
});
</script>
Assistance will be greatly appreciated
Share Improve this question asked Aug 21, 2017 at 14:48 TovoTovo 632 gold badges3 silver badges9 bronze badges 2- check this – Durga Commented Aug 21, 2017 at 14:52
- Durga I have gone through the link that you have provided but still havent been able to solve my problem – Tovo Commented Aug 21, 2017 at 14:58
3 Answers
Reset to default 3A little late for the party... hope help someone. From Dropzone.js... try to use:
// Dropzone class:
var myDropzone = new Dropzone("div#my-awesome-dropzone", { url: "/uploadcar"});
instead of:
$("div#my-awesome-dropzone").dropzone({
url: "/uploadcar"
});
I had the same problem (in a different scenario) and it worked for me
When looking to the related javascript file on the given address below I see that the functions with name "dropzone" start with uppercase letter:
https://cdnjs.cloudflare./ajax/libs/dropzone/4.0.1/dropzone.js
So, first be sure that there is no version problem regarding to the usage of the function. Then, try to use the related function with uppercase as shown below:
jQuery(document).ready(function() {
$("div#my-awesome-dropzone").Dropzone({
url: "/uploadcar"
});
});
try to call Dropzone after including it and put it inside jquery document ready
$(document).ready(function() {
$("div").click(function() {
// call dropzone here
});
});