krajee bootstrap file input in a form with other input fields

$(document).on('ready', function() {
    $("#nom-foto").fileinput({
        uploadUrl: 'grabafoto.php',
        dropZoneEnabled: false, 
        previewFileType: "image",
        allowedFileExtensions: ["jpg", "gif", "png"] ,        
        browseClass: "btn btn-success",
        browseLabel: "Selecciona",
        browseTitle: "Selecciona la foto",
        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
        removeClass: "btn btn-danger",
        removeLabel: "Borrar",
        removeTitle: "Anula foto seleccionada",        
        removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
        uploadClass: "btn btn-info",
        uploadLabel: "Grabar",
        uploadTitle: "Graba la foto seleccionada",        
        uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> ",
        previewClass: "bg-warning",
        initialCaption: "Selecciona la foto",
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/css/fileinput.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/themes/gly/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.5/js/locales/es.js"></script>

<div class="container">
<form name="modifart" action="" method="post">
<div class='col-xs-12 col-sm-6 col-md-6'>
               	<h3><span class='label label-info'>DATOS NUEVOS</span></h3>
				<div class='well well-sm'>
					<div class='row'>
						<div class='col-sm-12 col-md-12'>
                            <textarea name='obsart' class='form-control' rows='6'></textarea>
                        </div>
                    </div>
                    <div class='row'>
						<div class='col-sm-12 col-md-12'>
							<h4 align='center'><span class='label label-primary'>ADJUNTAR FOTO</span></h4>
							<input id='nom-foto' name='nom-foto' type='file' accept='image/*' class='file-loading' >
						</div>
					</div>
				</div>
        	</div>
  
<div align="center"><input type="submit" class="btn btn-danger" name="send_modif" value="Notificar CAMBIOS" formaction="grabar_modificaciones.php"></div>
</form>
  </div>