https://github.com/dundalek/pickfile
JavaScript file picker component supporting drag and drop, file chooser and remote URL
https://github.com/dundalek/pickfile
Last synced: 5 months ago
JSON representation
JavaScript file picker component supporting drag and drop, file chooser and remote URL
- Host: GitHub
- URL: https://github.com/dundalek/pickfile
- Owner: dundalek
- Created: 2013-04-15T07:41:48.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2020-02-07T20:18:40.000Z (over 5 years ago)
- Last Synced: 2024-11-18T11:53:33.018Z (7 months ago)
- Language: JavaScript
- Size: 28.3 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PickFile.js
This component can be used to easily load user files. See the [demo](https://dundalek.com/pickfile/).
## Features
- drag and drop, file chooser and remote URL support
- vanila JavaScript, no dependencies (browser HTML5 support is needed for drag and drop and multiple files)
- Bootstrap compatible
- CommonJS compatible
- MIT license
## Install
component install dundalek/pickfile
## Usage
Include it in page:
```javascript
var pf = new PickFile({
el: '#selector', // specify existing element, selector or domElement
datatype: 'Text',
onLoad: function(data, native) {
console.log(data); // loaded data
// native is either File instance or XHR object
},
onError: function(error) {
}
});
// or create new element, append to DOM manually
var pf = new PickFile();
document.body.appendChild(pf.el);
```
Type can be one of (letter case is significant, default is *Text*):
- ArrayBuffer
- BinaryString
- Text
### Downloader component
Widget to download a file. User can specify filename.
```javascript
var dl = new PickFile.Downloader({
el: '#downloader',
placeholder: 'Type a filename', // default: filename.txt
filename: 'YourFile.txt', // default: myfile.txt
type: 'text/html', // default: text/plain
content: 'some content here..',
// setup content provider
// will be called when user clicks save file button
getFile: function(cb) {
cb({
content: 'hello' ,
type: 'text/plain'
});
},
// using short version
getContent: function(cb) {
cb('hello');
}
});
```
## Compatibility
Tested in Chrome 26, Firefox 19, Opera 12. It might work in IE 10, but it has not been tested.