Блог

Я нахожусь в процессе перехода от виджета Dropzone к виджету Cloudinary и сталкиваюсь с множеством проблем.

Во-первых, Dropzone в настоящее время прекрасно работает с загрузками в cloudinary. Я перехожу на их проприетарный виджет по ряду причин, которые просто отвлекут этот пост.

Проблема, с которой я сталкиваюсь, на первый взгляд «проста». Изображения правильно загружаются в Cloudinary. Именно в следующем сообщении формы у меня возникают проблемы.

Dropzone автоматически создает необходимые скрытые входные данные и значения…Cloudinary вы должны создать свой собственный. Итак, я это сделал, и это не только не работает, входные значения сильно отличаются от того, что dropzone генерирует для того же изображения. Я не могу найти логику в dropzone.js это может объяснить, как создаются входные данные.

Например, вот что dropzone отображает для одного изображения:

 <input type="hidden" name="entity[job_entries_attributes][0][images][]" value="eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNkpLQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--7d13c16894d2a146f1ac85e12ddea03d9c14c26e">
 

Когда я выполняю рулон вручную, у меня есть доступ к объекту, возвращенному из прямой загрузки в Cloudinary — public_id, asset_id и т. Д. Но ни один из них не похож на указанное выше значение. Я предполагаю, что из-за этого не удается выполнить рендеринг post и последующего изображения.

У кого-нибудь есть опыт работы с этим??? Сводит меня с ума…

Виджет загрузки — это интерактивный пользовательский интерфейс для загрузки изображений в вашу учетную запись библиотеки мультимедиа Cloudinary, и его использование может быть расширено в зависимости от требований варианта использования. Хотя у виджета не так много функций, как у Dropzone, но вы можете использовать различные события для включения дополнительных пользовательских процессов с использованием javascript или HTML (см. Примеры демонстраций здесь и здесь).

 <div id="widgetdiv"></div>

<script type="text/javascript">
        cloudinary.openUploadWidget({
                    cloudName: 'cloudname',
                    inlineContainer: '#widgetdiv',
                    uploadPreset: 'uploadPreset',
                    showPoweredBy: false,
                    sources: ['local','instagram']},
        (error, result) => {
                    if (!error amp;amp; result amp;amp; result.event === "success") {
                        console.log('Done! Here is the image info: ', result.info);

                        console.log('Custom implementations here...');
                        
                        var filename = result.info.secure_url.split('/').pop().split('#')[0].split('?')[0];
                        var filesize = result.info.bytes;

                        // Populate form, card container, post to another endpoint, etc 
                }
            }
        );
</script>