I have created a module that creates a form at frontend, but I'm unable to get the image upload preview out there.

Can we put preview.html in frontend/templates? If not, then how can I achieve it?

1 Answer 1


You can use js to do that, after upload image it will show on frontend,

var fimagesPreview = function(input, placeToInsertImagePreview) {
                var fileInput = document.getElementById('featured_img');
                var size = parseFloat(fileInput.files[0].size / (1024*1024)).toFixed(2);
                var filePath = fileInput.value;
                // Allowing file type
                var allowedExtensions = 
                if (!allowedExtensions.exec(filePath)) {
                    alert('Invalid file, Please upload only jpg/jpeg and png files are allowed with Max limit 5MB');
                    fileInput.value = '';
                    return false;
                } else {

                    if (input.files) {
                        if(size <= 5){
                            var filesAmount = input.files.length;
                            var reader = new FileReader();
                            reader.onload = function(event) {
                                jQuery('div.gallery-img').html('<img src="'+event.target.result+'"><span class="remove"><i class="fa fa-times" aria-hidden="true"></i></span>');
                        } else {
                            return false;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.