https://github.com/codenashwan/dropzonelaravel

https://github.com/codenashwan/dropzonelaravel

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/codenashwan/dropzonelaravel
• Owner: codenashwan
• Created: 2022-12-12T14:24:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-12T14:43:28.000Z (over 2 years ago)
• Last Synced: 2024-12-30T17:49:19.566Z (6 months ago)
• Size: 4.88 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DropzoneLaravel

![1](https://user-images.githubusercontent.com/35005761/207071923-bc8f0ca1-f1a1-44e4-8b35-9a9440bd5c4b.jpg)

**Laravel Drag and Drop File/Image Upload using Dropzone JS**

Source: [https://www.tutsmake.com/laravel-8-drag-and-drop-file-upload-using-dropzone-tutorial/](https://www.tutsmake.com/laravel-8-drag-and-drop-file-upload-using-dropzone-tutorial/)

- Step 1 – Download Laravel Application

- Step 2 – Setup Database with App

- Step 3 – Create Model & Migration

- Step 4 – Create Routes

- Step 5 – Generate Controller By Artisan Command

- Step 6 – Create Blade View

**Step 1 – Download Laravel 8 Application**

`composer create-project --prefer-dist laravel/laravel LaravelImage`

**Step 2 – Setup Database with App**

**Step 3 – Create Model & Migration**

`php artisan make:model Photo -m`

**Step 4 – Create Routes**

```

Route::get('dropzone', [DropzoneController::class, 'dropzone']);

Route::post('dropzone/store', [DropzoneController::class, 'dropzoneStore'])->name('dropzone.store');

```

**Step 5 – Generate Controller By Artisan Command**

`php artisan make:controller DropzoneController

`

```

file('file');

    

        $imageName = time().'.'.$image->extension();

        $image->move(public_path('images'),$imageName);

    

        return response()->json(['success'=>$imageName]);

    }

    

}

```

**Step 6 – Create Blade View**

```

    

    

    

   

                @csrf

                


                    
Upload Multiple Image By Click On Box

                

            

   


        Dropzone.autoDiscover = false;

            var dropzone = new Dropzone('#image-upload', {

                maxFilesize: 10000000,

                acceptedFiles: ".jpeg,.jpg,.png,.gif,.svg,.webp,.pdf,.mp3,.mp4,application/pdf",

            });

```