Как заставить работать облачный виджет загрузки? - PullRequest
Новая
       5

Как заставить работать облачный виджет загрузки?

0 голосов
/ 17 октября 2019

Все, что я сейчас пытаюсь сделать, это получить быстрый пример работы, как показано здесь - https://cloudinary.com/documentation/upload_widget

Это мой код - 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
  </head>
  <body>


    <button id="upload_widget" class="cloudinary-button">Upload files</button>


<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

  <script type="text/javascript">  
    var myWidget = cloudinary.createUploadWidget({
      cloudName: 'cloudname', 
      uploadPreset: 'uploadPreset'}, (error, result) => { 
        if (!error && result && result.event === "success") { 
          console.log('Done! Here is the image info: ', result.info); 
        }
      }
    )

    document.getElementById("upload_widget").addEventListener("click", function(){
        myWidget.open();
      }, false);

  </script>

  </body>
</html>

Когда я нажимаю наКнопка «Загрузить файлы». Серая рамка виджета загрузки действительно появляется, но внутри я вижу только значок загрузки.

Ответы [ 2 ]

0 голосов
/ 18 октября 2019

Это от их поддержки (которая работала) -

Наиболее распространенная причина, по которой это может произойти, - это если HTML-файл, содержащий код для виджета, открывается в браузере напрямую через файл:// протокол. Чтобы это работало, файл должен быть открыт изнутри вашего локального хоста через веб-сервер по HTTP.

Например, если в вашей системе установлен Python, вы можете быстро запустить простой HTTP-сервер в том же каталоге. как ваш файл, который сделает его доступным.

Например, в Python 3:

python3 -m http.server

Python 2.7:

python -m SimpleHTTPServer

Тогда переход к http://localhost:8000/index.html запустит код и позволит вам запустить виджет.

0 голосов
/ 17 октября 2019

Ваш код работает отлично для меня локально и на Codepen без единого изменения кода. Я даже загружаю две картинки, используя их, и вы должны проверить, появились ли они в вашем облачном аккаунте. Не волнуйтесь, они чистые.

Поскольку я не могу проверить, были ли загружены изображения в вашу учетную запись, я создал собственную учетную запись Cloudinary и убедился, что виджет действительно работает нормально. Я только проверил это, изменив свое облачное имя и предустановку.

Вот Ссылка Codepen

Ваш код ниже, так как Кодовые ссылки должны иметь код, сопровождающий их. 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
  </head>
  <body>


    <button id="upload_widget" class="cloudinary-button">Upload files</button>


<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

  <script type="text/javascript">  
    var myWidget = cloudinary.createUploadWidget({
      cloudName: 'dw62s0tlm', 
      uploadPreset: 'rossm67'}, (error, result) => { 
        if (!error && result && result.event === "success") { 
          console.log('Done! Here is the image info: ', result.info); 
        }
      }
    )

    document.getElementById("upload_widget").addEventListener("click", function(){
        myWidget.open();
      }, false);

  </script>

  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...