mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Update StoryCompose component, add upload progress

This commit is contained in:
Daniel Supernault 2020-01-27 20:23:13 -07:00
parent 31a0b0993b
commit 2de3c56f47
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/assets/js/components/StoryCompose.vue
View File

@ -79,6 +79,12 @@
</p> </p>
</div> </div>
<!-- UPLOADING -->
<div v-if="page == 'uploading'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
<p v-if="uploadProgress != 100" class="display-4 mb-0">Uploading {{uploadProgress}}%</p>
<p v-else class="display-4 mb-0">Publishing Story</p>
</div>
<div v-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;"> <div v-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
<div class="text-center flex-fill mt-5 pt-5"> <div class="text-center flex-fill mt-5 pt-5">
<img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px"> <img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
@ -152,10 +158,11 @@
'crop', 'crop',
'edit', 'edit',
'confirm', 'confirm',
'error' 'error',
'uploading'
], ],
uploading: false, uploading: false,
uploadProgress: 100, uploadProgress: 0,
cropper: { cropper: {
aspectRatio: 9/16, aspectRatio: 9/16,
viewMode: 1, viewMode: 1,
@ -192,6 +199,7 @@
let self = this; let self = this;
self.uploading = true; self.uploading = true;
let io = document.querySelector('#pf-dz'); let io = document.querySelector('#pf-dz');
self.page = 'uploading';
Array.prototype.forEach.call(io.files, function(io, i) { Array.prototype.forEach.call(io.files, function(io, i) {
if(self.media && self.media.length + i >= self.config.uploader.album_limit) { if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error'); swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
@ -213,7 +221,7 @@
let xhrConfig = { let xhrConfig = {
onUploadProgress: function(e) { onUploadProgress: function(e) {
let progress = Math.round( (e.loaded * 100) / e.total ); let progress = Math.floor( (e.loaded * 100) / e.total );
self.uploadProgress = progress; self.uploadProgress = progress;
} }
}; };