Update ComposeModal.vue

resources/assets/js/components/ComposeModal.vue

@@ -2,6 +2,15 @@
 <div>
 	<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" draggable="true" multiple="true" v-bind:accept="config.uploader.media_types">
 	<div class="timeline">
+		<div v-if="uploading">
+			<div class="card status-card card-md-rounded-0 w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1">
+				<div class="p-5 mt-2">
+					<b-progress :value="uploadProgress" :max="100" striped :animated="true"></b-progress>
+					<p class="text-center mb-0 font-weight-bold">Uploading ... ({{uploadProgress}}%)</p>
+				</div>
+			</div>
+		</div>
+		<div v-else>
 			<div class="card status-card card-md-rounded-0 w-100 h-100" style="display:flex;">
 				<div class="card-header d-inline-flex align-items-center bg-white">
 					<div>
@@ -234,6 +243,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </div>
 </template>
 
@@ -647,7 +657,13 @@ export default {
 				case 2:
 					this.pageLoading = true;
 					let self = this;
-					this.$refs.cropper.getCroppedCanvas().toBlob(function(blob) {
+					this.$refs.cropper.getCroppedCanvas({  
+							maxWidth: 4096,
+							maxHeight: 4096,
+							fillColor: '#fff',
+							imageSmoothingEnabled: false,
+							imageSmoothingQuality: 'high',
+						}).toBlob(function(blob) {
 						let data = new FormData();
 						data.append('file', blob);
 						let url = '/api/local/compose/media/update/' + self.ids[self.carouselCursor];