JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="content">
    OS <input id="os"><br/>
    OS Name<input id="osname"><br/>
    <input id="upload" type="file"/>
<button id="submitme" >Upload</button>        
</div>

JavaScript

/*
// jQuery Ajax File Uploader
//
// @author: Jordan Feldstein <jfeldstein.com>
//
//  - Ajaxifies an individual <input type="file">
//  - Files are sandboxed. Doesn't matter how many, or where they are, on the page.
//  - Allows for extra parameters to be included with the file
//  - onStart callback can cancel the upload by returning false
*/


(function($) {
    $.fn.ajaxfileupload = function(options) {
        var settings = {
            params: {},
            action: '',
            onStart: function() {
                console.log('starting upload');
                console.log(this);
            },
            onComplete: function(response) {
                console.log('got response: ');
                console.log(response);
                console.log(this);
            },
            onCancel: function() {
                console.log('cancelling: ');
                console.log(this);
            },
            valid_extensions: ['gif', 'png', 'jpg', 'pdf'],
            submit_button: null
        };

        var uploading_file = false;

        if (options) {
            $.extend(settings, options);
        }


        // 'this' is a jQuery collection of one or more (hopefully) 
        //  file elements, but doesn't check for this yet
        return this.each(function() {
            var $element = $(this);

            // Skip elements that are already setup. May replace this 
            //  with uninit() later, to allow updating that settings
            if ($element.data('ajaxUploader-setup') === true) return;
/*
            $element.change(function() {
                // since a new image was selected, reset the marker
                uploading_file = false;

                // only update the file from here if we haven't assigned a submit button
                if (settings.submit_button == null) {
                    upload_file();
                }
            });
*/
            if (settings.submit_button == null) {
                // do...