Image Upload, Resize and Dropzone

  • image upload 1

    Upload image using form
  • image upload 2

    Uploading image with preview
  • image upload 3

    Dropzone upload multiple images
  • image upload 4

    Ajax shows uploaded images in the same page

Source code: https://github.com/sunnygreentea/laravel-dropzone-image-upload


Intervention to resize image

Config

config/app.php

add into providers

Intervention\Image\ImageServiceProvider::class,

add into aliases

'Image' => Intervention\Image\Facades\Image::class,

controller

app/Http/Controllers/ImageController.php

public function upload(Request $request)
    {
        // Image
        $this->validate($request, [
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg',
        ]);

        $image = $request->file('image');
        $imageName = time().'.'.$image->extension();
        $image->move(public_path('images/photos'), $imageName);

        // resize
        $imageResized = Image::make('images/photos/'.$imageName);
        $imageResized->resize(192,108);
        $imageResized->save('images/thumbnails/'.$imageName,90);
        
        return redirect ('image');
    }

Dropzone to upload multiple images

Route

routes/web.php

Route::get('/dropzone', 'DropzoneController@index')->name('dropzone');
Route::post('/dropzone/upload', 'DropzoneController@upload')->name('dropzone.upload');
Route::get('/dropzone/fetch', 'DropzoneController@fetch')->name('dropzone.fetch');
Route::get('/dropzone/delete', 'DropzoneController@delete')->name('dropzone.delete');

Controller

app/Http/Controllers/DropzoneController.php


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;

class DropzoneController extends Controller
{

    public function index () {
        return view('photos.dropzone');
    }

    public function upload (Request $request) 
    {
        $image = $request->file('file');
        $imageName = time() . '-'.$image->getClientOriginalName();
        $image->move(public_path('images/dropzone'), $imageName);
        return response()->json(['success' => $imageName]);

    }

    public function fetch () {
        $images = File::allFiles(public_path('images/dropzone'));
        $output = '
'; foreach($images as $image) { $output .= '
'; } $output .= '
'; echo $output; } public function delete(Request $request) { if($request->get('name')) { File::delete(public_path('images/dropzone/' . $request->get('name'))); } } }

View

resources/views/photos/dropzone.blade.php

@extends('layouts.front')
@section('content')

Upload Images Using Dropzone


Select Images

@csrf

Uploaded Images

@endsection