safrazik / knockout-file-bindings

HTML5 File bindings for knockout js with drag and drop and custom input buttons

React, Vue, TypeScript/JavaScript and PHP

I have been working as a developer for 10+ years including 5+ years remote working experience. I'm used to work comfortably 12+ hours per day.

I have developed:

• 📱 Mobile Apps with Cordova, React Native and Java (for Android)
• 🌐 (Progressive) Web Apps with Vue, React, TypeScript/JavaScript and PHP
• 🖥️ Desktop Apps with Electron and C# Forms
• 🔨 Frameworks, Libraries and Tools (that were used by developers)

Feel free to reach out to me if:

• You have a project to work with
• You want consultancy in your next big software
• You want help with your existing product/project

You can contact me via:

• Email: [email protected]
• Skype: safrazik

https://zetmel.com

knockout-file-bindings's Issues

How to Initialize the knockout-file-upload.

I am using this plugin and I want to initialize the uploader with some image.
I am making an edit scenario for, in another words, I uploaded an image, and when I go to another page to edit, The uploader is showing "no file selected"

here is the code.

function PhotoVM(id, attachmentId, photoAsString) {
  var self = this;
  self.AttachmentId = ko.observable(attachmentId);
  self.fileData = ko.observable({
      dataURL: ko.observable(),
      base64String: ko.observable(photoAsString),
  });
}

and here is the HTML

<div data-bind="fileDrag: fileData">
  <img data-bind="attr: { src: fileData().dataURL }, visible: fileData().dataURL,  style="width:100px;height:100px;">
  <input type="file" data-bind="fileInput: fileData, , customFileInput: {}">
</div>

fileDrag does not work in IE

Property "dataset" is not supported in IE and therefor "element.dataset" is undefined.
When replacing it with jQuery's .data() the problem can be fixed.

Preview PDF

When set accept="application/pdf" on input tag, can't preview the file.

Feature request: get notified when ALL properties are up to date

Hello, I'm binding a viewModel with these properties:

viewModel.fileData = ko.observable({
  file: ko.observable(),
  base64String: ko.observable(),
  dataURL: ko.observable()
});

and I've attached a function to dataURL, to be notified whenever the user change the image:

viewModel.fileData().dataURL.subscribe(function (dataURL) {
  // dataURL has changed do something with it!
});

Inside this function, I would like to access to the other fileData properties. Basically, I need the updated value of "file.type", but I'm not sure whether it's already been updated.

I would like to get notified when ALL properties are up to date.
Is there an easy way to implement that behaviour?

Publish on bower registry

This isn't really a code issue but I wasn't sure where else I could put it.

Is it possible for this package to be published on bower, as detailed here?

http://bower.io/docs/creating-packages/

Currently I am using the github URL directly, but it is the only library I am using this way. Publishing as a bower package would give some direction as to versioning and handling breaking changes.

Drag Drop pdf file always base64string, arrayBuffer & dataURL return null

Error when using ko.toJSON(viewModel)

Uncaught DOMException: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('file') does not support selection.code: 11message: "Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('file') does not support selection."name: "InvalidStateError"stack: "Error: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('file') does not support selection.↵ at Error (native)↵ at http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1904:60↵ at visitPropertiesOrArrayEntries (http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1935:17)↵ at mapJsObjectGraph (http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1903:9)↵ at http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1917:27↵ at visitPropertiesOrArrayEntries (http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1935:17)↵ at mapJsObjectGraph (http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1903:9)↵ at http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1917:27↵ at visitPropertiesOrArrayEntries (http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1935:17)↵ at mapJsObjectGraph (http://localhost:1404/Scripts/knockout-3.2.0.debug.js:1903:9)"**proto**: DOMException knockout-3.2.0.debug.js:1904(anonymous function) knockout-3.2.0.debug.js:1904visitPropertiesOrArrayEntries knockout-3.2.0.debug.js:1935mapJsObjectGraph knockout-3.2.0.debug.js:1903(anonymous function) knockout-3.2.0.debug.js:1917visitPropertiesOrArrayEntries knockout-3.2.0.debug.js:1935mapJsObjectGraph knockout-3.2.0.debug.js:1903(anonymous function) knockout-3.2.0.debug.js:1917visitPropertiesOrArrayEntries knockout-3.2.0.debug.js:1935mapJsObjectGraph knockout-3.2.0.debug.js:1903ko.toJS knockout-3.2.0.debug.js:1879ko.toJSON knockout-3.2.0.debug.js:1888(anonymous function) VM659:2InjectedScript._evaluateOn VM562:732InjectedScript._evaluateAndWrap VM562:665InjectedScript.evaluate

Feature request: handle file inputs with `multiple` attribute

Would be nice if the preview (and presumably other) functionality worked when the user is allowed to select multiple files.

<input type="file" multiple />

Bower package

Is there a bower package for this?

Issue loading data URL from server into file input

I can't seem to load my data URL into the file data url without getting this error. Can you help me out?

knockout-3.4.0.debug.js:3326 Uncaught TypeError: Unable to process binding "with: function (){return viewModel }"
Message: Unable to process binding "with: function (){return UserInfo }"
Message: Unable to process binding "with: function (){return Property }"
Message: Unable to process binding "fileInput: function (){return $root.usersettings().viewModel().fileData }"
Message: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

This is my code:

