knockout-file-bindings
HTML5 File bindings for knockout js with drag and drop support and custom input buttons
See it in action
Basic Usage
View Model
viewModelfileData = ko; viewModeldataURL;
along with dataURL
, you can have any of bindaryString
, text
, arrayBuffer
or base64String
based on your needs. See Anvanced Usage section below
View
With custom file input (knockout-file-bindings.css
should be included)
<!-- with custom file input: -->
with Drag and Drop container (knockout-file-bindings.css
should be included)
with an Upload preview
Advanced usage
View Model
kofileBindingsdefaultOptions = wrapperClass: 'input-group' fileNameClass: 'disabled form-control' noFileText: 'No file chosen' buttonGroupClass: 'input-group-btn' buttonClass: 'btn btn-primary' clearButtonClass: 'btn btn-default' buttonText: 'Choose File' changeButtonText: 'Change' clearButtonText: 'Clear' fileName: true // show the selected file name? clearButton: true // show clear button? { if typeof fileDataclear === 'function' fileDataclear; }; // change a default optionkofileBindingsdefaultOptionsbuttonText = 'Browse'; viewModelfileData = ko; viewModeltext; viewModelbase64String;
Recommended: Reading HTML5 files
View
Drag file here
Multiple file Uploads
View
To support multiple files to be selected, you should add HTML5 multiple
attribute
View Model
you should have the fileData
object exactly like above, except you can add xxxArray
observable array properties where xxx
is either file
, bindaryString
, text
, dataURL
, arrayBuffer
or base64String
viewModelfileData = ko; viewModelfileArray;