TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL

158

09 декабря 2020, 09:30

Есть скрипт с выбором файла/изображения. Я спрятал стандартный input. Но при выборе файла по клике на надпись "Фото" получаю ошибку TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL.

https://playcode.io/312105?tabs=console&index.html&output

function addPostImage(event, element) { 
  var files = element.files, 
      file_list = []; 
  file_list.push(files[0]); 
  var file = file_list.pop(); 
  $('#id_post_image').attr('src', window.URL.createObjectURL(file)); 
  $('#id_post_media').fadeIn('fast'); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form action="/post/user/17/user/22/add/" id="id_new_post" name="new_post" enctype="multipart/form-data"> 
  <div class="submit_post"> 
    <div class="media_preview_wrap" style="display: none;" id="id_post_media"> 
      <div class="media_preview"> 
        <div class="preview"> 
          <img src="" width="30" height="30" id="id_post_image"> 
        </div> 
      </div> 
      <input type="file" name="form-0-image" id="id_form-0-image" onclick="addPostImage(event, this)" /> 
    </div> 
  </div> 
  <div class="add_media flaticon-paper-clip-outline"> 
    <span class="add_media_list"> 
      <a href="#" onclick="document.querySelector('#id_form-0-image').click()"> 
        <span class="flaticon-art"></span> 
        <span>Фото</span> 
      </a> 
    </span> 
  </div> 
</form>

Answer 1

 window.URL.createObjectURL(file)

заменить на

window.URL.srcObject = file

Причина простая... И аналогично у остальных можно найти

Answer 2

Помог комментарий @StepanKasyanenko

Чтобы исправить данную ошибку, достаточно прислушаться к ответу @InDevX

window.URL.createObjectURL(file)

заменить на

window.URL.srcObject = file

Но если нужно, чтобы загруженное изображение отображалось в id_post_media, нужно событие onclick сменить на onchange в <input type="file" name="form-0-image" id="id_form-0-image" onclick="addPostImage(event, this)" />. И в этом случае ответ @InDevX применять нужно. Вот так забавно устроен jquery

function addPostImage(event, element) { 
  var files = element.files, 
      file_list = []; 
  file_list.push(files[0]); 
  var file = file_list.pop(); 
  $('#id_post_image').attr('src', window.URL.srcObject = file); 
  $('#id_post_media').fadeIn('fast'); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form action="/post/user/17/user/22/add/" id="id_new_post" name="new_post" enctype="multipart/form-data"> 
  <div class="submit_post"> 
    <div class="media_preview_wrap" style="display: none;" id="id_post_media"> 
      <div class="media_preview"> 
        <div class="preview"> 
          <img src="" width="30" height="30" id="id_post_image"> 
        </div> 
      </div> 
      <input type="file" name="form-0-image" id="id_form-0-image" onchange="addPostImage(event, this)" style="display: none" /> 
    </div> 
  </div> 
  <div class="add_media flaticon-paper-clip-outline"> 
    <span class="add_media_list"> 
      <a href="#" onclick="document.querySelector('#id_form-0-image').click()"> 
        <span class="flaticon-art"></span> 
        <span>Фото</span> 
      </a> 
    </span> 
  </div> 
</form>