How to achieve invisible upload in ASP.NET Core File Upload

24 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.

@{
    var 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" };
}

<div class="control_wrapper">
    <div id='preview'></div>
    <ejs-uploader id="UploadFiles" selected="onSelect" allowedExtensions=".jpg, .jpeg,.png" asyncSettings="@asyncSettings"></ejs-uploader>
</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 Core File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET Core File Upload example to see how to browse and select files for upload to the server.