Проблема с отображением миниатюры видео в дропзоне - PullRequest
Новая
       19

Проблема с отображением миниатюры видео в дропзоне

3 голосов
/ 10 июля 2019

Я пытаюсь загрузить изображения и видео, используя dropzone в моей форме. У меня проблема, когда я выбираю пару изображений и видео, я получаю миниатюры для изображений, но не для видео. Они появляются, но это как пустая картинка. Также они загружаются в папку и базу данных. Я не знаю, как это решить, я все перепробовал. Любая помощь приветствуется. Вот мой код

index.blade.php 

 <div id="img" class="row">

 <input type="hidden" id="hideninput" data-src="tmp"value="{{old('image')}}" name="image" class="image">
          @if (old('image'))
          @foreach (array_filter(explode(',',old('image')), 'strlen') as $key =>$value)
      <div id="{{'div_image_'.$key}}"class="col-md-3 img-wrap" >
        <button data="{{$key}}" type="button" class="closebutton">
          <span aria-hidden="true">&times;</span>
        </button>
        <img id="{{'image_'.$key}}" data={{$value}} src="/storage/tmp/{{$value}}" class="img-fluid">
      </div>
          @endforeach
          @endif
    </div>

    @error('image')
    <div class="alert alert-danger" role="alert">
        {{ 'At least one image is required' }}
    </div>
    @enderror
  </form>
  <hr class="mb-4">
  <form action="/PhotoRequest" class="dropzone"  data-count="{{ old('image') ? 10-count(array_filter(explode(',',old('image')), 'strlen')) : 10 }}" id="dropzone">
        {{csrf_field()}}
        Drop files here to Upload <br>
        Maximum 10 images, Size limit 20MB
  </form>
  <hr class="mb-4">
      <button  form="form" class="btn btn-primary btn-lg btn-block" type="submit">Kreiraj Oglas</button>
 </div>
 </div>
 </div>

 <script>
 var images = [];
 var i = 0;
 var docu = '';
 var img = '';
 var docudiv = '';
 var closeSpan = '';

 Dropzone.options.dropzone = {
    maxFilesize: 20,
    parallelUploads: 1,
    maxFiles: $('.dropzone').attr('data-count'),
    acceptedFiles: "image/*,video/*",
    addRemoveLinks: true,
    autoProcessQueue: true,
    previewTemplate: '<div style="display:none"></div>',
    dictDefaultMessage: "",
    addedfile: function(file) {
      this.options.maxFiles = $('.dropzone').attr('data-count');
    },
    error: function (file, message, xhr) {
        alert(file.name + ' ' + message);
    },

 success: function (file, response) {
    images[i] = response['filename'];
    file.filename = response['filename'];
    file.id = i;
    var oldvalue = document.getElementById("hideninput").value;
    document.getElementById("hideninput").value=oldvalue+','+images[i];
    docu = document.getElementById("img");
    docudiv = document.createElement("div");
    docudiv.className = 'col-md-3 img-wrap dz-remove';
    docudiv.id = i;
    docu.appendChild(docudiv);
    closeSpan = document.createElement("span");
    closeSpan.setAttribute("class", "close");
    closeSpan.textContent = "x";
    docudiv.appendChild(closeSpan);
    img = document.createElement("img");
    img.setAttribute("src", src = '/storage/tmp/' + response['filename']);
    img.className = 'img-fluid';
    docudiv.appendChild(img);
    var _this = this;
    closeSpan.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      _this.removeFile(file);
    });
    i++;
 },

 removedfile: function (file, i) {
  var name = file.name;
  if (name) {
      $.ajax({
          headers: {
              'X-CSRF-Token': $('input[name="_token"]').val()
          },
          type: 'DELETE',
          url: "/PhotoRequest/" + file.filename,
          dataType: 'json'
      });
   }

  var oldvalue = document.getElementById("hideninput").value;
  var newvalue = oldvalue.replace(file.filename,'');
  if (newvalue.indexOf(',,') > -1){
        newvalue=newvalue.replace(",,", ",");
  }
  if (newvalue.startsWith(",")) {
        newvalue = newvalue.substr(1);
  }
  if ( newvalue.endsWith(",")) {
        newvalue = newvalue.slice(0, -1);
  }
  document.getElementById("hideninput").value=newvalue;
  var elem = document.getElementById(file.id);
  elem.parentNode.removeChild(elem);
  var _ref;
  return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
 };

 $(document).ready(function() {
 $(".closebutton").click(function() {

 var val = $(this).attr('data');
 var img_src = document.getElementById('image_'+val).getAttribute('data');
 var data_src =document.getElementById("hideninput").getAttribute('data-src');
 var oldvalue = document.getElementById("hideninput").value;
 var newvalue = oldvalue.replace(img_src,'');
 if (newvalue.indexOf(',,') > -1) {
      newvalue=newvalue.replace(",,", ",");
 }
 if ( newvalue.startsWith(",")) {
      newvalue = newvalue.substr(1);
 }
 if ( newvalue.endsWith(",")) {
        newvalue = newvalue.slice(0, -1);
 }
 document.getElementById("hideninput").value=newvalue;
var newnumber= document.getElementById("dropzone").getAttribute('data-count');
newnumber=+newnumber+ +1;
document.getElementById("dropzone").setAttribute("data-count", newnumber);

 $.ajax({

  headers: {
    'X-CSRF-Token': $('input[name="_token"]').val()
  },
  type: 'DELETE',
  url: "/PhotoRequest/" + img_src,
  dataType: 'json',
  data: {data_src:data_src}

 });
 document.getElementById("div_image_"+val).remove();

 });
  });

 $.ajaxSetup({

  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
 });

 $(document).ready(function() {
    load_data();
    function load_data(query) {
      $.ajax({
        url:"/searchlocation",
        type:"POST",
        data:{ "_token": "{{ csrf_token() }}",query:query},
        success:function(data)
        {
            $('#result').html(data);
        }
      });
    }

    $('#input').keyup(function() {
      var search = $(this).val();
      if (search != '') {
        load_data(search);
      }
      else {
        load_data();
      }
    });
 });
 </script>
...