JSFiddle - React, Tailwind, and code Playground

by friek2k

HTML

<script src="http://blueimp.github.com/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<input id="fileupload" type="file" name="files[]" data-url="server/php/posttarget" multiple="multiple">
<div id="uploadProgress"></div>

JavaScript

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        start: function (e, data) {
            debugger;
            $('#uploadProgress').progressbar();
        },
        add: function (e, data) {
            
            $.getJSON('/example/fileExists', function (result) {
                
                //check if file exist, set filename to data to identify the object on progress and start
                //
                data.formData = result; // e.g. {id: 123}
                data.submit();
            });
        },
        done: function (e, data) {
            $('#uploadProgress').progressbar("destroy");
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },
        progressall: function (e, data) {
            
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#uploadProgress').progressbar({
                value: progress
            });
        }
    });
});