submit.html

<link type="text/css" rel="stylesheet" href="{{ url_for( 'send_app_files', path = 'dropzone.css' ) }}">

<form id="icnml_submission_form">
    <div class="ui-widget-header ui-corner-top icnml_box_top">Submition form</div>
    <div class="ui-widget-content ui-corner-bottom icnml_box_content">
        <div class="icnml_box_fields">
            <div style="text-align: right;">
                <label for="upload_nickname">Submission nickname</label>
            </div>
            <div>
                <input id="upload_nickname" name="upload_nickname" type="text" style="width: 100%">
            </div>
            
            <div style="text-align: right;">
                <label for="email">Donnor e-mail</label>
            </div>
            <div>
                <input id="email" name="email" type="text" style="width: 100%">
            </div>
            
            <div style="text-align: right;">
                <label for="email_confirmation">Donnor e-mail confirmation</label>
            </div>
            <div>
                <input id="email_confirmation" name="email_confirmation" type="text" style="width: 100%">
            </div>
            
            <div style="text-align: right;">
                <label for="consent_form">Consent form</label>
            </div>
            <div>
                <div id="consent_form_dropzone" class="dropzone"></div>
            </div>
            
            <div style="text-align: right;">
                <label for="tenprint_card">Tenprint card(s)</label>
            </div>
            <div>
                <div id="tenprint_card_dropzone" class="dropzone"></div>
            </div>
            
            <div style="text-align: right;">
                <label for="latents">Latent</label>
            </div>
            <div>
                <div id="latents_dropzone" class="dropzone"></div>
            </div>
        </div>
        
        <div id="icnml_sub_error" class="icnml_box_error"></div>
        
        <div class="icnml_button">
            <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="next_button" role="button" aria-disabled="false">
                <span class="ui-button-text">Next</span>
            </a>
        </div>
    </div>
</form>

<script type="text/javascript">
    Dropzone.autoDiscover = false;
    function sleep( ms ) {
        return new Promise( resolve => setTimeout( resolve, ms ) );
    }
    
    $( function()
    {
        new Dropzone(
            "#consent_form_dropzone",
            {
                url: baseurl + "/upload",
                timeout: 600000,
                params: {
                	'upload_type': 'consent_form',
            	}
            }
        )
        .on( 'addedfile', function( file )
        {
        	$( '#consent_form_dropzone > .dz-default.dz-message' ).remove();
        } )
        .on( "success", function( p ) {
            var response = JSON.parse( p.xhr.response );
            console.log( response );
        } )
        .on( "error", function( p )
        {
            console.log( p );
            toastr.error( "Error" );
        } );
    } );
    
    $( function()
    {
        new Dropzone(
            "#tenprint_card_dropzone",
            {
                url: baseurl + "/upload",
                timeout: 600000,
                params: {
                	'upload_type': 'tenprint_card',
            	}
            }
        )
        .on( 'addedfile', function( file )
        {
        	$( '#tenprint_card_dropzone > .dz-default.dz-message' ).remove();
        } )
        .on( "success", function( p ) {
            var response = JSON.parse( p.xhr.response );
            console.log( response );
        } )
        .on( "error", function( p )
        {
            console.log( p );
            toastr.error( "Error" );
        } );
    } );
    
    $( function()
    {
        new Dropzone(
            "#latents_dropzone",
            {
                url: baseurl + "/upload",
                timeout: 600000,
                params: {
                	'upload_type': 'latent',
            	}
            }
        )
        .on( 'addedfile', function( file )
        {
        	$( '#latents_dropzone > .dz-default.dz-message' ).remove();
        } )
        .on( "success", function( p ) {
            var response = JSON.parse( p.xhr.response );
            console.log( response );
        } )
        .on( "error", function( p )
        {
            console.log( p );
            toastr.error( "Error" );
        } );
    } );
    
    var validate_form = function()
	{
    	$( '#icnml_sub_error' ).text( "" );
    	
    	var upload_nickname = $( '#upload_nickname' ).val();
    	
    	var email = $( '#email' ).val();
    	var email_conf = $( '#email_confirmation' ).val();
    	
    	if( ! email )
		{
    		$( '#icnml_sub_error' )
    			.text( "The e-mail can not be empty" );
		}
    	else if( email !== email_conf )
		{
    		$( '#icnml_sub_error' )
    			.text( "The e-amils fields does not match" );
		} else {
			$.ajax( {
	            url: '{{ url_for( 'create_submission_case' ) }}',
	            dataType: 'json',
	            method: 'POST',
	            data: {
	            	upload_nickname: upload_nickname,
	            	email: email
	            },
	            success: function( data )
	            {
	                if( ! data.error )
	                {
	                	toastr.success( "Case id: " + data.id, "Case created" );
	                } else {
	                	toastr.error( data.msg, "Case not created" );
	                }
	            }
	        } );
		}
	}
    
    $( '#next_button' ).on( 'click', validate_form );
    
    $( '#upload_nickname' ).focus();
</script>