ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

basic working exmaple with uploadpanel

This commit is contained in:
Daniel Egger 2018-09-19 15:17:44 +02:00
parent b8b09b1af3
commit 5ff2f97606
2 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/index.html
View File

@ -11,10 +11,23 @@
<script>
UPLOADCARE_LOCALE = "de";
UPLOADCARE_TABS = "file url facebook gdrive gphotos dropbox instagram evernote flickr skydrive";
UPLOADCARE_TABS = "file";
UPLOADCARE_PUBLIC_KEY = "ad89e9f42d4f5532d176";
UPLOADCARE_LOCALE_TRANSLATIONS = {
buttons: {
choose: {
files: {
one: 'Choose a file',
other: 'Choose files'
},
images: {
one: 'Choose an image',
other: 'Choose images'
}
}
}
};
</script>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.6.0/uploadcare.full.min.js"></script>
</head>
<body>

33
client/src/components/content-forms/ImageForm.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="image-form">
<input type="hidden" ref="widget">
<div ref="uploadcare-panel"></div>
<div v-if="url">
<img :src="url">
</div>
</div>
</template>
@ -12,12 +15,30 @@
mounted() {
console.log('ImageForm mounted');
console.log(this.$refs);
const widget = uploadcare.Widget(this.$refs.widget);
const uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
tabs: ['file'],
}, {
publicKey: 'ad89e9f42d4f5532d176',
imagesOnly: true,
});
widget.onUploadComplete(info => {
console.log(info);
console.log(info.cdnUrl);
this.$emit('link-change-url', info.cdnUrl, this.index)
uploadcarePanel.done((result) => {
console.log(result);
result.progress(function(p) {
console.log('progress');
console.log(p);
});
result.done(fileInfo => {
console.log(fileInfo);
this.url = fileInfo.cdnUrl;
this.$emit('link-change-url', fileInfo.cdnUrl, this.index)
});
});
uploadcarePanel.progress(function(tabName) {
console.log(tabName);
// tabName is selected. progress() works when you click a tab name on the list.
// Technically, it would work on any dialog progress, i.e. when preview appears.
});
}
}