آپلود چندین عکس با Dropzone در لاراول 5.8 ، با استفاده از کتابخانه Dropzone JS ، کاربر می تواند با کشیدن و رها کردن (drag and drop) فایل بر روی آن، فایل را به کمک AJAX در سرور آپلود نماید. Dropzone معروفترین کتابخانه رایگان و open source برای آپلود چندین تصویر با هم می باشد.در این مقاله از تجاری اپ ما قصد داریم نحوه ی کار با کتابخانه Dropzone در لاراول را به شما آموزش دهیم. با ما همراه باشید.

سرفصل های آموزش آپلود چندین عکس با Dropzone در لاراول 5.8

1. نصب و پیکربندی ابتدایی لاراول
2. ایجاد جدول
3. ایجاد کنترلر و مدل
4. ایجاد Route
5. ایجاد فایل Blade
6. خروجی نهایی

گام 1: نصب و پیکربندی ابتدایی لاراول

برای هر پروژه لاراول ما نیاز داریم که لاراول را نصب کنیم. به همین دلیل ما یک مقاله در رابطه با چگونگی نصب و پیکربندی اولیه لاراول آماده کرده ایم که می توانید از اینجا ان را مشاهده نمایید : آموزش نصب لاراول به همراه تنظیمات اولیه

گام 2: ایجاد جدول

ما می خواهیم تصاویر آپلود شده را در پایگاه داده ذخیره می کنیم. بنابراین ما به یک جدول مثلا با نام ‘image_uploads’  نیاز داریم. برای ساختن فایل migration دستور زیر را اجرا کنید:

php artisan make:migration create_image_uploads_table –create=image_uploads

ما با موفقیت فایل migration را برای جدول “image_uploads” ایجاد کردیم. حالا فایل migration مربوطه را از پوشه  “database / migrations”  باز کنید و کدهای زیر را در آن بنویسید:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateImageUploadsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('image_uploads', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->text('filename');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('image_uploads');
    }
}

حالا دستور artisan زیر را اجرا کنید تا جدول image_uploads  در پایگاه داده شما ساخته شود:

php artisan migrate

اگر به phpMyAdmin بروید ، جدول ‘image_uploads’ را مشاهده خواهید کرد.

گام 3: ایجاد کنترلر و مدل

ما به یک کنترلر و مدل برای این پروژه نیاز داریم با اجرای دستور زیر کنترلر و مدل خود را ایجاد کنید:

php artisan make:controller ImageUploadController –model=ImageUpload

فایل کنترلر خود را از مسیر Http / Controllers / ImageUploadController.php  باز کنید و کدهای زیر را در آن بنویسید:

<?php

namespace App\Http\Controllers;

use App\ImageUpload;
use Illuminate\Http\Request;

class ImageUploadController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('image_upload');
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $image = $request->file('file');
        $imageName = $image->getClientOriginalName();
        $image->move(public_path('images'), $imageName);

        $imageUpload = new ImageUpload;
        $imageUpload->filename = $imageName;
        $imageUpload->save();
        return response()->json(['success' => $imageName]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\ImageUpload  $imageUpload
     * @return \Illuminate\Http\Response
     */
    public function delete(Request $request)
    {
        $filename = $request->get('filename');
        ImageUpload::where('filename', $filename)->delete();
        $path = public_path() . '/images/' . $filename;
        if (file_exists($path)) {
            unlink($path);
        }
        return $filename;
    }
}

ما با موفقیت مدل و کنترل کننده را ایجاد کردیم.

گام 4: ایجاد Route

فایل web.php را در مسیر “routes/web.php” باز کنید و Route های زیر را ایجاد کنید.

<?php

Route::get('/', function () {
    return view('welcome');
});

Route::get('upload', 'ImageUploadController@index');
Route::post('upload/store', 'ImageUploadController@store');
Route::post('delete', 'ImageUploadController@delete');

گام 5: ایجاد فایل Blade

به پوشه resources / views بروید و یک فایل Blade با نام ‘image_upload.blade.php’ برای آپلود تصویر ایجاد کنید.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>آموزش آپلود چندگانه عکس با DropzoneJS در لاراول 5.8</title>
    <meta name="_token" content="{{csrf_token()}}"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
</head>
<body style="direction: rtl;">
<div class="container">

    <h3 class="text-center" style="margin-top: 50px;">آموزش آپلود چندگانه عکس با DropzoneJS در لاراول 5.8 از سایت تجاری اپ</h3><br>
    <form method="post" action="{{url('upload/store')}}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
        @csrf
    </form>
</div>
    <script type="text/javascript">
        Dropzone.options.dropzone =
            {
                maxFilesize: 12,
                renameFile: function (file) {
                    var dt = new Date();
                    var time = dt.getTime();
                    return time + file.name;
                },
                acceptedFiles: ".jpeg,.jpg,.png,.gif",
                addRemoveLinks: true,
                timeout: 50000,
                removedfile: function (file) {
                    var name = file.upload.filename;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        type: 'POST',
                        url: '{{ url("delete") }}',
                        data: {filename: name},
                        success: function (data) {
                            console.log("File has been successfully removed!!");
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    });
                    var fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) : void 0;
                },

                success: function (file, response) {
                    console.log(response);
                },
                error: function (file, response) {
                    return false;
                }
            };
    </script>
</body>
</html>

گام 6: خروجی نهایی آموزش آپلود چندین عکس با Dropzone در لاراول 5.8

پروژه ما آماده اجرا است.برای اجرای پروژه آدرس http://myproject/upload را در مرورگر خود وارد کنید و صفحه آپلود چندین تصویر با Dropzone را مشاهده نمایید و سپس چندین تصویر را آپلود کنید. تصاویر در پایگاه داده ذخیره خواهند شد. ما می توانیم فایل ها را علاوه بر ذخیره سازی در پایگاه داده با کلیک روی دکمه حذف ، تصاویر را از پایگاه داده و پوشه مربوط به آپلودها حذف کنیم. تصویر زیر خروجی پروژه ما می باشد: