# Use DropzoneJS with Laravel8

## 1. Download and install

```
<link href="/css/dropzone.min.css" rel="stylesheet">
<script src="/js/dropzone.min.js"></script>
``` 

## 2. Add class to a div

```
<input type="hidden" name="photo" id="photo">
<div id="upload" class="dropzone"></div>
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617858314114/rbTrnAdTS.png)

## 3. Create options for DropzoneJS

```
Dropzone.options.upload = {
        url: "/upload",
        paramName: "file",
        maxFilesize: 2,
        maxFiles: 1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
        sending: function(file, xhr, formData) {
            formData.append("_token", "{{ csrf_token() }}");
        },
        success: function(file, response) {
            document.getElementById('photo').value = response.data.url;
        }

    };
``` 

## 4. Save the file on the backend

```
public function upload(Request $request)
    {
        $file = $request->file('file');
        $fileName = time() . '.' . $file->extension();
        $file->move(public_path('images'), $fileName);
        return response()->json(['message' => 'success', 'data' => ['url' => $fileName]]);
    }
```