dropzone using a form in laravel - php

Question

I added dropzone in a form in laravel and every single time I add the images the form immediately submits without me clicking on the submit button. Please refer to following codes:
Here are the codes from the dropzone vue component
<template>
<div class="container" ref="imageUpload">
<div class="row justify-content-center mb-3">
<div class="col-12 bg-dark text-white rounded py-3 my-2 text-center">
DROP IMAGE(S) HERE
</div>
</div>
</div>
</template>
<script>
import Dropzone from 'dropzone';
export default {
data: function () {
return{
dropzone: null
}
},
mounted() {
this.dropzone = new Dropzone(this.$refs.imageUpload, {
url: '/blog'
});
}
}
</script>
Here are the codes from the BlogsController.php:
public function store(Request $request)
{
if(! is_dir(public_path('blog_images'))){
mkdir(public_path('/blog_images'), 0777);
}
$blogimages = Collection::wrap( request()->file('file'));
$blogimages->each(function($blogimage){
$basename = Str::random();
$original = $basename . '.'. $blogimage->getClientOriginalExtension();
$blogimage->move(public_path('/blog_images'), $original);
Blog::create([
'original' => '/blog_images/' . $original,
]);
});
$blog = Blog::create($this->validateRequest());
return view('blog.index');
}
public function validateRequest()
{
return request()->validate([
'title' => 'required',
'caption' => 'required',
]);
}
Here are the codes from the create.blade.php which contains the form:
<div class="container mt-5 blog-body">
<form action="/blog" method="POST" enctype="multipart/form-data">
<div class="form-group row">
<label for="title" class="col-4 col-form-label">Blog Title</label>
<div class="col-8">
<input id="title" type="text" class="form-control #error('title') is-invalid #enderror" name="title"
value="{{old('title') }}" autocomplete="title" placeholder="Title">
<div class="text-danger">{{ $errors->first('title') }}</div>
</div>
</div>
<div class="form-group row">
<label for="caption" class="col-4 col-form-label">Blog Caption</label>
<div class="col-8">
<input id="caption" type="text" class="form-control #error('caption') is-invalid #enderror" name="caption"
value="{{old('caption') }}" autocomplete="caption" placeholder="caption">
<div class="text-danger">{{ $errors->first('caption') }}</div>
</div>
</div>
<div class="form-group row">
<label class="col-4 col-form-label">Blog Images</label>
<div class="col-8" id="app">
<dropzone-component></dropzone-component>
</div>
</div>
<button type="submit" class="btn btn-primary"> Post Blog</button>
#csrf
</form>
Here are the codes from the web.php file:
Route::resource('blog', 'BlogsController');
Here are the codes from the create_blogs_table.php
Schema::create('blogs', function (Blueprint $table) {
$table->id();
$table->timestamps();
$table->string('original');
$table->string('title');
$table->string('caption');
});

Answer 1

You can set the options:
autoProcessQueue: false
parallelUploads: 10
So the dropzone does not upload immediately.