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> <script>
UPLOADCARE_LOCALE = "de"; UPLOADCARE_LOCALE = "de";
UPLOADCARE_TABS = "file url facebook gdrive gphotos dropbox instagram evernote flickr skydrive"; UPLOADCARE_TABS = "file";
UPLOADCARE_PUBLIC_KEY = "ad89e9f42d4f5532d176"; 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>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.6.0/uploadcare.full.min.js"></script>
</head> </head>
<body> <body>

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

@ -1,6 +1,9 @@
<template> <template>
<div class="image-form"> <div class="image-form">
<input type="hidden" ref="widget"> <div ref="uploadcare-panel"></div>
<div v-if="url">
<img :src="url">
</div>
</div> </div>
</template> </template>
@ -12,12 +15,30 @@
mounted() { mounted() {
console.log('ImageForm mounted'); console.log('ImageForm mounted');
console.log(this.$refs); 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 => { uploadcarePanel.done((result) => {
console.log(info); console.log(result);
console.log(info.cdnUrl); result.progress(function(p) {
this.$emit('link-change-url', info.cdnUrl, this.index) 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.
}); });
} }
} }