JSFiddle - React, Tailwind, and code Playground

by Mubasshir Pawle

HTML

<button id="choose">
Upload
</button>

JavaScript

var allowedExtensions = ['pdf', 'png', 'gif', 'jpeg', 'jpg', 'doc', 'docx'];
            var maxSize = 5242880;
            $('body').on('click', '#choose', function(e) {
var input = $(document.createElement("input"));
                    input.attr("type", "file");
                    input.attr('accept', '.' + allowedExtensions.join(', .'));
                    input.on('change', function (event) {
                        if(event.target.files.length === 1){
                            var file = event.target.files[0];
                            var size = file.size;
                            var type = file.type;
                            //getting just last part
                            type = type.substring(type.indexOf('/') + 1);
                            //checking if allowed
                            if(allowedExtensions.indexOf(type) === -1){
                                $scope.alert('File not supported', 'Currently we only support ' + allowedExtensions.join(', '), 'warning');
                                return;
                            }
                            //max Size
                            if(size > maxSize){
                                $scope.toast('File size shouldnot be more than 5MB');
                                return;
                            }
                            //uploading
                            var formData = new FormData();
                                                formData.append("file", file);
                                                formData.append("name", file.name);
                                                formData.append("extension", type);
                                                formData.append("id", 0);
                                                formData.append("post_id", 0);
                                                formData.append("uid", $localstorage.uid());
                                                formData.append('client_id',...