How to achieve an invisible upload in ASP.NET MVC File Upload

26 Aug 20263 minutes to read

You can achieve the invisible upload in the Uploader control by handling the selected event.

Refer to the following example.

<div class="control_wrapper">
    <div id='preview'></div>
      @Html.EJS().Uploader("UploadFiles").AllowedExtensions(".png, .jpg, .jpeg").Selected("onSelect").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" }).Render()
</div>
<script>
    function onSelect(args) {
        for (var i = 0; i < args.filesData.length; i++) {
            var liparentDiv = ej.base.createElement('div', { className: 'image-list' });
            var liImage = ej.base.createElement('img', { className: 'image' });
            liparentDiv.appendChild(liImage);
            readURL(liImage, args.filesData[i]);
            document.getElementById('preview').appendChild(liparentDiv);
        }
        args.cancel = true;
    }

    function readURL(liImage, file) {
        var imgPreview = liImage;
        var imageFile = file.rawFile;
        var reader = new FileReader();
        reader.addEventListener('load', () => {
            imgPreview.src = reader.result;
        }, false);
        if (imageFile) {
            reader.readAsDataURL(imageFile);
        }
    }
</script>
.control_wrapper {
	max-width: 505px;
	margin: auto;
}

#preview {
	border: 2px dashed #ddd;
	padding: 15px;
}

.image-list {
	width: 134px;
	height: 117px;
	margin-right: 4px;
	border: 1px solid lightgrey;
	display: inline-block;
}

.image {
	width: 134px;
	height: 117px;
	margin-right: 4px;
	display: inline-block;
}

.e-control ul {
	border: 1px solid #ddd;
}

.e-control .e-file-select,
.e-control .e-file-drop {
	display: none;
}

.e-control {
	margin-top: 10px;
}

Explore the ASP.NET MVC File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET MVC File Upload example to see how to browse and select files for upload to the server.