show errors on uploader

resources/assets/js/components/media-uploader.vue

@@ -4,27 +4,51 @@
         <button type="submit" class="btn btn-primary">
             Upload
         </button>
+
+		<div v-if="errors" class="alert alert-danger my-4">
+			<ul class="mb-0">
+				<li v-for="error in errors" :key="error">{{ error }}</li>
+			</ul>
+		</div>
     </form>
 </template>
 
 
 <script>
     export default {
-        props: ['id', 'emit'],
+        props: {
+			id: {
+				default: function () {
+					return 'media-uploader-' + Math.random() * 10;
+				},
+				type: String
+			},
+			emit: {
+				default: 'media-uploaded',
+				type: String
+			}
+		},
+
+		data() {
+			return {
+				errors: null
+			}
+		},
 
         methods: {
             uploadMedia(e) {
                 var data = new FormData();
-                data.append('asset', $(e.target).find('input[name=asset]')[0].files[0]);
+				data.append('asset', $(e.target).find('input[name=asset]')[0].files[0]);
+				this.errors = null;
 
                 axios.post('/gazette/media', data)
                     .then(response => {
-                        Bus.$emit(this.emit, response);
-                    })
-                    .catch(error => {
-                        console.error(error);
+						Bus.$emit('uploaded-to-media-browser', response);
+						e.target.reset();
+                    }, error => {
+						this.errors = error.response.data.errors.asset;
                     });
             },
         }
     }
-</script>
+</script>