OpenPicker is an open source and self hosted file picker for your websites.
$ npm i -g openpicker
$ npm i -g coffeescript$ openpicker<script type="text/javascript">
(function(window,document) {
window.openpicker = {};
var op = document.createElement('script'); op.type = 'text/javascript'; op.async = true;
op.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + '<ADD_YOUR_SERVER_HERE>/script/v1.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(op, s);
})(window,document);
</script>
OpenPicker defaults to picking Image
openpicker.getImage(function(openpickerResponse){
$('#image').attr('src',openpickerResponse.file.url);
});
OpenPicker defaults to picking Image
openpicker.getImages(function(openpickerResponse){
console.log(openpickerResponse.files);
});
OpenPicker defaults to picking Image
openpicker.getFile(function(openpickerResponse){
console.log(openpickerResponse.file);
});
OpenPicker defaults to picking Image
openpicker.getFile(
{
mimetypes: 'application/pdf'
}
function(openpickerResponse){
console.log(openpickerResponse.file);
}
);
OpenPicker defaults to picking Image
openpicker.getImage(
{
conversions:['crop','rotate'],
cropRatio:16/9,
}
function(openpickerResponse){
console.log(openpickerResponse.file);
}
);
OpenPicker defaults to picking Image
openpicker.getFiles(function(openpickerResponse){
console.log(openpickerResponse.files);
});
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script charset="utf-8" type="text/javascript">
$(function () {
$('#opbutton').click(function () {
window.openpicker.getFiles({
mimetypes: "image/*",
conversions: ['crop', 'rotate'],
cropRatio: 0 / 0,
subDirectory: 'your_usage_based_foler_name'
}, function (openpickerResponse) {
$('#opurl').text(openpickerResponse.file.url);
console.log(openpickerResponse);
});
});
});
</script>
<button id="opbutton"> Click here</button>
<h1 id="opurl"></h1>
<div ng-app="opApp">
<div ng-controller="opController">
<md-button style="background-color:
rgb(3,155,229);
font-weight: bolder;
padding: 2px 15px"
class="md-raised"
ng-click="vm.openPicker($event)"
aria-label="Add">
Create
</md-button>
</div>
</div>
(function () {
'use strict';
angular
.module('opApp')
.controller('opController', opController);
/* @ngInject */
function opController() {
var vm = this;
vm.openPicker = function (e) {
window.openpicker.getFiles({
mimetypes: "image/*",
conversions: ['crop', 'rotate'],
cropRatio: 0 / 0,
subDirectory: <your_usage_based_foler_name>,
multiple : false
}, function (openpickerResponse) {
console.log(openpickerResponse.files);
});
};
}
})();
OpenPicker expects a properties.conf file in the working directory. You can set the following options. You can set all the options in environment variables as well. Environment variables are given preference if set while reading a property.
FILESTORES=disk,s3 <comma seperated list, default: disk, only s3 and disk are supported as of now>
UPLOAD_DIRECTORY=<full path to disk location where you want to save files, default is ./uploads>
TEMPORARY_DIRECTORY=<full path to disk location where you want to save files temporarily, default is ./tmp>
ALLOWED_MIME_TYPES_REGEX = regex to give allowed mime types , default is
/.(avi|wmv|flv|mpg|3gp|mkv|mp4|mpeg|mpeg-1|mpeg-2|mpeg-3|mpeg-4|mp3|wav|xlsx?|zip|7z|docx?|pptx?|pdf|jpe?g|png|gif|csv|comma-separated-values)$/i
ALLOWED_IMAGE_TYPES_REGEX = regex to give allowed image types , default is
/.(jpe?g|png|gif)$/i
MIN_SIZE=minimum file size in bytes
MAX_SIZE=maximum file size in bytes
S3_BUCKET = name of s3 bucket
AWS_ACCESS_KEY_ID= Aws access key if you have configured s3 as a filestore
AWS_SECRET_ACCESS_KEY = Aws secret access key
AWS_REGION = Aws Region of the bucket where you are uploading the files
- MY_COMPUTER : Allows uploading file from current device
All these are optional , pass these while invoking openpicker.getFile()
- mimetypes : Comma seperated list of mimetypes (Ex: image/*,application/pdf)
- conversions : ['crop','rotate']
- cropRatio : Ex 16/9 - used while cropping the image, 0/0 to random aspect ratio
- channels : ['MY_COMPUTER'] - lets the client control channels to be used in the picker
- multiple: true// for multiple files and false for single file
- subDirectory : A variable name to upload files in different folders under base directory set in properties.conf file
OpenPicker uses a number of open source projects to work properly:
- NgFileUpload - Angular Directive to upload files by @danialfarid
- Cropper - jQuery plugin to crop images by @fengyuanchen
- Connect Multiparty - express middleware used in file uploads by @andrewrk
- AngularJS - HTML enhanced for web apps!
- Twitter Bootstrap - great UI boilerplate for modern web apps
- node.js - evented I/O for the backend
- Express - fast node.js network app framework @tjholowaychuk
- Request - Simplified HTTP client.
- Pretty Size - Helper utility to provide pretty printed file sizes (best used for logging or CLI output).
And of course OpenOpicker itself is open source with a public repository on GitHub.
- Write Tests
- Add more channels
- Add more filestores
- Editor Integrations like Quill.js
MIT