`function serverFileData(data) {
var self = this;

    self.dataURL = ko.observable(data.dataUrl);
    self.file = ko.observable(data.file);
}

self.fileData = ko.observable(new serverFileData(data.fileData));`

data.dataUrl = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA..."
data.file = { size: 2374844, type: "image/png" }

fileArray and dataURLArray are not in the same order and it's not possible to match them up

If you drag 5 documents onto a control, the dataURLArray is generated in a non-specific order, often leading to it being in a different order to the fileArray, this is bad since the data URL contains no identifying data about the file apart from type.

As an example, if I attach 4 .docx files and a .msg to a control:

The types of the files in fileArray in the order the array is in:

[
	"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
	"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
	"",
	"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
	"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
]

The start of the dataURLArray objects:

[
	"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBBQABgAIAAAAIQCshlBXjgEAA...",
	"data:;base64,0M8R4KGxGuEAAAAAAAAAAAAAAAAAAAAAPgADAP7/CQAGAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAAEAAAEgAAAAIAAAD+////AAA...",
	"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBBQABgAIAAAAIQCshlBXjgEA...",
	"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBBQABgAIAAAAIQCshlBXjgEA...",
	"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBBQABgAIAAAAIQBhd9IpggEA..."
]

As you can clearly see they're in a different order, and there is a high chance the .docx files are in the wrong order.

This is an issue for me as I am using the base64 component of the data URL to upload these files to the server with the data from the fileArray, which cannot be matched up if uploading more than one file.

Choose file button can only be pressed if clicked directly on text

The edges of the button don't seem to work, which can give the impression that it's broken if not clicked in the right area :)

Object does not support method 'split'

Hello, I've just downloaded the latest release 1.1.0.
I'm having 'object does not support 'split' method' on addRemoveCssClass (knockout-file-bindings.js:64:9).

Maybe the cause of the issue is here, at lines 275 and 280, since addCssClass has only two parameters:
addCssClass(buttonGroup, removeCssClass(buttonGroup, 'btn-group'), 'input-group-btn');
addCssClass(buttonGroup, removeCssClass(buttonGroup, 'input-group-btn'), 'btn-group');

Unfortunately if I change the two rows by removing the first buttonGroup parameter, another issue is then raised: Cannot read property 'classList' of null (knockout-file-bindings.js:66:13). The null object is an element having class 'custom-file-input-file-name'.
Maybe an 'if (fileNameInput)' should be added at line 317.

fileName option is not respected

According to the documentation, setting filename to false should suppress display of the file name. In fact this value does not appear anywhere in the binding code other than line 45 where it is declared with a value of true in defaultOptions.

maxfilesize param

Is it possible to add a max file size upload parameter? If someone tries to upload a file that's over a certain size "Max file size reached" error message should be displayed.

Remove objectURL support as it is experimental

Currently the library support objectURL even though it's not documented. But it's still is an experimental feature and rarely used.

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Issues with size of file being uploaded

I've found that when I'm using this binding to upload a file that is larger than about 20mb, then the base64String is often not set. I believe the binding takes too long to set this value, and when I use it, it is undefined. If I wait for a few seconds, then the value for base64String is eventually set.

Some way for restrict file types

It would be nice to have some way for restrict file types during select or drag. For example, it's possible to allow select only images using accept attribute of input element, but in the same time user can drag any of file type.

Way to disable ability to change picture after it has been selected?

Much appreciated!

CDN + TypeScript TypeDefintion

I like this project, but I dont see any CDN hosting it. Can we get this added to any one CDN.

Also was not able to find the TypeDefinition. Can we get the typedefinition for the same.

Thanks

Object does not support method 'readAsBinaryString'

I'm having an issue with both 1.0.0 and 1.1.0 releases.
If I configure my view model for a single file, as explained in Advanced usage:

viewModel.fileData = ko.observable({
file: ko.observable(),
binaryString: ko.observable(),
dataURL: ko.observable()
});

an issue is raised at knockout-file-bindings, line 200: Object does not support method 'readAsBinaryString'.
Value of reader[method] is undefined, hence the error.

Get rid of jQuery dependence

Pity this plugin is jQuery-dependant =( And it is not mensioned anywhere.
It would be nice to have a clean knockout-plugin =)

Initial Data

Hello, i'm trying to show an initial image that comes as a base64string but i can't manage it.

It's possible?

My knockout Object:
self.imagenBase64 = ko.observable("");
self.fileData = ko.observable({
file: ko.observable(),
dataURL: ko.observable(),
base64String: ko.observable()
});
self.fileData().base64String.subscribe(function (base64String) {
self.imagenBase64 = base64String;
});

When loading page i load a base64string and set it but do not appear at the page:
I have try with the following where base64String = the image as a base64:
self.fileData().file(base64String);
self.fileData().dataURL(base64String);
self.fileData().base64String(base64String);

And the viewModel

What i'm doing wrong?

Thanks

fileData().text does not populate

First, thanks for the great set of bindings. I think I've spotted an issue though in text population. When uploading a text document the base64String is returned, but text seems not to be.

I've prepared a codepen based on your example:

http://codepen.io/anon/pen/VYMBxo

Thanks!

base64StringArray Size

I am using base64StringArray, base64String but on some cases it has more items than fileArray and dataURLArray.

Usually it happens when i add 3 files, clear and then add 2 files for example

I notice that this library generates the base64String, is there a way to trigger the base64String update and detect when is finished?

How to support progress bar?

does it works with multiple files input ??