lmata

dropzone-vue laravel

Aug 23rd, 2017
165
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. //upload.vue
  3. <template>
  4. <div id="dropzone">
  5. <div class="title m-b-md">
  6. Drop it like it's hot!
  7. </div>
  8.  
  9. <dropzone id="myVueDropzone" :url="action" :headers="{ 'X-CSRF-TOKEN': csrf,'X-XSRF-TOKEN': xsrf }" v-on:vdropzone-success="showSuccess">
  10.  
  11. </dropzone>
  12.  
  13. </div>
  14. </template>
  15.  
  16. <script>
  17. import Dropzone from "vue2-dropzone"
  18.  
  19. export default {
  20. components: {
  21. Dropzone
  22. },
  23. props: {
  24. csrf: {
  25. type: String
  26. },
  27. xsrf: {
  28. type: String
  29. }
  30. ,
  31. action: {
  32. type: String
  33. }
  34. },
  35. methods: {
  36. showSuccess(file) {
  37.  
  38. console.log('File uploaded' + file)
  39. }
  40. }
  41. }
  42. </script>
  43.  
  44.  
  45.  
  46. //in the view
  47.  
  48. test.blade.php
  49.  
  50.  
  51. <div class="panel panel-default">
  52. <upload csrf="{{ csrf_token() }}" xsrf="{!! Cookie::get('spark_token') !!} " action="/api/uploadPhoto">
  53. </upload>
  54. <image-list url="/list"></image-list>
  55. </div>
  56.  
  57. //in route/api.php
  58.  
  59. Route::group([
  60. 'middleware' => 'auth:api'
  61. ], function () {
  62.  
  63. //Photo Controller
  64. Route::post('/uploadPhoto', 'PhotoController@upload');
  65.  
  66. });
RAW Paste Data