file.blade.php 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <style>
  2. .webuploader-pick {
  3. background-color: @primary;
  4. }
  5. .web-uploader .placeholder .flashTip a {
  6. color: @primary(-10);
  7. }
  8. .web-uploader .statusBar .upload-progress span.percentage,
  9. .web-uploader .filelist li p.upload-progress span {
  10. background: @primary(-8);
  11. }
  12. .web-uploader .dnd-area.webuploader-dnd-over {
  13. border: 3px dashed #999 !important;
  14. }
  15. .web-uploader .dnd-area.webuploader-dnd-over .placeholder {
  16. border: none;
  17. }
  18. </style>
  19. <div class="{{$viewClass['form-group']}} {{ $class }}">
  20. <label for="{{$column}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
  21. <div class="{{$viewClass['field']}}">
  22. @include('admin::form.error')
  23. <input name="{{ $name }}" class="file-input" type="hidden" {!! $attributes !!}/>
  24. <div class="web-uploader {{ $fileType }}">
  25. <div class="queueList dnd-area">
  26. <div class="placeholder">
  27. <div class="file-picker"></div>
  28. <p>{{trans('admin.uploader.drag_file')}}</p>
  29. </div>
  30. </div>
  31. <div class="statusBar" style="display:none;">
  32. <div class="upload-progress progress progress-bar-primary pull-left">
  33. <div class="progress-bar progress-bar-striped active" style="line-height:18px">0%</div>
  34. </div>
  35. <div class="info"></div>
  36. <div class="btns">
  37. <div class="add-file-button"></div>
  38. @if($showUploadBtn)
  39. &nbsp;
  40. <div class="upload-btn btn btn-primary"><i class="feather icon-upload"></i> &nbsp;{{trans('admin.upload')}}</div>
  41. @endif
  42. </div>
  43. </div>
  44. </div>
  45. @include('admin::form.help-block')
  46. </div>
  47. </div>
  48. <script require="@webuploader" init="{!! $selector !!}">
  49. var uploader,
  50. newPage,
  51. options = {!! $options !!},
  52. events = options.events;
  53. init();
  54. function init() {
  55. var opts = $.extend({
  56. selector: $this,
  57. addFileButton: $this.find('.add-file-button'),
  58. inputSelector: $this.find('.file-input'),
  59. }, options);
  60. opts.upload = $.extend({
  61. pick: {
  62. id: $this.find('.file-picker'),
  63. name: '_file_',
  64. label: '<i class="feather icon-folder"><\/i>&nbsp; {!! trans('admin.uploader.add_new_media') !!}'
  65. },
  66. dnd: $this.find('.dnd-area'),
  67. paste: $this.find('.web-uploader')
  68. }, opts);
  69. uploader = Dcat.Uploader(opts);
  70. uploader.build();
  71. uploader.preview();
  72. for (var i = 0; i < events.length; i++) {
  73. var evt = events[i];
  74. if (evt.event && evt.script) {
  75. if (evt.once) {
  76. uploader.uploader.once(evt.event, evt.script.bind(uploader))
  77. } else {
  78. uploader.uploader.on(evt.event, evt.script.bind(uploader))
  79. }
  80. }
  81. }
  82. function resize() {
  83. setTimeout(function () {
  84. if (! uploader) return;
  85. uploader.refreshButton();
  86. resize();
  87. if (! newPage) {
  88. newPage = 1;
  89. $(document).one('pjax:complete', function () {
  90. uploader = null;
  91. });
  92. }
  93. }, 250);
  94. }
  95. resize();
  96. }
  97. </script>