Для моего последнего проекта в программе иммерсивной веб-разработки Flatiron School моей идеей было создать приложение, очень похожее на Instagram. Я использовал интерфейс javascript с React и Redux и серверную часть API Ruby on Rails для создания своего приложения. Я также использовал приложение response-create-app для запуска проекта. Решая, какую платформу для хранения фотографий я хочу использовать, я остановился на Cloudinary, услышав от друга о том, как легко ее настроить.
Проведя дополнительное исследование, я обнаружил, что Cloudinary только что выпустила новую версию (v2) своего виджета загрузки в предыдущем месяце (октябрь 2018 г.). Новая версия виджета была создана для использования преимуществ новых технологий, таких как React, ES6, WebPack и Rollup.js, с обновленным дизайном и улучшенной мобильной поддержкой. Поскольку я использовал React и пытался создать PWA, я подумал, что использование этого виджета - отличный вариант.
Однако я столкнулся с препятствием, когда объект cloudinary возвращался как undefined повсюду в моем каталоге src, и, похоже, в Интернете не было никакой полезной информации о том, как реализовать Cloudinary Upload Widget v2 в реагировать приложение. Собственная документация по виджетам Cloudinary не объясняла, почему у меня возникли трудности с доступом к объекту cloudinary, который мне понадобился для создания виджета. Вот почему я решил написать об этом в блоге, чтобы другие разработчики не тратили так много времени, как я, заставляя виджет работать. Ниже я расскажу, как я его в итоге настроил.
1. Зарегистрируйтесь для получения бесплатной учетной записи Cloudinary, затем перейдите в «Настройки», нажмите вкладку «Загрузить» и прокрутите вниз, чтобы нажать кнопку, чтобы создать новую предустановку загрузки без подписи. Вам понадобится это предустановленное имя загрузки и имя вашего облака, которое можно будет найти на панели управления Cloudinary на будущее.
2. Включите файл Javascript облачного виджета в заголовок вашего index.html в вашем общедоступном каталоге.
3. Добавьте виджет в визуализацию выбранного компонента реакции, вызвав метод createUploadWidget (в который вы вводите имя облака и загружаете предварительно заданное имя) для объекта cloudinary, импортированного из файла Javascript облачного виджета. Обязательно используйте окно для получения доступа к объекту cloudinary (например, window.cloudinary.createUploadWidget (…)).
4. Создайте функцию обратного вызова для отображения виджета. Добавление виджета выше создает объект в памяти, но не отображает виджет на странице. Вам нужно вызвать .open для виджета, чтобы отобразить его на экране, и .close, чтобы удалить с экрана.
5. Добавьте функцию в функцию обратного вызова метода .createUploadWidget, которая проверяет результат, полученный от виджета, для получения защищенного URL-адреса для загруженного изображения. Когда изображение загружается, объект результата будет иметь ключ события со значением «success», а объект также будет иметь информационный объект с ключом secure_url, значением которого является URL-адрес загруженной фотографии.
Примечание: существует также метод .openUploadWidget, который создает и открывает виджет. Однако разделение двух методов помогает повысить производительность, позволяя виджету сразу загружаться в фоновом режиме.
Для получения более подробной информации о том, как воспользоваться всеми функциями виджета загрузки, см. Документацию Cloudinary.
