Dalam tutorial ini, saya akan menunjukkan contoh upload gambar laravel 7/6 menggunakan dropzone. Anda dapat bersandar beberapa unggahan menggunakan dropzone.js di laravel 7/6. kita bisa drag and drop unggahan file menggunakan dropzone js di laravel 7/6.
Anda dapat mengikuti langkah demi langkah dropzone beberapa file yang diunggah dengan contoh aplikasi laravel 6.
Dropzone.js adalah plugin jquery, melalui dropzone.js kita dapat memilih satu per satu gambar dan juga dengan pratinjau. Setelah memilih gambar dari browse, kita dapat melihat pratinjau gambar. dropzone.js juga menyediakan filter seperti kami dapat membuat validasi untuk unggahan maks, ekstensi gambar atau file tertentu, dll.
Dalam contoh ini saya membuat dua route, satu untuk tampilan tampilan dan satu lagi untuk menyimpan gambar. Saya juga membuat dua metode pada HomeController dan satu file blade dengan drops js plugin js dan css sehingga kita bisa menampilkan tata letak. Anda dapat menerapkan dalam aplikasi laravel Anda dengan mengikuti beberapa langkah.
Setelah menjalankan contoh ini, Anda akan menemukan pratinjau di bawah di aplikasi Anda.
Langkah 1: Tambahkan Route
Pada langkah pertama, kami akan menambahkan dua route baru satu untuk tampilan tampilan dan satu lagi untuk menyimpan gambar dalam file route.php kami. Jadi, buka file route Anda dan tambahkan di bawah dua route baru.
route/web.php
Route::get('dropzone', 'DropzoneController@dropzone');
Route::post('dropzone/store', 'DropzoneController@dropzoneStore')->name('dropzone.store');Langkah 2: Buat Controller
Pada langkah ini kita akan menambahkan dua metode pada DropzoneController dengan cara itu kita bisa menangani dua route dengan kode unggah gambar. Jadi, jika Anda belum membuat DropzoneController maka buat yang baru seperti di bawah ini, atau tambahkan dua metode.
Anda juga harus membuat folder gambar baru di folder public Anda untuk menyimpan gambar.
app/Http/Controllers/DropzoneController.php
<?php
namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
class DropzoneController extends Controller
{
/**
* Generate Image upload View
*
* @return void
*/
public function dropzone()
{
return view('dropzone-view');
}
/**
* Image Upload Code
*
* @return void
*/
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}Langkah 3: Tambahkan File Blade
Pada langkah terakhir kita harus membuat file dropzone-view.blade.php di direktori resources Anda. dalam file ini saya menulis kode pengunggahan gambar menggunakan dropzone.js, jadi mari kita buat file blade baru dan letakkan kode di bawah ini:
resources/views/dropzone-view.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Multiple Images using dropzone.js and Laravel</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Upload Multiple Images using dropzone.js and Laravel</h1>
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
<div>
<h3>Upload Multiple Image By Click On Box</h3>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize : 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>Anda bisa mendapatkan informasi lebih lanjut tentang Dropzone.js dari sini: Klik Di Sini .
Saya harap ini dapat membantu Anda ...
upload image dropzone laravel 6 laravel 7 laravel
andriajah