david001's avatar

Vue js dropzone with laravel: Removing image

Hi , I am using vuejs dropzone package (https://rowanwins.github.io/vue-dropzone/docs/dist/#/installation) with laravel for my website. I am just wondering how can I remove the uploded image. I can see remove link on hovering image and on click that remove like i want to delete from server as well.


namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class ImageController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function formSubmit(Request $request)
    {
    	$imageName = time().'.'.$request->file->getClientOriginalExtension();
        $request->file->move(public_path('images'), $imageName);
         //and then save to db
    	return response()->json(['success'=>'You have successfully upload file.']);
    }
}

and my view


<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                        <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
 
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
  
    export default {
     components: {
        vueDropzone: vue2Dropzone
      },
      data: function () {
        return {
          dropzoneOptions: {
              url: '/formSubmit',
              headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
               }
          }
        }
      },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
0 likes
1 reply
khalilm's avatar

Vue2-dropzone either will automatically upload a file when you drop it on it or wait for you to manually upload it. The remove function is a link to remove the file (image) before upload or while uploading not to remove the files from the server.

V2D is built around dropzone.js so you should look at its configuration there (https://www.dropzonejs.com/#config-addRemoveLinks)

Please or to participate in this conversation.