file-link.blade.php

<style>
	figure.jsThumbnailImageWrapper {
		position: relative;
		display: none;
		background-color: #fff;
		border: 1px solid #eee;
		padding: 3px;
		border-radius: 3px;
		margin-top: 20px;
	}
	figure.jsThumbnailImageWrapper i.removeIcon {
		position: absolute;
		top:-10px;
		right:-10px;
		color: #f56954;
		font-size: 2em;
		background: white;
		border-radius: 20px;
		height: 25px;
	}
</style>
<script>
	if (typeof window.openMediaWindow === 'undefined') {
		window.mediaZone = '';
		window.openMediaWindow = function (event, zone) {
			window.mediaZone = zone;
			window.zoneWrapper = $(event.currentTarget).siblings('.jsThumbnailImageWrapper');
			window.open('{!! route('media.grid.select') !!}', '_blank', 'menubar=no,status=no,toolbar=no,scrollbars=yes,height=500,width=1000');
		};
	}
	if (typeof window.includeMedia === 'undefined') {
		window.includeMedia = function (mediaId) {
			if(typeof mediaId !== 'undefined' && typeof window.mediaZone !== 'undefined') {
				$.ajax({
					type: 'GET',
					url: '{{ route('api.<module_name>.media.file') }}',
					data: {
						'mediaId': mediaId
					},
					success: function (data) {
						var html = '<figure data-id="'+ data.result.id +'"><img src="' + data.result.thumbnail_path + '" alt=""/>' +
								'<a class="jsRemoveSimpleLink" href="#" data-id="' + data.result.id + '">' +
								'<i class="fa fa-times-circle removeIcon"></i>' +
								'</a>' +
								'<input type="hidden" name="mediaId" value="' + data.result.id + '">' +
								'<input type="hidden" name="mediaZone" value="' + window.mediaZone + '">' +
								'</figure>';
						window.zoneWrapper.append(html).fadeIn('slow', function() {
							toggleButton($(this));
						}).css("display","inline-block");
					}
				});
			}
		};
	}
</script>
<div class="form-group">
	{!! Form::label($zone, ucwords(str_replace('_', ' ', $zone)) . ':') !!}
	<div class="clearfix"></div>

	<a class="btn btn-primary btn-browse" onclick="openMediaWindow(event, '{{ $zone }}');"><i class="fa fa-upload"></i>
		{{ trans('media::media.Browse') }}
	</a>

	<div class="clearfix"></div>

	<figure class="jsThumbnailImageWrapper"></figure>
</div>
<script>
	$( document ).ready(function() {
		$('.jsThumbnailImageWrapper').off('click', '.jsRemoveSimpleLink');
		$('.jsThumbnailImageWrapper').on('click', '.jsRemoveSimpleLink', function (e) {
			e.preventDefault();
			$(e.delegateTarget).fadeOut('slow', function() {
				toggleButton($(this));
			}).html('');
		});
	});

	function toggleButton(el) {
		var browseButton = el.parent().find('.btn-browse');
		browseButton.toggle();
	}
</script>