I have created a module that creates a form at frontend. I'm enable to get the image upload preview out there. can we put preview.html in frontend/templates? If not then how can i achieve it.. Please help!

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, privacy policy and cookie policy

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