INSPINIA | File Upload

## File upload

##### File inputs example

The file input feature by Jasny allows you to create a visually appealing file or image input widgets based on the Bootstrap style. Additional dropzone.js library gives you drag’n’drop file uploads option.

##### Input group example

Select fileChange Remove

HTML markup code for abowe example:

<div class="fileinput fileinput-new input-group" data-provides="fileinput"> <div class="form-control" data-trigger="fileinput"> <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span> </div> <span class="input-group-addon btn btn-default btn-file"> <span class="fileinput-new">Select file</span> <span class="fileinput-exists">Change</span> <input type="file" name="..."/> </span> <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> </div>

##### Button example

Select fileChange ×

HTML markup code for abowe example:

<div class="fileinput fileinput-new" data-provides="fileinput"> <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span> <span class="fileinput-exists">Change</span><input type="file" name="..."/></span> <span class="fileinput-filename"></span> <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a> </div>

##### Dropzone.js

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.

HTML markup code for abowe example:

<form action="#" class="dropzone" id="dropzoneForm"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form>

All avalible options and full documentation you can find: http://www.dropzonejs.com/#configuration-options