2359 lines
91 KiB
HTML
2359 lines
91 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head><meta http-equiv="Content-Type" content="text/html; charset=gb18030">
|
|
<title>Documentation · Fileuploader | Innostudio.de</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Welcome to Fileuploader's documentation. The documentation describes all options and features so you will see that the Fileuploader can be easily implemented in many systems.">
|
|
<link href="https://innostudio.de/fileuploader/images/favicon.png" rel="shortcut icon" /><!-- fonts -->
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
|
|
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" rel="stylesheet" /><!-- styles -->
|
|
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet" />
|
|
<style type="text/css">html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'SukhumvitSet-Medium', sans-serif;
|
|
font-size: 14px;
|
|
line-height: normal;
|
|
background-color: #fff;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul li ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
ul.list-styled {
|
|
list-style: disc;
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.flex-container {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
background-color: #fff;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.sidebar {
|
|
background: #fafbfd;
|
|
padding: 30px;
|
|
min-width: 256px;
|
|
border-right: 1px solid #ebeef1;
|
|
color: #5b5b7b;
|
|
}
|
|
|
|
.sidebar .logo {
|
|
padding: 30px;
|
|
margin: -30px;
|
|
margin-bottom: 0;
|
|
color: #fff;
|
|
background: #9658fe;
|
|
background: -moz-linear-gradient(-45deg, #3a8ffe 0%, #9658fe 100%);
|
|
background: -webkit-linear-gradient(-45deg, #3a8ffe 0%, #9658fe 100%);
|
|
background: linear-gradient(135deg, #3a8ffe 0%, #9658fe 100%);
|
|
border-bottom: 1px solid #ebeef1;
|
|
}
|
|
.sidebar .logo h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
.sidebar .logo h5 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.sidebar .logo a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar .menu {
|
|
margin-top: 26px;
|
|
}
|
|
.sidebar .menu li a {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: inherit;
|
|
margin-bottom: 16px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
.sidebar .menu li a:hover {
|
|
text-decoration: none;
|
|
}
|
|
.sidebar .menu li a[href]:hover,
|
|
.sidebar .menu li a:focus {
|
|
text-decoration: none;
|
|
color: #5b7bfe;
|
|
}
|
|
.sidebar .menu li ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 30px;
|
|
}
|
|
.sidebar .menu li ul li a {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.content {
|
|
background: #fff;
|
|
width: 100%;
|
|
padding: 30px;
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
color: #979fb8;
|
|
line-height: 24px;
|
|
}
|
|
.content h1,
|
|
.content h2,
|
|
.content h3,
|
|
.content h4,
|
|
.content h5 {
|
|
font-weight: bold;
|
|
color: #5b5b7b;
|
|
margin-top: 40px;
|
|
}
|
|
.content a {
|
|
color: #5b7bfe;
|
|
}
|
|
.content .highlight {
|
|
padding: 16px;
|
|
background: #fafbfd;
|
|
border: 1px solid #ebeef1;
|
|
border-radius: 6px;
|
|
color: #74809d;
|
|
}
|
|
.content .fas,
|
|
.content .far {
|
|
display: inline-block;
|
|
width: 18px;
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
font-size: 18px;
|
|
color: #979fb8;
|
|
}
|
|
.content .folder-structure li {
|
|
padding: 4px 0;
|
|
}
|
|
.content .folder-structure li i {
|
|
margin-right: 4px;
|
|
}
|
|
.content code {
|
|
background: #ebeef1;
|
|
color: #74809d;
|
|
}
|
|
.content .prettyprint {
|
|
background: #fafbfd;
|
|
padding: 18px;
|
|
border: 0;
|
|
word-break: break-word;
|
|
}
|
|
.content .prettyprint code {
|
|
background: none;
|
|
color: #7F8A96;
|
|
}
|
|
.changelog-content ul {
|
|
list-style: disc;
|
|
margin-left: 40px;
|
|
}
|
|
.changelog-content ul li ul {
|
|
list-style: circle;
|
|
margin-left: 0px;
|
|
}
|
|
.text-danger {
|
|
color: #F26175;
|
|
}
|
|
.footer {
|
|
margin-top: 40px;
|
|
padding-top: 30px;
|
|
border-top: 1px solid #ebeef1;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<!-- js --><script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script><script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script><script>
|
|
$(document).ready(function() {
|
|
var $content = $('.content'),
|
|
$menu = $('.sidebar .menu'),
|
|
showSection = function(id) {
|
|
var $section,
|
|
subsection,
|
|
scrollTo = 0;
|
|
|
|
if (/^options-/.test(id)) {
|
|
subsection = id;
|
|
id = 'options';
|
|
}
|
|
|
|
$section = $content.find('section#' + id);
|
|
|
|
if (!$section.length)
|
|
$section = $content.find('section#intro');
|
|
$content.find('section').hide();
|
|
$section.show();
|
|
|
|
if (subsection)
|
|
scrollTo = $section.find('#' + subsection).offset().top;
|
|
|
|
$(window).scrollTop(scrollTo);
|
|
};
|
|
|
|
$(window).on('hashchange', function() {
|
|
var hash = window.location.hash.replace('#', '');
|
|
|
|
showSection(hash || 'intro');
|
|
}).trigger('hashchange');
|
|
});
|
|
</script>
|
|
<style type="text/css">/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
|
|
.prettyprint.prettyprinted{background:#1d1f21;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#c5c8c6}ol.linenums{margin-top:0;margin-bottom:0;color:#969896}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#1d1f21;list-style-type:decimal}@media screen{.str{color:#b5bd68}.kwd{color:#b294bb}.com{color:#969896}.typ{color:#81a2be}.lit{color:#de935f}.pun{color:#c5c8c6}.opn{color:#c5c8c6}.clo{color:#c5c8c6}.tag{color:#c66}.atn{color:#de935f}.atv{color:#8abeb7}.dec{color:#de935f}.var{color:#c66}.fun{color:#81a2be}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="flex-container">
|
|
<div class="sidebar">
|
|
<div class="logo">
|
|
<h1><a href="https://innostudio.de/fileuploader/">fileuploader</a></h1>
|
|
|
|
<h5><a href="#intro">Documentation</a></h5>
|
|
</div>
|
|
|
|
<ul class="menu">
|
|
<li><a href="#installation">Installation</a></li>
|
|
<li><a href="#how-to-use">How to use</a></li>
|
|
<li><a href="#examples">Examples</a></li>
|
|
<li><a href="#options">Options</a>
|
|
<ul>
|
|
<li><a href="#options-validations">Validations</a></li>
|
|
<li><a href="#options-templates">Templates</a></li>
|
|
<li><a href="#options-drag-drop">Drag&Drop</a></li>
|
|
<li><a href="#options-ajax">Ajax</a></li>
|
|
<li><a href="#options-preload-files">Preload files</a></li>
|
|
<li><a href="#options-image-editor">Image editor</a></li>
|
|
<li><a href="#options-sorter">Sorter</a></li>
|
|
<li><a href="#options-callbacks">Callbacks</a></li>
|
|
<li><a href="#options-captions">Languages</a></li>
|
|
<li><a href="#options-others">Others</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#input-attributes">Input attributes</a></li>
|
|
<li><a href="#text-variables">Text variables</a></li>
|
|
<li><a href="#api">Api</a></li>
|
|
<li><a href="#php">PHP</a></li>
|
|
<li><a href="#nodejs">Node.js</a></li>
|
|
<li><a>Third Parties</a>
|
|
<ul>
|
|
<li><a href="#amazons3">Amazon S3</a></li>
|
|
<li><a href="#laravel">Laravel</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#license">License</a></li>
|
|
<li><a href="#changelog">Changelog</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<section id="intro">
|
|
<h2>Fileuploader Documentation</h2>
|
|
|
|
|
|
<p>Welcome to Fileuploader's documentation.</p>
|
|
|
|
<p>Fileuploader is a beautiful and powerful HTML5 file upload plugin. A jQuery, PHP and Node.js tool that transforms the standard file input into a revolutionary and fancy field on your page. The Fileuploader Javascript plugin works for servers based on ASP.NET, C#, Python and others that supports standard HTML form file uploads as well.</p>
|
|
|
|
<p>The documentation describes all options and features so you will see that the Fileuploader can be easily implemented in many systems. In average, you need less than five minutes to link the plugin files into your HTML page to get your new file input working.</p>
|
|
|
|
<h3>What's included</h3>
|
|
|
|
<p>Checkout the files that you'll see upon downloading.</p>
|
|
|
|
<div class="highlight">
|
|
<ul class="folder-structure">
|
|
<li><i class="fas fa-folder-open"></i> dist
|
|
<ul>
|
|
<li><i class="fas fa-folder"></i> font</li>
|
|
<li><i class="far fa-file"></i> jquery.fileuploader.min.css</li>
|
|
<li><i class="far fa-file"></i> jquery.fileuploader.min.js</li>
|
|
</ul>
|
|
</li>
|
|
<li><i class="fas fa-folder"></i> examples</li>
|
|
<li><i class="fas fa-folder-open"></i> src
|
|
<ul>
|
|
<li><i class="fas fa-folder-open"></i> php
|
|
<ul>
|
|
<li><i class="far fa-file"></i> class.fileuploader.php</li>
|
|
</ul>
|
|
</li>
|
|
<li><i class="fas fa-folder-open"></i> node
|
|
<ul>
|
|
<li><i class="far fa-file"></i> fileuploader.js</li>
|
|
<li><i class="far fa-file"></i> package.json</li>
|
|
</ul>
|
|
</li>
|
|
<li><i class="fas fa-folder-open"></i> thirdparty
|
|
<ul>
|
|
<li><i class="fas fa-folder"></i> s3</li>
|
|
</ul>
|
|
</li>
|
|
<li><i class="far fa-file"></i> jquery.fileuploader.sass</li>
|
|
<li><i class="far fa-file"></i> jquery.fileuploader.js</li>
|
|
</ul>
|
|
</li>
|
|
<li><i class="far fa-file"></i> documentation.html</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3>Contact Us</h3>
|
|
|
|
<p>Please don't hesitate to contact us with any regarding questions or other business inquiries using <a href="#chatra">live chat</a> or write an email to <a href="mailto:contact@innostudio.de">contact@innostudio.de</a>. We are looking forward to answer your questions within 24 hours.</p>
|
|
|
|
<h3>Getting started</h3>
|
|
|
|
<p>Get started with the <a href="#installation">installation</a> instructions.</p>
|
|
</section>
|
|
|
|
<section id="installation">
|
|
<h2>Installation</h2>
|
|
|
|
<p>Get the plugin zip file on the <a href="https://innostudio.de/fileuploader/#download">download page</a>. We have to install Fileuploader by linking in our document <code><head></code> the <b>css</b> and <b>js</b> files from <b>dist</b> folder. Also don't forget to load jQuery library.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-html"><!-- font -->
|
|
<link href="dist/font/font-fileuploader.css" media="all" rel="stylesheet">
|
|
|
|
<!-- css -->
|
|
<link href="dist/jquery.fileuploader.min.css" media="all" rel="stylesheet">
|
|
|
|
<!-- js -->
|
|
<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
|
|
<script src="dist/jquery.fileuploader.min.js" type="text/javascript"></script></code></pre>
|
|
|
|
|
|
<p>With the files in place we can now <a href="#how-to-use">set up the Fileuploader instance</a>.</p>
|
|
</section>
|
|
|
|
<section id="how-to-use">
|
|
<h2>How to use</h2>
|
|
|
|
<p>Create a standard HTML form element. In this form we will have our file input and maybe other fields. We don't need to put the file input into a <code><form></code> element if we want to upload the files separately using Ajax.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-html"><form action="submit.php" method="post" enctype="multipart/form-data">
|
|
<!-- file input -->
|
|
<input type="file" name="files">
|
|
|
|
<input type="submit">
|
|
</form></code></pre>
|
|
|
|
|
|
<p>Select a file input element with a jQuery selector and call the <code>fileuploader</code> method.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-html"><script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$('input[name="files"]').fileuploader({
|
|
// Options will go here
|
|
});
|
|
});
|
|
</script></code></pre>
|
|
|
|
<p>While using a Node.js server or others besides PHP, consider to set the option <code>inputNameBrackets: false</code>.</p>
|
|
|
|
<p>Now when we have the first view of Fileuploader working, we can configurate it using the <a href="#examples">examples</a> or the <a href="#options">options section</a>.</p>
|
|
</section>
|
|
|
|
<section id="examples">
|
|
<h2>Examples</h2>
|
|
|
|
<p>In the following examples we collected different usages of the Fileuploader. Don't forget that some examples have subfolders for different modes and that you can combine examples together. Please check all .css, .js and .php files from the examples.</p>
|
|
|
|
<p>Check also the Inspect Element tool (Network, Sources and Console tab) in your browser to understand the configuration much easier.</p>
|
|
<b>Modes:</b>
|
|
|
|
<ul class="list-inline">
|
|
<li><a href="examples/default/" target="_blank">Default</a></li>
|
|
<li><a href="examples/add-more/" target="_blank">Add More</a></li>
|
|
<li><a href="examples/drag-drop/" target="_blank">Ajax mode</a></li>
|
|
<li><a href="examples/drag-drop-form/" target="_blank">Drag&Drop with form submit</a></li>
|
|
</ul>
|
|
<br />
|
|
<b>Themes:</b>
|
|
|
|
<ul class="list-inline">
|
|
<li><a href="examples/default/" target="_blank">Default</a></li>
|
|
<li><a href="examples/one-button/" target="_blank">One-button</a></li>
|
|
<li><a href="examples/drag-drop/" target="_blank">Drag&Drop</a></li>
|
|
<li><a href="examples/drag-drop-form/" target="_blank">Drop-In</a></li>
|
|
<li><a href="examples/boxafter/" target="_blank">Box-After</a></li>
|
|
<li><a href="examples/thumbnails/" target="_blank">Thumbnails</a></li>
|
|
</ul>
|
|
<br />
|
|
<b>Preloaded files:</b>
|
|
|
|
<ul class="list-inline">
|
|
<li><a href="examples/preloaded-files/" target="_blank">Preloaded files</a></li>
|
|
</ul>
|
|
<br />
|
|
<b>Image editor:</b>
|
|
|
|
<ul class="list-inline">
|
|
<li><a href="examples/image-editor/default/" target="_blank">Image editor in a form</a></li>
|
|
<li><a href="examples/image-editor/upload/" target="_blank">Image editor with ajax</a></li>
|
|
<li><a href="examples/image-editor/client-side/" target="_blank">Client-side image editor</a></li>
|
|
</ul>
|
|
<br />
|
|
<b>File sorter:</b>
|
|
|
|
<ul class="list-inline">
|
|
<li><a href="examples/sorter/default/" target="_blank">File sorter in a form</a></li>
|
|
<li><a href="examples/sorter/upload/" target="_blank">File sorter with ajax</a></li>
|
|
</ul>
|
|
<br />
|
|
<b>Others:</b>
|
|
|
|
<ul class="list-inline">
|
|
<li><a href="examples/gallery/" target="_blank">Gallery</a></li>
|
|
<li><a href="examples/avatar/" target="_blank">Avatar example</a></li>
|
|
<li><a href="examples/default-upload/" target="_blank">Custom file name</a></li>
|
|
<li><a href="examples/pdf/" target="_blank">PDF viewer</a></li>
|
|
<li><a href="examples/api/" target="_blank">API methods</a></li>
|
|
<li><a href="examples/php-generated-input/" target="_blank">Generated input with PHP</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="options">
|
|
<h2>Options</h2>
|
|
|
|
<p>Available options are listed below. Remember! In all text options you can use <a href="#text-variables">Text Variables</a> or functions which are returning text.</p>
|
|
|
|
<h3 id="options-validations">Validations</h3>
|
|
|
|
<p><span class="text-danger">Note!</span> to set the same validations on the backend.</p>
|
|
|
|
<p>1. limit of the choosen and preloaded files <code>{null, Number}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// if null - has no limits
|
|
// example: 3
|
|
limit: null</code></pre>
|
|
|
|
<p>2. maximal size in MB of the choosen and preloaded files together <code>{null, Number}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// if null - has no limits
|
|
// example: 3
|
|
maxSize: null</code></pre>
|
|
|
|
<p>3. maximal size of each choosen file in MB <code>{null, Number}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// if null - has no limits
|
|
// example: 3
|
|
fileMaxSize: null</code></pre>
|
|
|
|
<p>4. allowed extensions or file types <code>{null, Array}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// if null - has no limits
|
|
// example: ['jpg', 'jpeg', 'png', 'text/plain', 'audio/*']
|
|
extensions: null</code></pre>
|
|
|
|
<p>5. disallowed extensions or file types <code>{null, Array}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// if null - has no limits
|
|
// example: ['jpg', 'jpeg', 'png', 'text/plain', 'audio/*']
|
|
disallowedExtensions: null</code></pre>
|
|
|
|
<p>We can use the <code>onFilesCheck</code> callback from the <a href="#options-callbacks">callbacks section</a> to add our own validation function.</p>
|
|
|
|
<h3 id="options-templates">Templates</h3>
|
|
|
|
<p>1. add theme class name to fileuploader <code>{null, String}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// the class name will be: fileuploader-theme-default
|
|
theme: 'default'</code></pre>
|
|
|
|
<p>2. change the file input <code>{Boolean, String, Function, jQuery Object}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// example: true
|
|
// example: ' ' - no input
|
|
// example: '<div>Click me</div>'
|
|
// example: function(options) { return '<div>Click me</div>'; }
|
|
// example: $('.selector')
|
|
changeInput: true</code></pre>
|
|
|
|
<p>3. thumbnails for files <code>{null, Object}</code></p>
|
|
|
|
<pre class="prettyprint"><code data-code="language-javascript">thumbnails: {
|
|
// thumbnails list HTML {String, Function}
|
|
// example: '<ul></ul>'
|
|
// example: function(options) { return '<ul></ul>'; }
|
|
box: '<div class="fileuploader-items">' +
|
|
'<ul class="fileuploader-items-list"></ul>' +
|
|
'</div>',
|
|
|
|
// append thumbnails list to selector {null, String, jQuery Object}
|
|
// example: 'body'
|
|
boxAppendTo: null,
|
|
|
|
// thumbnails for the choosen files {String, Function}
|
|
// example: '<li>${name}</li>'
|
|
// example: function(item) { return '<li>' + item.name + '</li>'; }
|
|
item: '<li class="fileuploader-item">' +
|
|
'<div class="columns">' +
|
|
'<div class="column-thumbnail">${image}<span class="fileuploader-action-popup"></span></div>' +
|
|
'<div class="column-title">' +
|
|
'<div title="${name}">${name}</div>' +
|
|
'<span>${size2}</span>' +
|
|
'</div>' +
|
|
'<div class="column-actions">' +
|
|
'<button class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></a>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="progress-bar2">${progressBar}<span></span></div>' +
|
|
'</li>',
|
|
|
|
// thumbnails for the preloaded files {String, Function}
|
|
// example: '<li>${name}</li>'
|
|
// example: function(item) { return '<li>' + item.name + '</li>'; }
|
|
item2: '<li class="fileuploader-item">' +
|
|
'<div class="columns">' +
|
|
'<div class="column-thumbnail">${image}<span class="fileuploader-action-popup"></span></div>' +
|
|
'<div class="column-title">' +
|
|
'<a href="${file}" target="_blank">' +
|
|
'<div title="${name}">${name}</div>' +
|
|
'<span>${size2}</span>' +
|
|
'</a>' +
|
|
'</div>' +
|
|
'<div class="column-actions">' +
|
|
'<a href="${file}" class="fileuploader-action fileuploader-action-download" title="${captions.download}" download><i class="fileuploader-icon-download"></i></a>' +
|
|
'<button class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i class="fileuploader-icon-remove"></i></a>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</li>',
|
|
|
|
// thumbnails selectors
|
|
_selectors: {
|
|
list: '.fileuploader-items-list',
|
|
item: '.fileuploader-item',
|
|
start: '.fileuploader-action-start',
|
|
retry: '.fileuploader-action-retry',
|
|
remove: '.fileuploader-action-remove',
|
|
sorter: '.fileuploader-action-sort',
|
|
popup: '.fileuploader-popup-preview',
|
|
popup_open: '.fileuploader-action-popup'
|
|
},
|
|
|
|
// insert the thumbnail's item at the begining of the list? {Boolean}
|
|
itemPrepend: false,
|
|
|
|
// show a confirmation dialog by removing a file? {Boolean}
|
|
// it will not be shown in upload mode by canceling an upload
|
|
// you can call your own dialog box using dialogs option
|
|
removeConfirmation: true,
|
|
|
|
// render the image thumbnail? {Boolean}
|
|
// if false, it will generate an icon(you can also hide it with css)
|
|
// if false, you can use the API method item.renderThumbnail() to render it (check thumbnails example)
|
|
startImageRenderer: true,
|
|
|
|
// render the images synchron {Boolean}
|
|
// used to improve the browser speed
|
|
synchronImages: true,
|
|
|
|
// read image using URL createObjectURL method {Boolean}
|
|
// if false, it will use readAsDataURL
|
|
useObjectUrl: false,
|
|
|
|
// render the image in a canvas element {Boolean, Object}
|
|
// if true, it will generate an image with the css sizes from the parent element of ${image}
|
|
// you can also set the width and the height in the object {width: 96, height: 96}
|
|
canvasImage: true,
|
|
|
|
// render thumbnail for video files? {Boolean}
|
|
videoThumbnail: false,
|
|
|
|
// fix exif orientation {Boolean}
|
|
exif: true,
|
|
|
|
// Callback fired before adding the list element
|
|
beforeShow: null,
|
|
|
|
// Callback fired after adding the item element
|
|
onItemShow: null,
|
|
|
|
// Callback fired after removing the item element
|
|
// by default we will animate the removing action
|
|
onItemRemove: function(html) {
|
|
html.children().animate({'opacity': 0}, 200, function() {
|
|
setTimeout(function() {
|
|
html.slideUp(200, function() {
|
|
html.remove();
|
|
});
|
|
}, 100);
|
|
});
|
|
},
|
|
|
|
// Callback fired after the item image was loaded or a image file is invalid
|
|
// default - null
|
|
onImageLoaded: function(item, listEl, parentEl, newInputEl, inputEl) {
|
|
// invalid image?
|
|
if (item.image.hasClass('fileuploader-no-thumbnail')) {
|
|
// callback goes here
|
|
}
|
|
|
|
// check image size and ratio?
|
|
if (item.reader.node && item.reader.width > 1920 && item.reader.height > 1080 && item.reader.ratio != '16:9') {
|
|
// callback goes here
|
|
}
|
|
},
|
|
|
|
// item popup preview {Object}
|
|
popup: {
|
|
// popup append to container {String, jQuery Object}
|
|
container: 'body',
|
|
|
|
// enable arrows {Boolean}
|
|
arrows: true,
|
|
|
|
// loop the arrows {Boolean}
|
|
loop: true,
|
|
|
|
// popup HTML {String, Function}
|
|
template: function(data) { return '<div class="fileuploader-popup-preview">' +
|
|
'<button class="fileuploader-popup-move" data-action="prev"><i class="fileuploader-icon-arrow-left"></i></button>' +
|
|
'<div class="fileuploader-popup-node ${format}">' +
|
|
'${reader.node}' +
|
|
'</div>' +
|
|
'<div class="fileuploader-popup-content">' +
|
|
'<div class="fileuploader-popup-footer">' +
|
|
'<ul class="fileuploader-popup-tools">' +
|
|
(data.format == 'image' && data.reader.node && data.editor ? (data.editor.cropper ? '<li>' +
|
|
'<button data-action="crop">' +
|
|
'<i class="fileuploader-icon-crop"></i> ${captions.crop}' +
|
|
'</button>' +
|
|
'</li>' : '') +
|
|
(data.editor.rotate ? '<li>' +
|
|
'<button data-action="rotate-cw">' +
|
|
'<i class="fileuploader-icon-rotate"></i> ${captions.rotate}' +
|
|
'</button>' +
|
|
'</li>' : '') : ''
|
|
) +
|
|
(data.format == 'image' ?
|
|
'<li class="fileuploader-popup-zoomer">' +
|
|
'<button data-action="zoom-out">&minus;</button>' +
|
|
'<input type="range" min="0" max="100">' +
|
|
'<button data-action="zoom-in">&plus;</button>' +
|
|
'<span></span> ' +
|
|
'</li>' : ''
|
|
) +
|
|
(data.data.url ? '<li>' +
|
|
'<a href="'+ data.file +'" data-action target="_blank">' +
|
|
'<i class="fileuploader-icon-external"></i> ${captions.open}' +
|
|
'</a>' +
|
|
'</li>' : ''
|
|
) +
|
|
'<li>' +
|
|
'<button data-action="remove">' +
|
|
'<i class="fileuploader-icon-trash"></i> ${captions.remove}' +
|
|
'</button>' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
'</div>' +
|
|
'<div class="fileuploader-popup-header">' +
|
|
'<ul class="fileuploader-popup-meta">' +
|
|
'<li>' +
|
|
'<span>${captions.name}:</span>' +
|
|
'<h5>${name}</h5>' +
|
|
'</li>' +
|
|
'<li>' +
|
|
'<span>${captions.type}:</span>' +
|
|
'<h5>${extension.toUpperCase()}</h5>' +
|
|
'</li>' +
|
|
'<li>' +
|
|
'<span>${captions.size}:</span>' +
|
|
'<h5>${size2}</h5>' +
|
|
'</li>' +
|
|
(data.reader && data.reader.width ? '<li>' +
|
|
'<span>${captions.dimensions}:</span>' +
|
|
'<h5>${reader.width}x${reader.height}px</h5>' +
|
|
'</li>' : ''
|
|
) +
|
|
(data.reader && data.reader.duration ? '<li>' +
|
|
'<span>${captions.duration}:</span>' +
|
|
'<h5>${reader.duration2}</h5>' +
|
|
'</li>' : ''
|
|
) +
|
|
'</ul>' +
|
|
'<div class="fileuploader-popup-info"></div>' +
|
|
'<ul class="fileuploader-popup-buttons">' +
|
|
'<li><button class="fileuploader-popup-button" data-action="cancel">${captions.cancel}</a></li>' +
|
|
(data.editor ? '<li><button class="fileuploader-popup-button button-success" data-action="save">${captions.confirm}</button></li>' : ''
|
|
) +
|
|
'</ul>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<button class="fileuploader-popup-move" data-action="next"><i class="fileuploader-icon-arrow-right"></i></button>' +
|
|
'</div>'; },
|
|
|
|
// Callback fired after creating the popup
|
|
// we will trigger by default buttons with custom actions
|
|
onShow: function(item) {
|
|
item.popup.html.on('click', '[data-action="remove"]', function(e) {
|
|
item.popup.close();
|
|
item.remove();
|
|
}).on('click', '[data-action="cancel"]', function(e) {
|
|
item.popup.close();
|
|
}).on('click', '[data-action="save"]', function(e) {
|
|
if (item.editor)
|
|
item.editor.save();
|
|
if (item.popup.close)
|
|
item.popup.close();
|
|
});
|
|
},
|
|
|
|
// Callback fired after closing the popup
|
|
onHide: null
|
|
}
|
|
}</code></pre>
|
|
|
|
<h3 id="options-drag-drop">Drag&Drop</h3>
|
|
|
|
<p>1. enable the Drag&Drop feature <code>{null, Object}</code><br />
|
|
This feature is not available in all browser without using the <a href="examples/drag-drop/" target="_blank">Ajax mode</a> or <a href="examples/drag-drop-form/" target="_blank">Drag&Drop with form submit</a> example.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// by default - true
|
|
dragDrop: {
|
|
// set the drop container {null, String, jQuery Object}
|
|
// example: 'body'
|
|
container: null,
|
|
|
|
// Callback fired on entering with dragging files the drop container
|
|
onDragEnter: function(event, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
},
|
|
|
|
// Callback fired on leaving with dragging files the drop container
|
|
onDragLeave: function(event, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
},
|
|
|
|
// Callback fired on dropping the files in the drop container
|
|
onDrop: function(event, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
}
|
|
}</code></pre>
|
|
|
|
<h3 id="options-ajax">Ajax</h3>
|
|
|
|
<p>1. enable the ajax feature to upload files separately to server <code>{null, Object}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// by default - null
|
|
upload: {
|
|
// upload URL {String}
|
|
url: 'upload.php',
|
|
|
|
// upload data {null, Object}
|
|
// you can also change this Object in beforeSend callback
|
|
// example: { option_1: '1', option_2: '2' }
|
|
data: null,
|
|
|
|
// upload type {String}
|
|
// for more details http://api.jquery.com/jquery.ajax/
|
|
type: 'POST',
|
|
|
|
// upload enctype {String}
|
|
// for more details http://api.jquery.com/jquery.ajax/
|
|
enctype: 'multipart/form-data',
|
|
|
|
// auto-start file upload {Boolean}
|
|
// if false, you can use the API methods - item.upload.send() to trigger upload for each file
|
|
// if false, you can use the upload button - check custom file name example
|
|
start: true,
|
|
|
|
// upload the files synchron {Boolean}
|
|
synchron: true,
|
|
|
|
// upload large files in chunks {false, Number}
|
|
// set file chunk size in MB as Number (ex: 4)
|
|
chunk: false,
|
|
|
|
// Callback fired before uploading a file
|
|
// by returning false, you can prevent the upload
|
|
beforeSend: function(item, listEl, parentEl, newInputEl, inputEl) {
|
|
// example:
|
|
// here you can extend the upload data
|
|
item.upload.data.new_data_attribute = 'nice';
|
|
|
|
// example:
|
|
// here you can create upload headers
|
|
item.upload.headers = {
|
|
"Authorization": "Basic " + btoa(username + ":" + password)
|
|
};
|
|
|
|
return true;
|
|
},
|
|
|
|
// Callback fired if the upload succeeds
|
|
// we will add by default a success icon and fadeOut the progressbar
|
|
onSuccess: function(data, item, listEl, parentEl, newInputEl, inputEl, textStatus, jqXHR) {
|
|
item.html.find('.fileuploader-action-remove').addClass('fileuploader-action-success');
|
|
|
|
setTimeout(function() {
|
|
item.html.find('.progress-bar2').fadeOut(400);
|
|
}, 400);
|
|
},
|
|
|
|
// Callback fired if the upload failed
|
|
// we will set by default the progressbar to 0% and if it wasn't cancelled, we will add a retry button
|
|
onError: function(item, listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus, errorThrown) {
|
|
var progressBar = item.html.find('.progress-bar2');
|
|
|
|
if(progressBar.length > 0) {
|
|
progressBar.find('span').html(0 + "%");
|
|
progressBar.find('.fileuploader-progressbar .bar').width(0 + "%");
|
|
item.html.find('.progress-bar2').fadeOut(400);
|
|
}
|
|
|
|
item.upload.status != 'cancelled' && item.html.find('.fileuploader-action-retry').length == 0 ? item.html.find('.column-actions').prepend(
|
|
'<a class="fileuploader-action fileuploader-action-retry" title="Retry"><i></i></a>'
|
|
) : null;
|
|
},
|
|
|
|
// Callback fired while upload the file
|
|
// we will set by default the progressbar width and percentage
|
|
/* data = {
|
|
loaded: ...,
|
|
loadedInFormat: ...,
|
|
total: ...,
|
|
totalInFormat: ...,
|
|
percentage: ...,
|
|
secondsElapsed: ...,
|
|
secondsElapsedInFormat:...,
|
|
bytesPerSecond: ...,
|
|
bytesPerSecondInFormat: ...,
|
|
remainingBytes: ...,
|
|
remainingBytesInFormat: ...,
|
|
secondsRemaining: ...,
|
|
secondsRemainingInFormat: ...
|
|
} */
|
|
onProgress: function(data, item, listEl, parentEl, newInputEl, inputEl) {
|
|
var progressBar = item.html.find('.progress-bar2');
|
|
|
|
if(progressBar.length > 0) {
|
|
progressBar.show();
|
|
progressBar.find('span').html(data.percentage + "%");
|
|
progressBar.find('.fileuploader-progressbar .bar').width(data.percentage + "%");
|
|
}
|
|
},
|
|
|
|
// Callback fired after all files were uploaded
|
|
onComplete: function(listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus) {
|
|
// callback will go here
|
|
}
|
|
}</code></pre>
|
|
|
|
<h3 id="options-image-editor">Image editor</h3>
|
|
|
|
<p>enable the image editor feature <code>{Boolean, Object}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// by default - false
|
|
editor: {
|
|
// editor cropper
|
|
cropper: {
|
|
// cropper ratio
|
|
// example: null
|
|
// example: '1:1'
|
|
// example: '16:9'
|
|
// you can also write your own
|
|
ratio: null,
|
|
|
|
// cropper minWidth in pixels
|
|
// size is adjusted with the image natural width
|
|
minWidth: null,
|
|
|
|
// cropper minHeight in pixels
|
|
// size is adjusted with the image natural height
|
|
minHeight: null,
|
|
|
|
// cropper maxWidth in pixels
|
|
// size is adjusted with the image natural width
|
|
maxWidth: null,
|
|
|
|
// cropper maxHeight in pixels
|
|
// size is adjusted with the image natural height
|
|
maxHeight: null,
|
|
|
|
// show cropper grid
|
|
showGrid: true
|
|
},
|
|
|
|
// editor on save quality (0 - 100)
|
|
// only for client-side resizing
|
|
quality: null,
|
|
|
|
// editor on save maxWidth in pixels
|
|
// only for client-side resizing
|
|
maxWidth: null,
|
|
|
|
// editor on save maxHeight in pixels
|
|
// only for client-size resizing
|
|
maxHeight: null,
|
|
|
|
// Callback fired after saving the image in editor
|
|
onSave: function(blobOrDataUrl, item, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
}
|
|
}</code></pre>
|
|
|
|
<h3 id="options-sorter">Sorter</h3>
|
|
|
|
<p>enable the sorting feature <code>{Boolean, Object}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// see also thumbnails._selectors.sorter in the options
|
|
// by default - false
|
|
sorter: {
|
|
// selector exclude on drag (ex: 'input, textarea')
|
|
selectorExclude: null,
|
|
|
|
// placeholder html
|
|
// null - will clone the item without content
|
|
placeholder: null,
|
|
|
|
// scroll container on drag
|
|
scrollContainer: window,
|
|
|
|
// callback fired after sorting, adding and removing a file
|
|
onSort: function(list, listEl, parentEl, newInputEl, inputEl) {
|
|
// your callback goes here
|
|
}
|
|
}</code></pre>
|
|
|
|
<h3 id="options-preload-files">Preload files</h3>
|
|
|
|
<p>preload files to preview and edit them <code>{null, Array}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">/* [{
|
|
name: 'filename1.txt', // file name
|
|
size: 1024, // file size in bytes
|
|
type: 'text/plain', // file MIME type
|
|
file: 'uploads/filename1.txt', // file path
|
|
local: '../uploads/filename1.txt', // file path in listInput (optional)
|
|
data: {
|
|
thumbnail: 'uploads/filename1_thumbnail.jpg', // item custom thumbnail (optional)
|
|
readerCrossOrigin: 'anonymous', // fix image cross-origin issue (optional)
|
|
readerForce: true, // prevent the browser cache of the image (optional)
|
|
readerSkip: true, // skip file from reading by rendering a thumbnail (optional)
|
|
popup: false, // remove the popup for this file (optional)
|
|
listProps: {}, // custom key: value attributes in the fileuploader's list (optional)
|
|
|
|
your_own_attribute: 'your own value'
|
|
}
|
|
}] */
|
|
files: null</code></pre>
|
|
|
|
<h3 id="options-callbacks">Callbacks</h3>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// Callback fired when fileuploader is not supported in your browser
|
|
onSupportError: function(parentEl, inputEl) {
|
|
// callback will go here
|
|
},
|
|
|
|
// Callback fired before rendering the fileuploader elements
|
|
// by returning false, you will prevent the rendering
|
|
beforeRender: function(parentEl, inputEl) {
|
|
// callback will go here
|
|
|
|
return true;
|
|
},
|
|
|
|
// Callback fired after rendering the fileuploader elements
|
|
afterRender: function(listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
},
|
|
|
|
// Callback fired after selecting the files from computer but only before processing them
|
|
// by returning false, you will prevent the processing of the files but they will remain in the input
|
|
beforeSelect: function(files, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
|
|
return true;
|
|
},
|
|
|
|
// Callback fired on checking for warnings the choosed files
|
|
// by returning false, you will prevent the files from adding/upload
|
|
onFilesCheck: function(files, options, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
|
|
return true;
|
|
},
|
|
|
|
// Callback fired on rendering a file
|
|
onFileRead: function(item, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
},
|
|
|
|
// Callback fired on selecting and processing a file
|
|
onSelect: function(item, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
},
|
|
|
|
// Callback fired after selecting and processing of all files
|
|
afterSelect: function(listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
},
|
|
|
|
// Callback fired after generating a list input. Needs to return an array!
|
|
onListInput: function(list, fileList, listInputEl, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
|
|
return list;
|
|
},
|
|
|
|
// Callback fired after deleting a file
|
|
// by returning false, you can prevent a file from removing
|
|
onRemove: function(item, listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
|
|
return true;
|
|
},
|
|
|
|
// Callback fired when fileuploader has no files
|
|
onEmpty: function(listEl, parentEl, newInputEl, inputEl) {
|
|
// callback will go here
|
|
}</code></pre>
|
|
|
|
<h3 id="options-captions">Languages</h3>
|
|
<p>Use captions option to translate the text <code>{String, Object}</code></p>
|
|
<p>Available languages are: <code>cz</code>, <code>de</code>, <code>dk</code>, <code>en</code>, <code>es</code>, <code>fr</code>, <code>it</code>, <code>lv</code>, <code>nl</code>, <code>pl</code>, <code>pt</code>, <code>ro</code>, <code>ru</code>, <code>tr</code>.</p>
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">captions: 'en'</code>
|
|
</pre>
|
|
|
|
<p>Define your own texts. This is also the default option.</p>
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">captions: {
|
|
button: function(options) {
|
|
return 'Browse ' + (options.limit == 1 ? 'file' : 'files');
|
|
},
|
|
feedback: function(options) {
|
|
return 'Choose ' + (options.limit == 1 ? 'file' : 'files') + ' to upload';
|
|
},
|
|
feedback2: function(options) {
|
|
return options.length + ' ' + (options.length > 1 ? 'files were' : 'file was') + ' chosen';
|
|
},
|
|
confirm: 'Confirm',
|
|
cancel: 'Cancel',
|
|
name: 'Name',
|
|
type: 'Type',
|
|
size: 'Size',
|
|
dimensions: 'Dimensions',
|
|
duration: 'Duration',
|
|
crop: 'Crop',
|
|
rotate: 'Rotate',
|
|
sort: 'Sort',
|
|
download: 'Download',
|
|
remove: 'Delete',
|
|
drop: 'Drop the files here to Upload',
|
|
paste: '<div class="fileuploader-pending-loader"></div> Pasting a file, click here to cancel.',
|
|
removeConfirmation: 'Are you sure you want to remove this file?',
|
|
errors: {
|
|
filesLimit: function(options) {
|
|
return 'Only ${limit} ' + (options.limit == 1 ? 'file' : 'files') + ' can be uploaded.'
|
|
},
|
|
filesType: 'Only ${extensions} files are allowed to be uploaded.',
|
|
fileSize: '${name} is too large! Please choose a file up to ${fileMaxSize}MB.',
|
|
filesSizeAll: 'The chosen files are too large! Please select files up to ${maxSize} MB.',
|
|
fileName: 'A file with the same name ${name} is already selected.',
|
|
remoteFile: 'Remote files are not allowed.',
|
|
folderUpload: 'Folders are not allowed.'
|
|
}
|
|
}</code></pre>
|
|
|
|
<h3 id="options-others">Others</h3>
|
|
|
|
<p>enable addMore mode to add files from different folders <code>{Boolean}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">addMore: false</code></pre>
|
|
|
|
<p>add brackets at the end of the input name by multiple files <code>{Boolean}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// specially for PHP, set false for ASP.NET, C#, Node.js and others
|
|
inputNameBrackets: true</code></pre>
|
|
|
|
<p>allow duplicated names of files <code>{Object}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// this option is fixing iPhone `picture.jpg` issue
|
|
// this feature is available only in upload mode
|
|
// set on true only if are changing the file name after uploading
|
|
skipFileNameCheck: false</code></pre>
|
|
|
|
<p>upload image from clipboard <code>{null, Number in ms}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// the input should be completely into view by pasting
|
|
// this feature is available only in upload mode
|
|
clipboardPaste: 2000</code></pre>
|
|
|
|
<p>input with the listed files <code>{Boolean, String}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// this list is an input[type="hidden"]
|
|
// this list will be generated from each choosed/preloaded file name in a JSON format. You can use the onListInput callback to manipulate this list
|
|
// use item.data.listProps = {my_own_property: 'my own value'} to add your own attributes to the list
|
|
// files in this list that are obejcts like '{file: "0://file_name.ext"}' are showing to PHP that they are choosed and should be uploaded
|
|
// if you've preloaded some files on the server-side, PHP will check if each preloaded file is in this list, if not, PHP will set them as removed.
|
|
// example: true
|
|
// example: 'custom_listInput_name'
|
|
listInput: true</code></pre>
|
|
|
|
<p>enable Api methods <code>{Boolean}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// after enable, use the code below to get Api methods
|
|
// var api = $.fileuploader.getInstance(input_element);
|
|
enableApi: false</code></pre>
|
|
|
|
<p>file reader timeout <code>{Object}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">reader: {
|
|
// file reader timeout for the thumbnails {Number}
|
|
thumbnailTimeout: 5000,
|
|
|
|
// file reader timeout for the popup preview {Number}
|
|
timeout: 12000,
|
|
|
|
// file reader maxSize in Mb {Number}
|
|
maxSize: 20
|
|
},</code></pre>
|
|
|
|
<p>dialogs <code>{Object}</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-javascript">// made to let you customizing the standard Javascript dialogs
|
|
// this dialogs are used by showing a file warning or confirming a file remove
|
|
dialogs: {
|
|
|
|
// alert dialog
|
|
alert: function(text) {
|
|
return alert(text);
|
|
},
|
|
|
|
// confirm dialog
|
|
confirm: function(text, callback) {
|
|
confirm(text) ? callback() : null;
|
|
}
|
|
}</code></pre>
|
|
</section>
|
|
|
|
<section id="input-attributes">
|
|
<h2>Input attributes</h2>
|
|
|
|
<p>You can configurate the Fileuploader not only in Javascript but also setting some input attributes in HTML.<br />
|
|
Example: <code><input type="file" name="files" data-fileuploader-limit="2"></code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-html"><!-- limit option {Number} -->
|
|
data-fileuploader-limit="2"
|
|
|
|
<!-- maxSize option {Number} -->
|
|
data-fileuploader-maxSize="3"
|
|
|
|
<!-- fileMaxSize option {Number} -->
|
|
data-fileuploader-fileMaxSize="1"
|
|
|
|
<!-- extensions option {Comma spliced String} -->
|
|
data-fileuploader-extensions="jpg, png, gif"
|
|
|
|
<!-- theme option {String} -->
|
|
data-fileuploader-theme="default"
|
|
|
|
<!-- listInput option {String} -->
|
|
data-fileuploader-listInput="myCustomName"
|
|
|
|
<!-- files option {JSON String} -->
|
|
data-fileuploader-files='"[{"name":"filename1.txt","size":1024,"type":"text/plain","file":"uploads/filename1.txt"}]"'</code></pre>
|
|
</section>
|
|
|
|
<section id="text-variables">
|
|
<h2>Text variables</h2>
|
|
|
|
<p>The inline text variables are available in each text option. Writin ${variable_name} to transform it.<br />
|
|
Example: <code>'Only ${limit} files are allowed to be uploaded.'</code></p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-html"><!-- limit option -->
|
|
<!-- always available -->
|
|
${limit}
|
|
|
|
<!-- maxSize option -->
|
|
<!-- always available -->
|
|
${maxSize}
|
|
|
|
<!-- fileMaxSize option -->
|
|
<!-- always available -->
|
|
${fileMaxSize}
|
|
|
|
<!-- extensions option -->
|
|
<!-- always available -->
|
|
${extensions}
|
|
|
|
<!-- number of choosed/preloaded files -->
|
|
<!-- only for captions.feedback and captions.feedback2 -->
|
|
${length}
|
|
|
|
<!-- file name -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${name}
|
|
|
|
<!-- file title (file name without extension) -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${title}
|
|
|
|
<!-- file extension -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${extension}
|
|
|
|
<!-- file size -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${size}
|
|
|
|
<!-- file size (formatted in bytes, kbs, mbs...) -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${size2}
|
|
|
|
<!-- file type (audio/mp3) -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${type}
|
|
|
|
<!-- file format (audio) -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${format}
|
|
|
|
<!-- file data -->
|
|
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
|
|
${data.my_custom_data_key}
|
|
|
|
<!-- file icon HTML element -->
|
|
<!-- remember that a file-like icon is also available, just remove the comments in css file from the line /* item icon like file */ -->
|
|
<!-- file icon HTML element -->
|
|
<!-- only in thumbnails.item and thumbnails.item2 -->
|
|
${icon}
|
|
|
|
<!-- file thumbnail / file icon (for not image files) holder HTML element -->
|
|
<!-- only in thumbnails.item and thumbnails.item2 -->
|
|
${image}</code></pre>
|
|
</section>
|
|
|
|
<section id="api">
|
|
<h2>Api</h2>
|
|
|
|
<p>Available methods are listed below.<br />
|
|
Don't forget that you will need to set <code>enableApi: true</code> to activate the Api methods.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-html">var api = $.fileuploader.getInstance(file_input_element);
|
|
|
|
// open browser file explorer to choosed files
|
|
api.open();
|
|
|
|
// get Fileuploader options
|
|
api.getOptions();
|
|
|
|
// get Fileuploader parent element
|
|
api.getParentEl();
|
|
|
|
// get Fileuploader input element
|
|
api.getInputEl();
|
|
|
|
// get Fileuploader new/generated input element
|
|
api.getNewInputEl();
|
|
|
|
// get Fileuploader thumbnails list element
|
|
api.getListEl();
|
|
|
|
// get Fileuploader listInput element
|
|
api.getListInputEl();
|
|
|
|
// get Fileuploader file items
|
|
api.getFiles();
|
|
|
|
// get Fileuploader choosed file items
|
|
api.getChoosedFiles();
|
|
|
|
// get Fileuploader preloaded file items
|
|
api.getAppendedFiles();
|
|
|
|
// get Fileuploader uploaded file items
|
|
api.getUploadedFiles();
|
|
|
|
// get Fileuploader list of files using custom key
|
|
// @param toJSON {Boolean} - Parse the Array to JSON?
|
|
// @param customItemKey {String} - Generate a list with only a file attribute (ex: name, url)?
|
|
api.getFileList(toJSON, customItemKey);
|
|
|
|
// update the Fileuploader list of files
|
|
api.updateFileList();
|
|
|
|
// set Fileuploader option
|
|
api.setOption(key, value);
|
|
|
|
// get an Fileuploader item data by giving an item HTML element
|
|
api.findFile(itemHtmlElement);
|
|
|
|
// create a file from data or dataURI and add to the plugin (only in upload mode)
|
|
// @param data {String} - text or dataURI string
|
|
// @param type {String} - file type (ex: image/png)
|
|
// @param custom_name {null, String} - custom file name (ex: picture.png)
|
|
api.add(data, type, custom_name);
|
|
|
|
// append file (Object) or files(Array with Objects)
|
|
api.append(file);
|
|
|
|
// update file by giving the item Object and new data Object
|
|
api.update(item, data);
|
|
|
|
// remove an item by giving an item Object or item HTML element
|
|
api.remove(item);
|
|
|
|
// reset the Fileuploader input
|
|
api.reset();
|
|
|
|
// start the upload of the files
|
|
api.uploadStart();
|
|
|
|
// disable Fileuploader input
|
|
api.disable(also_lock_item_remove_startUpload_retry_action);
|
|
|
|
// enable Fileuploader input
|
|
api.enable();
|
|
|
|
// return true if there are no files
|
|
api.isEmpty();
|
|
|
|
// return true if the input is disabled
|
|
api.isDisabled();
|
|
|
|
// return true if the input is rendered
|
|
api.isRendered();
|
|
|
|
// return the plugin mode ('default', 'addMore', 'upload')
|
|
api.getPluginMode();
|
|
|
|
// generate a text with variables
|
|
api.assets.textParse(myText, myObjectWithVariables);
|
|
|
|
// destroy Fileuploader
|
|
api.destroy();</code></pre>
|
|
|
|
<h3>Item methods</h3>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-html">// remove item
|
|
item.remove();
|
|
|
|
// render thumbnail
|
|
item.renderThumbnail(custom_src_or_update?);
|
|
|
|
// item upload - !only if upload is enabled
|
|
/* start upload */
|
|
item.upload.send();
|
|
|
|
/* cancel upload */
|
|
item.upload.cancel();
|
|
|
|
/* retry upload if failed */
|
|
item.upload.retry();
|
|
|
|
/* resend upload */
|
|
item.upload.resend();
|
|
|
|
// popup - !only if popup is enabled
|
|
/* open popup */
|
|
item.popup.open();
|
|
|
|
/* close popup - !only if popup is openend */
|
|
item.popup.close();
|
|
|
|
// item file reader
|
|
/* read file in browser
|
|
@param callback {null, Function}
|
|
@param type {null, String} - read type ['astext', 'image', 'audio', 'video']
|
|
@param force {Boolean} - ignore reader cache */
|
|
item.reader.read(callback, type, force);
|
|
|
|
// item image editor - !only if editor is enabled
|
|
/* rotate image */
|
|
item.editor.rotate();
|
|
|
|
/* show cropping tools in the popup */
|
|
item.editor.cropper();
|
|
|
|
/* save edited image
|
|
@param callback {null, Function}
|
|
@param toBlob {Boolean} - save canvas as Blob or just as dataURL?
|
|
@param mimeType {null, String} - save image format 'image/jpeg' or 'image/png'
|
|
@param preventThumbnailRender {Boolean} - do not render thumbnail in HTML after save? */
|
|
item.editor.save(callback, asBlob, mimeType, preventThumbnailRender);</code></pre>
|
|
</section>
|
|
|
|
<section id="php">
|
|
<h2>PHP</h2>
|
|
|
|
<p>Fileuploader includes also a PHP class that uploads, validates, removes, sorts, edits the images, creates thumbnails and uploads large files in chunks to server. All this stuff can be also done on the client-side but the server keeps everything safer.</p>
|
|
|
|
<p>Our php file upload helper uses the following php-standard extensions:</p>
|
|
|
|
<ul class="list-styled">
|
|
<li><a href="http://php.net/manual/en/book.image.php" rel="nofollow" target="_blank">GD</a></li>
|
|
<li><a href="http://php.net/manual/en/ref.exif.php" rel="nofollow" target="_blank">Exif</a></li>
|
|
<li><a href="http://www.php.net/manual/en/ref.fileinfo.php" rel="nofollow" target="_blank">Fileinfo</a></li>
|
|
</ul>
|
|
|
|
<h3>Installation</h3>
|
|
|
|
<ol>
|
|
<li>Copy <b>class.fileuploader.php</b> from <b>src</b> folder to your server.</li>
|
|
<li>Configurate in the <b>php.ini</b> file the following options according your needs: <code>file_uploads</code>, <code>upload_max_filesize</code>, <code>max_file_uploads</code>, <code>post_max_size</code> and <code>memory_limit</code></li>
|
|
</ol>
|
|
|
|
<h3>How to use</h3>
|
|
|
|
<p>Include the <b>class.fileuploader.php</b> into your php file and initialize it by writing in <b>arguments</b> the file input's name (e.g. <code>'files'</code>) and the options in an <code>array</code>.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-php"><?php
|
|
include('class.fileuploader.php');
|
|
|
|
// initialize the FileUploader
|
|
$FileUploader = new FileUploader('files', array(
|
|
// Options will go here
|
|
));
|
|
|
|
// call to upload the files
|
|
$upload = $FileUploader->upload();
|
|
|
|
if($upload['isSuccess']) {
|
|
// get the uploaded files
|
|
$files = $upload['files'];
|
|
} else {
|
|
// get the warnings
|
|
$warnings = $upload['warnings'];
|
|
}
|
|
?></code></pre>
|
|
|
|
<h3>Options</h3>
|
|
|
|
<p>All available options are listed below.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-php">array (
|
|
// limit of files {null, Number}
|
|
// also with the preloaded files
|
|
// if null - has no limits
|
|
// example: 3
|
|
'limit' => null,
|
|
|
|
// file's maximal size in MB {null, Number}
|
|
// also with the preloaded files
|
|
// if null - has no limits
|
|
// example: 2
|
|
'maxSize' => null,
|
|
|
|
// each file's maximal size in MB {null, Number}
|
|
// if null - has no limits
|
|
// example: 2
|
|
'fileMaxSize' => null,
|
|
|
|
// allowed extensions or file types {null, Array}
|
|
// if null - has no limits
|
|
// example: ['jpg', 'jpeg', 'png', 'text/plain', 'audio/*']
|
|
'extensions' => null,
|
|
|
|
// disallowed extensions or file types {null, Array}
|
|
// if null - has no limits
|
|
// example: ['php', 'application/*', 'text/plain']
|
|
'disallowedExtensions' => ['htaccess', 'php', 'php3', 'php4', 'php5', 'phtml'],
|
|
|
|
// check if file input exists ($_FILES[ file_input_name ]) {Boolean}
|
|
// check if files were choosed (minimum 1 file should be choosed)
|
|
'required' => false,
|
|
|
|
// upload directory {String}
|
|
// note that main directory is the directory where you are initializing the FileUploader class
|
|
// example: '../uploads/'
|
|
'uploadDir' => 'uploads/',
|
|
|
|
// file title {String, Array, Function}
|
|
// example: 'name' - original file name
|
|
// example: 'auto' - random text from 12 letters
|
|
// example: 'my_custom_filename' - custom file name
|
|
// example: 'my_custom_filename_{random}' - my_custom_filename_(+ random text from 12 letters)
|
|
// '{random} {file_name} {file_size} {timestamp} {date} {format} {extension} {index}' - variables that can be used to generate a new file name
|
|
// example: array('auto', 12, true) - [0] is a string as in the examples above [1] is the length of the random string [2] force extension change if in [0] founded
|
|
// example: function($item) { return array('file_{random}', 12); }
|
|
'title' => ['auto', 12],
|
|
|
|
// replace the file with the same name? {Boolean}
|
|
// if it will be false - will automatically generate a new file name with (1,2,3...) at the end of the file name
|
|
'replace' => false,
|
|
|
|
// image editor {null, Boolean, Array}
|
|
// default: null
|
|
// set null, true or Array and the Exif issue will be fixed
|
|
// set false to disable
|
|
'editor' => array(
|
|
// image maxWidth in pixels {null, Number}
|
|
'maxWidth' => null,
|
|
// image maxHeight in pixels {null, Number}
|
|
'maxHeight' => null,
|
|
// crop image {Boolean}
|
|
'crop' => false,
|
|
// image quality after save {Number}
|
|
'quality' => 90
|
|
),
|
|
|
|
// input with the listed files {Boolean, String}
|
|
// this list is an input[type="hidden"]
|
|
// this list is important to store your files with the attributes and to check which file shouldn't be uploaded or need to be removed
|
|
// example: true
|
|
// example: 'custom_listInput_name'
|
|
'listInput' => true,
|
|
|
|
// preloaded files {null, Array with arrays}
|
|
// it is important to declare them if you want to check the right limit and maxSize options; by preloaded files; by generating an input
|
|
// please follow this structure for each file:
|
|
/* array(
|
|
"name" => 'filename1.txt',
|
|
"type" => FileUploader::mime_content_type('../uploads/filename1.txt'),
|
|
"size" => filesize('../uploads/filename1.txt'),
|
|
"file" => '../uploads/filename1.txt', // should the same as on the front-end
|
|
"relative_file" => '../uploads/filename1.txt', // use this file by editing
|
|
"data" => array(
|
|
"url" => 'http://localhost/example/uploads/filename1.txt',
|
|
"my_own_attribute" => "my own value",
|
|
"listProps" => array(
|
|
"file_id" => 240 // property to be stored in the listInput
|
|
)
|
|
)
|
|
) */
|
|
'files' => null,
|
|
|
|
// move_uploaded_file {function}
|
|
// prevent default php upload method and use yours
|
|
// @param $temp_name {String} PHP file temp_name
|
|
// @param $destination {String} file upload destination
|
|
// @return {Boolean}
|
|
'move_uploaded_file' => function($temp_name, $destination, $item) {
|
|
return move_uploaded_file($temp_name, $destination);
|
|
},
|
|
|
|
// validate_file {function}
|
|
// custom file validation function
|
|
// @param $file {Array} Fileuploader file array
|
|
// @param $options {Array} Fileuploader options
|
|
// @return {Boolean or String}
|
|
'validate_file' => function($file, $options) {
|
|
$isValid = true;
|
|
|
|
if ($isValid) {
|
|
return true;
|
|
} else {
|
|
return "Wrong file!";
|
|
}
|
|
}
|
|
)</code></pre>
|
|
|
|
<h3>Methods</h3>
|
|
|
|
<p>All available methods are listed below.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-php">// get removed list
|
|
// give a String parameter (ex: 'file' or 'name' or 'data.url') to get a file by a custom input attribute. Default is 'file'
|
|
// note that FileUploader will not remove your appended files that were removed on Front-End
|
|
// call this method before $FileUploader->upload();
|
|
// to remove them, please use this example:
|
|
// foreach($FileUploader->getRemovedFiles('file') as $key=>$value) {
|
|
// unlink('../uploads/' . $value['name']);
|
|
// }
|
|
$FileUploader->getRemovedFiles();
|
|
|
|
// call to upload the files
|
|
$upload = $FileUploader->upload();
|
|
|
|
// get listInput value
|
|
$FileUploader->getListInput();
|
|
|
|
// get the list of the files
|
|
// without parameter it will return an array with appended and uploaded files
|
|
// give a String parameter (ex: 'file' or 'name' or 'data.url') to generate a custom input list of the files
|
|
// example: you can store the files in the MySQL using this function
|
|
// $myFilesForSql = implode('|', $FileUploader->getFileList('name'));
|
|
// $myFilesForSql = json_encode($FileUploader->getFileList('name'));
|
|
$FileUploader->getFileList();
|
|
|
|
// get the list of the preloaded files
|
|
$FileUploader->getPreloadedFiles();
|
|
|
|
// get the list of the uploaded files
|
|
$FileUploader->getUploadedFiles();
|
|
|
|
// resize image
|
|
// example replace image: FileUploader::resize($source, $width = 100);
|
|
// example create thumbnail: FileUploader::resize($source, $width = 100, $height = 100, $destination = 'my_custom_thumbnail_name.jpg', $crop = false, $quality = 90, $rotation = 0);
|
|
FileUploader::resize($source, $width = 100, $height = null, $destination = null);
|
|
|
|
// remove old chunked files
|
|
FileUploader::clean_chunked_files($directory = '../uploads/', $time = '-1 hour');
|
|
|
|
// get file mime content type
|
|
FileUploader::mime_content_type($file, $nativeFunction = false);
|
|
|
|
// get the HTML generated input
|
|
$FileUploader->generateInput();</code></pre>
|
|
</section>
|
|
|
|
<section id="laravel">
|
|
<h2>Laravel</h2>
|
|
<p>Laravel basic Contoller to upload files over the form or ajax. Upload files on your Laravel website using our helper.</p>
|
|
|
|
<h3>Installation</h3>
|
|
<p>Fileuploader installation instructions:</p>
|
|
<ol>
|
|
<li>Create a new folder <b>Library</b> in your project's <b>app/</b> folder</li>
|
|
<li>Copy <b>class.fileuploader.php</b> from <b>src/php/</b> into <b>app/Library/</b></li>
|
|
<li>Add Fileuploader to the composer
|
|
<pre class="prettyprint"><code data-code="language-json">"autoload": {
|
|
...
|
|
|
|
"files": [
|
|
"app/Library/class.fileuploader.php"
|
|
]
|
|
},</code></pre>
|
|
</li>
|
|
<li>Run <code>composer install</code></li>
|
|
<li>Run <code>php artisan storage:link</code> to add the <b>storage</b> folder in public folder</li>
|
|
</ol>
|
|
|
|
<h3>How to use</h3>
|
|
<p>The Controller, Blade Template and js files are in <i>examples/thirdparty/laravel/</i> folder. Please copy themselves or their content to your project. The following instructions are just an example and you might skip some steps:</p>
|
|
<p>1.Create the <b>ExampleController.php</b> in <b>app/Http/Controllers/</b></p>
|
|
<pre class="prettyprint"><code data-code="language-php"><?php
|
|
namespace App\Http\Controllers;
|
|
|
|
use Illuminate\Http\Request;
|
|
use \FileUploader;
|
|
|
|
class ExampleController extends Controller {
|
|
|
|
/**
|
|
* show the form
|
|
*
|
|
* @return \Illuminate\Contracts\Support\Renderable
|
|
*/
|
|
public function index() {
|
|
return view('home');
|
|
}
|
|
|
|
/**
|
|
* submit the form
|
|
*
|
|
* @return void
|
|
*/
|
|
public function submit(Request $request) {
|
|
// initialize FileUploader
|
|
$FileUploader = new FileUploader('files', array(
|
|
// options
|
|
'limit' => 4,
|
|
'uploadDir' => storage_path('app/public/'),
|
|
'title' => 'auto'
|
|
));
|
|
|
|
// upload
|
|
$upload = $FileUploader->upload();
|
|
}
|
|
|
|
/**
|
|
* delete a file
|
|
*
|
|
* @return void
|
|
*/
|
|
public function removeFile(Request $request) {
|
|
@unlink($_POST['file']);
|
|
exit;
|
|
}
|
|
}</code></pre>
|
|
<br>
|
|
<p>2. Create the <b>home.blade.php</b> in <b>app/resources/views/</b></p>
|
|
<pre class="prettyprint"><code data-code="language-php"><form action="{{ route('example.upload') }}" method="post" enctype="multipart/form-data">
|
|
{{ csrf_field() }}
|
|
|
|
<input type="file" name="files">
|
|
<input type="submit">
|
|
</form></code></pre>
|
|
<br>
|
|
<p>3. Add the route in <b>routes/web.php</b></p>
|
|
<pre class="prettyprint"><code data-code="language-php">Route::get('/home', 'ExampleController@index');
|
|
Route::post('/upload', 'ExampleController@submit')->name('example.upload');
|
|
Route::post('/ajax_remove_file', 'ExampleController@removeFile');</code></pre>
|
|
</section>
|
|
|
|
<section id="nodejs">
|
|
<h2>Node.js</h2>
|
|
|
|
<p>Fileuploader includes also a Node.js module that uploads, validates, removes, sorts, edits the images, creates thumbnails and uploads large files in chunks to server. All this stuff can be also done on the client-side but the server keeps everything safer.</p>
|
|
|
|
<p>Our module uses some dependencies to provide the features of multipart/form-data upload, reading file's mime type and image editing.</p>
|
|
|
|
<ul class="list-styled">
|
|
<li><a href="https://www.npmjs.com/package/multer" rel="nofollow" target="_blank">multer</a></li>
|
|
<li><a href="https://www.npmjs.com/package/mime-types" rel="nofollow" target="_blank">mime-types</a></li>
|
|
<li><a href="https://www.npmjs.com/package/gm" rel="nofollow" target="_blank">gm</a></li>
|
|
</ul>
|
|
|
|
<h3>Installation</h3>
|
|
|
|
<ol>
|
|
<li>Copy <b>fileuploader.js</b> and it's <b>package.json</b> from <b>src</b> folder to your server.</li>
|
|
<li>Run <code>npm install</code> in node folder to install all dependencies.</li>
|
|
<li>(Optional) While using server-side image editing feature (<i>editor option</i>), you will have to download and install <a href="http://www.graphicsmagick.org/" rel="nofollow" target="_blank">GraphicsMagick</a> or in Mac OS X the <a href="http://mxcl.github.io/homebrew/" rel="nofollow">Homebrew</a>.</li>
|
|
</ol>
|
|
|
|
<h3>How to use</h3>
|
|
|
|
<p>Require the <b>fileuploader.js</b> into your app file and initialize it by writing in arguments the input file name, the options, request and response object. We will also use the popular Node.js framework <a href="https://expressjs.com/" rel="nofollow" target="_blank">Express</a>. Don't forget to take a look at the <i>/examples/nodejs/</i> folder.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-js">const express = require('express')
|
|
const fileuploader = require('fileuploader')
|
|
|
|
app.post('/upload', function(req, res) {
|
|
|
|
// initialize fileuploader
|
|
var uploader = fileuploader('files', {
|
|
// options will go here
|
|
}, req, res)
|
|
|
|
// call to process the form (req.body) and to upload the files
|
|
uploader.upload(function(data) {
|
|
|
|
if (data.isSuccess) {
|
|
var files = data.files;
|
|
} else {
|
|
var warnings = data.warnings;
|
|
}
|
|
|
|
res.end()
|
|
})
|
|
|
|
})
|
|
|
|
// init server
|
|
app.listen(8000)</code></pre>
|
|
|
|
<h3>Options</h3>
|
|
|
|
<p>All available options are listed below.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-js">[
|
|
// limit of files {null, Number}
|
|
// also with the preloaded files
|
|
// important to set 1 if file input has no multiple attribute
|
|
// if null - has no limits
|
|
// example: 3
|
|
limit: null,
|
|
|
|
// file's maximal size in MB {null, Number}
|
|
// also with the preloaded files
|
|
// if null - has no limits
|
|
// example: 2
|
|
maxSize: null,
|
|
|
|
// each file's maximal size in MB {null, Number}
|
|
// if null - has no limits
|
|
// example: 2
|
|
fileMaxSize: null,
|
|
|
|
// allowed extensions or file types {null, Array}
|
|
// if null - has no limits
|
|
// example: ['jpg', 'jpeg', 'png', 'text/plain', 'audio/*']
|
|
extensions: null,
|
|
|
|
// disallowed extensions or file types {null, Array}
|
|
// if null - has no limits
|
|
// example: ['jpg', 'jpeg', 'png', 'text/plain', 'audio/*']
|
|
disallowedExtensions: null,
|
|
|
|
// check if files were choosed (minimum 1 file should be choosed)
|
|
required: false,
|
|
|
|
// upload directory {String}
|
|
// note that main directory is the directory where you are initializing the fileuploader module
|
|
// example: '../uploads/'
|
|
uploadDir: 'uploads/',
|
|
|
|
// file title {String, Array}
|
|
// example: 'name' - original file name
|
|
// example: 'auto' - random text from 12 letters
|
|
// example: 'my_custom_filename' - custom file name
|
|
// example: 'my_custom_filename_{random}' - my_custom_filename_(+ random text from 12 letters)
|
|
// '{random} {file_name} {file_size} {timestamp} {date} {extension}' - variables that can be used to generate a new file name
|
|
// example: ['auto', 24] - [0] is a string as in the examples above, [1] is the length of the random string
|
|
title: ['auto', 12],
|
|
|
|
// replace the file with the same name? {Boolean}
|
|
// if it will be false - will automatically generate a new file name with (1,2,3...) at the end of the file name
|
|
replace: false,
|
|
|
|
// image editor {null, Array}
|
|
editor: {
|
|
// image maxWidth in pixels {null, Number}
|
|
maxWidth: null,
|
|
// image maxHeight in pixels {null, Number}
|
|
maxHeight: null,
|
|
// crop image {Boolean}
|
|
crop: false,
|
|
// image quality after save {Number}
|
|
quality: 90
|
|
},
|
|
|
|
// input with the listed files {Boolean, String}
|
|
// this list is an input[type="hidden"]
|
|
// this list is important to store your files with the attributes and to check which file shouldn't be uploaded or need to be removed
|
|
// example: true
|
|
// example: 'custom_listInput_name'
|
|
listInput: true,
|
|
|
|
// preloaded files {null, Array with Objects}
|
|
// it is important to declare them if you want to check the right limit and maxSize options; by preloaded files; by generating an input
|
|
// please follow this structure for each file:
|
|
/* [{
|
|
name: 'filename1.txt',
|
|
type: null,
|
|
size: fs.statSync('filename1.txt').size,
|
|
file: 'uploads/filename1.txt', // should the same as on the front-end
|
|
relative_file: 'uploads/filename1.txt', // (optional) use this file by editing
|
|
data: {
|
|
url: 'http://localhost/example/uploads/filename1.txt', // (optional)
|
|
listProps: {
|
|
file_id: 240 // property to be stored in the listInput
|
|
}, // (optional)
|
|
my_own_attribute: 'my own value'
|
|
}
|
|
}] */
|
|
'files': null,
|
|
|
|
// move_uploaded_file {function}
|
|
// prevent default upload method and use yours
|
|
// fileuploader will delete at the end the file.tmp file
|
|
// @return {Boolean}
|
|
move_uploaded_file: function(file) {
|
|
fs.renameSync(file.tmp, file.file);
|
|
|
|
return true;
|
|
},
|
|
|
|
// validate_file {function}
|
|
// custom file validation function
|
|
// @param file {Object} Fileuploader file object
|
|
// @param options {Object} Fileuploader options
|
|
// @return {Boolean or String}
|
|
validate_file: function(file, options) {
|
|
var isValid = true;
|
|
|
|
return isValid ? true : 'Wrong file!';
|
|
}
|
|
]</code></pre>
|
|
|
|
<h3>Methods</h3>
|
|
|
|
<p>All available methods are listed below.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-js">// get removed list
|
|
// give a String parameter (ex: 'file' or 'name' or 'data.url') to get a file by a custom input attribute. Default is 'file'
|
|
// note that FileUploader will not remove your preloaded files that were removed on front-end
|
|
// to remove them, please use this example:
|
|
// uploader.getRemovedFiles().forEach(function(item, index) {
|
|
// fs.unlink(item.relative_path || item.file, function(err) {});
|
|
// })
|
|
uploader.getRemovedFiles();
|
|
|
|
// call to process the form and to upload the files
|
|
uploader.upload();
|
|
|
|
// get listInput value
|
|
uploader.getListInput();
|
|
|
|
// get the list of the files
|
|
// without parameter it will return an array with appended and uploaded files
|
|
// give a String parameter (ex: 'file' or 'name' or 'data.url') to generate a custom input list of the files
|
|
// example: you can store the files in the DB using this function
|
|
// var myFilesInlineList = uploader.getFileList('name').join('|');
|
|
// var myFilesJSONList = JSON.stringify(uploader.getFileList('name'));
|
|
uploader.getFileList();
|
|
|
|
// get the list of the preloaded files
|
|
uploader.getPreloadedFiles();
|
|
|
|
// get the list of the uploaded files
|
|
uploader.getUploadedFiles();
|
|
|
|
// resize an image
|
|
// thumbnail example item = data.files[0]: uploader.resize(item.file, 100, 100, '../uploads/thumbs/' + item.name, true)
|
|
// full example: uploader.resize(filename = 'uploads/file.jpg', width = 400, height = 400, destination = 'uploads/file.jpg', crop = true, quality = 90, rotation = 180, callback = function() {})
|
|
uploader.resize('uploads/file.jpg', 800);
|
|
|
|
// remove the old unused chunked files
|
|
uploader.cleanChunkedFiles('uploads/', 3600000 /* -1 hour in milliseconds */);
|
|
|
|
// get the HTML generated input
|
|
uploader.generateInput();</code></pre>
|
|
</section>
|
|
|
|
<section id="amazons3">
|
|
<h2>Amazon S3</h2>
|
|
|
|
<p>PHP Amazon S3 file upload class is included. Upload Directly to Amazon S3 and manage objects in your buckets using our helper.</p>
|
|
|
|
<h3>Configuration</h3>
|
|
|
|
<hr />
|
|
<p>Basic Amazon S3 Bucket configuration instructions.</p>
|
|
|
|
<ol>
|
|
<li>Create an IAM user
|
|
<ol type="a">
|
|
<li>Access Services menu > IAM > Users > Add user</li>
|
|
<li>Give an <i>user name</i> and select <i>Programmatic access</i> as Access type</li>
|
|
<li>Permissions > Attach existing policies directly > select <i>AmazonS3FullAccess</i></li>
|
|
<li>Copy the <i>User ARN</i></li>
|
|
</ol>
|
|
</li>
|
|
<li>Create an access key
|
|
<ol type="a">
|
|
<li>Open the IAM user > Security credentials > Create access key</li>
|
|
<li>Copy <i>Key ID</i> and <i>Secret</i></li>
|
|
</ol>
|
|
</li>
|
|
<li>Create a bucket</li>
|
|
<li>Configurate the new bucket
|
|
<ol type="a">
|
|
<li>Permissions > <i>Bucket policy (replace << >> with your values)</i>
|
|
<pre class="prettyprint">
|
|
<code data-code="language-js">{
|
|
"Version": "2012-10-17",
|
|
"Id": "Policy1488494182833",
|
|
"Statement": [
|
|
{
|
|
"Sid": "MakeItPublic",
|
|
"Effect": "Allow",
|
|
"Principal": {
|
|
"AWS": "<< Copied User ARN >>"
|
|
},
|
|
"Action": "s3:*",
|
|
"Resource": [
|
|
"arn:aws:s3:::<< Bucket name >>",
|
|
"arn:aws:s3:::<< Bucket name >>/*"
|
|
]
|
|
}
|
|
]
|
|
}</code></pre>
|
|
</li>
|
|
<li>CORS configuration
|
|
<pre class="prettyprint">
|
|
<code data-code="language-xml"><?xml version="1.0" encoding="UTF-8"?>
|
|
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
|
|
<CORSRule>
|
|
<AllowedOrigin>*</AllowedOrigin>
|
|
<AllowedMethod>GET</AllowedMethod>
|
|
<AllowedMethod>POST</AllowedMethod>
|
|
<AllowedMethod>PUT</AllowedMethod>
|
|
<MaxAgeSeconds>3000</MaxAgeSeconds>
|
|
<AllowedHeader>Authorization</AllowedHeader>
|
|
</CORSRule>
|
|
</CORSConfiguration></code></pre>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
|
|
<h3>PHP</h3>
|
|
|
|
<hr />
|
|
<h3>Installation</h3>
|
|
|
|
<ol>
|
|
<li>Copy <b>fileuploader.s3.php</b> from <b>src/thirdparty/s3/php/</b> folder to your server.</li>
|
|
<li>Install official AWS SDK (<a href="https://docs.aws.amazon.com/sdk-for-php/v3/developer-guide/getting-started_installation.html" rel="nofollow" target="_blank">?</a>)
|
|
<ol type="a">
|
|
<li>using <code>composer require aws/aws-sdk-php</code></li>
|
|
<li>or <a download="" href="https://docs.aws.amazon.com/aws-sdk-php/v3/download/aws.zip" rel="nofollow" target="_blank">download ZIP</a> file</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
|
|
<h3>How to use</h3>
|
|
|
|
<p>Include the <b>class.fileuploader.php</b>, <b>fileuploader.s3.php</b> and <b>aws autoloader</b> into your php file and initialize it like basic Fileuploader by writing in arguments the input file name and the options.<br />
|
|
This time you will have to create a <code>Fileuploader::$S3</code> object and to add the <code>auth</code> array in the options.<br />
|
|
Don't forget to take a look at the <i>/examples/thirdparty/s3/</i> folder.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-php">require 'vendor/autoload.php';
|
|
require 'class.fileuploader.php';
|
|
require 'fileuploader.s3.php';
|
|
|
|
$FileUploader = new FileUploader::$S3('files', array(
|
|
'uploadDir' => '../uploads/',
|
|
|
|
// S3 credentials
|
|
'auth' => [
|
|
'bucket' => 'my-bucket',
|
|
'folder' => '/',
|
|
'key' => 'ima_key',
|
|
'secret' => 'ima_secret',
|
|
'region' => 'eu-central-1',
|
|
// 'version' => 'latest', # optional
|
|
// 'endpoint' => 'http://localhost:8000', #optional
|
|
]
|
|
));
|
|
|
|
// call to upload the files
|
|
$data = $FileUploader->upload();
|
|
|
|
// if uploaded and success
|
|
if($data['isSuccess']) {
|
|
echo '<pre>';
|
|
print_r($FileUploader->getFileList());
|
|
echo '</pre>';
|
|
}</code></pre>
|
|
|
|
<h4>Or call it separately</h4>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-php">require 'vendor/autoload.php';
|
|
require 'class.fileuploader.php';
|
|
require 'fileuploader.s3.php';
|
|
|
|
$S3Client = new FileUploader_S3(array(
|
|
'bucket' => 'my-bucket',
|
|
'folder' => '/',
|
|
'key' => 'ima_key',
|
|
'secret' => 'ima_secret',
|
|
'region' => 'eu-central-1'
|
|
));</code></pre>
|
|
|
|
<h3>Methods</h3>
|
|
|
|
<p>All available methods are listed below.</p>
|
|
|
|
<pre class="prettyprint">
|
|
<code data-code="language-php">// get S3 Client
|
|
$FileUploader->getClient();
|
|
|
|
// create a bucket
|
|
$FileUploader->createBucket($bucket = 'bucket-name', $location = 'us-east-1', $acl = 'private');
|
|
|
|
// set current bucket
|
|
$FileUploader->setBucket($bucket = 'bucket-name');
|
|
|
|
// check if bucket exists
|
|
$FileUploader->bucketExists($bucket = 'bucket-name');
|
|
|
|
// list the buckets' names
|
|
$FileUploader->listBuckets();
|
|
|
|
// create a folder
|
|
$FileUploader->createFolder($path = 'new_folder/', $acl = 'public-read');
|
|
|
|
// set current folder
|
|
$FileUploader->setFolder($path = 'my_folder/');
|
|
|
|
// check if folder exists
|
|
$FileUploader->folderExists($path = 'my_folder/');
|
|
|
|
// list the folders
|
|
$FileUploader->listFolders($path = null);
|
|
|
|
// delete a folder
|
|
$FileUploader->deleteFolder($path = 'my_folder/');
|
|
|
|
// upload a file
|
|
$FileUploader->uploadFile($tmp = 'path_to_file.jpg', $file = 'file_on_s3.jpg', $acl = 'public-read');
|
|
|
|
// check if a file exists
|
|
$FileUploader->fileExists($file = 'file_on_s3.jpg');
|
|
|
|
// get file public link
|
|
$FileUploader->getFileUrl($file = 'file_on_s3.jpg');
|
|
|
|
// list the files
|
|
$FileUploader->listFiles($path = null);
|
|
|
|
// download a file to path
|
|
$FileUploader->downloadFile($file = 'file_on_s3.jpg', $destination = 'path_to_file.jpg');
|
|
|
|
// delete a file
|
|
$FileUploader->deleteFile($file = 'file_on_s3.jpg');</code></pre>
|
|
</section>
|
|
|
|
<section id="license">
|
|
<h2>License</h2>
|
|
|
|
<p>A regular license is required if you are using this plugin in one of your personal projects (including sites for your customers) and a commercial license for all commercial applications (including sites, themes and apps you plan to sell).</p>
|
|
|
|
<p>Sharing the source code or selling it particullary is not allowed.</p>
|
|
|
|
<p>Keep the license and copyright notice included in Fileuploader's CSS and JavaScript files when you use them in your projects.</p>
|
|
</section>
|
|
|
|
<section id="changelog">
|
|
<h2>Changelog</h2>
|
|
|
|
<p>See the record of all changes made to the project.</p>
|
|
|
|
<div class="changelog-content">
|
|
<h3 id="changelog-2.2">v2.2</h3>
|
|
|
|
<ul>
|
|
<li>Fixed the cropper for iOS devices</li>
|
|
<li>Fixed image orientaion flip issue</li>
|
|
<li>New popup template</li>
|
|
<li>Popup image zoomer</li>
|
|
<li>Improved popup for mobile devices</li>
|
|
<li>New box-after theme</li>
|
|
<li>New gallery theme</li>
|
|
<li>New avatar theme</li>
|
|
<li>Added <code>thumbnails.popup.zoomer</code> option</li>
|
|
<li>Added <code>editor.cropper.maxWidth</code> and <code>editor.cropper.maxHeight</code> option</li>
|
|
<li>Added <code>item.data.readerForce</code> attribute for the preloaded files to prevent the browser cache</li>
|
|
<li>Added <code>reader.maxSize</code> option to customize the performance of the browser</li>
|
|
<li>Added <code>item.local</code> attribute that will be come as <code>file</code> in listInput</li>
|
|
<li>Changed <code>thumbnails.popup.onShow</code> callback</li>
|
|
<li>Added <code>disallowedExtensions</code> option</li>
|
|
<li>Added dialogs option in the api.assets object</li>
|
|
<li>Set allowed/disallowed type using * like <code>image/*</code></li>
|
|
<li>Fixed sorter function for <code>itemPrepend</code> option</li>
|
|
<li>Improved sorter's scrollContainer element</li>
|
|
<li>Fixed scrolling on sort for iOS devices</li>
|
|
<li>Fixed the checking of sorter changes</li>
|
|
<li>Continue the upload on chunks by retry</li>
|
|
<li>The example drag-drop-form is now for unlimited inputs</li>
|
|
<li>Added a MySQL example</li>
|
|
<li>Added Laravel example</li>
|
|
<li>PDF Viewer in the popup: native or <code>mozilla/pdf.js</code></li>
|
|
<li>Now you can set the title option as a function</li>
|
|
<li>Improved file size calculation for validations</li>
|
|
<li>Check the file structure by preloading</li>
|
|
<li>Prevent empty file (file size = 0)</li>
|
|
<li>Escape HTML entities from the file name</li>
|
|
<li>Replaced <a> with <button> in the templates</li>
|
|
<li><code>FileUploader::resize</code> function returns a information about the image size</li>
|
|
<li>Now you can set the input name <code>new FileUploader(array('my_form', 'files'))</code> for name="my_form[files]"</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-2.1">v2.1</h3>
|
|
|
|
<ul>
|
|
<li>Added node.js module</li>
|
|
<li>Added Amazon S3 class</li>
|
|
<li>Added size and position information by cropping an image</li>
|
|
<li>Fixed <code>item.upload.data</code> object</li>
|
|
<li>Fixed crop option for images smaller than maxWidth and maxHeight</li>
|
|
<li>Fixed limit 1 issue on the front-end</li>
|
|
<li>Improved synced image loading for large files</li>
|
|
<li>Added rotate action (without opening the editor)</li>
|
|
<li>Rounded button styles</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-2.0">v2.0</h3>
|
|
|
|
<ul>
|
|
<li>Redesign!</li>
|
|
<li>Added dropIn theme</li>
|
|
<li>Added jquery.fileuploader.sass</li>
|
|
<li>Improved documentation</li>
|
|
<li>Fix addMore mode with limit to one file</li>
|
|
<li>Improved editor in the PHP</li>
|
|
<li>listProps are now available in the items array in PHP</li>
|
|
<li>fileuploader font with icons</li>
|
|
<li>dist and src folder in the download zip</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-1.4">v1.4</h3>
|
|
|
|
<ul>
|
|
<li>Fixed Exif orientation issue for images (e.g. on iPhone and Samsung)</li>
|
|
<li><code>thumbnails.videoThumbnail</code> option will allow you to choose if you want or not to load thumbnails for video files in browser</li>
|
|
<li>Added <code>file.data.thumbnail</code> - now you can load 2 different images for thumbnail and popup (now fileuploader is loading faster)</li>
|
|
<li>Added <code>api.update(item, data)</code> method - now you can update an item in the list with the new data</li>
|
|
<li>Some design changes for the popup - now you can also append the popup to the body</li>
|
|
<li>View all type of file in the popup (remove the <code>file-has-popup</code> class for an item to disable the preview)</li>
|
|
<li>Added arrows features for the popup</li>
|
|
<li>File reader improvements - now you can also set the reader timeout for a file</li>
|
|
<li><code>item.renderThumbnail(true)</code> will now read again the item.file and will update the thumbnail and the popup</li>
|
|
<li>Drag&Drop feature in a form example</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-1.3">v1.3</h3>
|
|
|
|
<ul>
|
|
<li>Image editor feature on front-End. Now you can open a popup and edit the images (click on the thumbnail).
|
|
<ul>
|
|
<li>added <code>editor</code> option</li>
|
|
<li><code>item.editor.rotate(degrees)</code> method is available</li>
|
|
<li><code>item.editor.rotation</code> value is available, only after calling the method above</li>
|
|
<li><code>item.editor.cropper(data)</code> method is available</li>
|
|
<li><code>item.editor.crop</code> value is available, only after calling the method above</li>
|
|
<li><code>item.editor.save(callback, asBlob, mimeType, preventThumbnailRender)</code> method is available</li>
|
|
</ul>
|
|
</li>
|
|
<li>Image editor feature on back-End (we use it to edit the images and to create thumbnails)
|
|
<ul>
|
|
<li>added <code>editor</code> option</li>
|
|
<li><code>FileUploader::resize</code> method is now available</li>
|
|
</ul>
|
|
</li>
|
|
<li>File sorter feature. Now you can sort by drag&drop the files
|
|
<ul>
|
|
<li>add <code>sorter</code> option</li>
|
|
</ul>
|
|
</li>
|
|
<li>List input has now Array-Object format. Now you can send to Back-end your own file parameters (we are using now also for the editor). Add custom values in <code>item.data.listProps</code> to have them in the list input</li>
|
|
<li><code>item.upload.resend()</code> method is now available to resend an ajax request</li>
|
|
<li>Improved the image resizer. Images that are resized for canvas in browser have a high quality now</li>
|
|
<li>Added <code>upload.chunk</code> option. Slice large files in chunks and upload them to server</li>
|
|
<li>Added <code>api.add(data, type, custom_name)</code> api method. Create a file from your string or dataURI and upload to server. Now you can upload WebCam photos or other file types converted into dataURI in browser</li>
|
|
<li>Popup redesign</li>
|
|
<li>Popup text files preview - set file format to <code>astext</code> to get it</li>
|
|
<li><code>item.reader.ratio</code> - image and video ratio</li>
|
|
<li><code>assets.pxToRatio(width, height)</code> helper function</li>
|
|
<li><code>assets.ratioToPx(width, height, ratio)</code> helper function</li>
|
|
<li><code>item.renderImage</code> - is now <span class="text-danger">deprecated</span>! Please use <code>item.renderThumbnail</code> instead</li>
|
|
<li><code>item.data.readerSkip = true</code> to skip file from rendering</li>
|
|
<li><code>item.data.readerCrossOrigin = 'anonymous'</code> to solve the cross-origin issue</li>
|
|
<li><code>captions.close</code> - is now <span class="text-danger">deprecated</span>! Please use <code>captions.cancel</code> instead</li>
|
|
<li><code>thumbnails.onImageLoaded</code> - the callback is triggered now also when the reading of an image failed. Now you can also validate the images</li>
|
|
<li>CSS - brighter main color</li>
|
|
<li>Added jquery.fileuploader.min.css file</li>
|
|
<li>Fixed validaiton check on the php side</li>
|
|
<li>Improvements and fixes</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-1.2">v1.2</h3>
|
|
|
|
<ul>
|
|
<li>Added Popup feature. Now you can open a popup for each item (click on the thumbnail).
|
|
<ul>
|
|
<li>Popup preview for photo, video and audio files</li>
|
|
<li><code>thumbnails.item</code> and <code>thumbnails.item2</code> the line was changed to <code><div class="column-thumbnail">${image}<span class="fileuploader-action-popup"></span></div></code></li>
|
|
<li>added <code>thumbnails.popup</code> option</li>
|
|
<li>added <code>thumbnails._selectors.popup</code> and <code>thumbnails._selectors.popup_open</code> option</li>
|
|
<li><code>item.popup.open</code> method is available. After calling this function, the following values are available:</li>
|
|
<li><code>item.popup.html</code> - Popup HTML element</li>
|
|
<li><code>item.popup.close()</code> - Popup close method</li>
|
|
</ul>
|
|
</li>
|
|
<li>Added Reader feature. Now you can read each type of file
|
|
<ul>
|
|
<li><code>item.reader.read(callback)</code> method is now available. After calling this function, the following values are available:</li>
|
|
<li><code>iteam.reader.node</code> - img, video and audio HTML node</li>
|
|
<li><code>item.reader.src</code> - file reader result</li>
|
|
<li><code>item.reader.duration</code> - video and audio duration</li>
|
|
<li><code>item.reader.duration2</code> - video and audio formatted duration</li>
|
|
<li><code>item.reader.width</code> - img and video width</li>
|
|
<li><code>item.reader.height</code> - img and video height</li>
|
|
<li><code>item.reader.frame</code> - video thumbnail</li>
|
|
</ul>
|
|
</li>
|
|
<li>Improved captions for multilangual templates.
|
|
<ul>
|
|
<li>added <code>captions.close</code></li>
|
|
<li>added <code>captions.download</code></li>
|
|
<li>added <code>captions.remove</code></li>
|
|
</ul>
|
|
</li>
|
|
<li>The <code>thumbnails.item</code> and <code>thumbnails.item2</code> were some words like Download and Remove replaced with <code>${captions.download}</code> and <code>${captions.remove}</code></li>
|
|
<li>Classname <code>fileupload-no-thumbnail</code> was renamed to <code>fileuploader-no-thumbnail</code></li>
|
|
<li>Item thumbnail (canvas or img) are now aligned to the center of parent</li>
|
|
<li>Improved Ajax progress handling. Now the progressbar will stay to 99% until the success callback will come.</li>
|
|
<li><code>item.renderThumbnail(src)</code> - now you can send a custom image src to render the thumbnail</li>
|
|
<li>Fixed iPhone issue: "File with the name image.jpg is already selected."</li>
|
|
<li>Improvements and fixes</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-1.0.0.5">v1.0.0.5</h3>
|
|
|
|
<ul>
|
|
<li>Colored icon in the Drag&drop example</li>
|
|
<li>Fixed validator issue for AddMore option (<a href="https://github.com/innostudio/fileuploader/issues/10" target="_blank">#10</a>)</li>
|
|
<li>Fixed Clipboardpaste name issue</li>
|
|
<li>Added id key for file data (id is a timestamp that can be used in the templates)</li>
|
|
<li>Improved onListInput callback (now you don't need to create the list, it comes as a function property. Return the list to get the changes)</li>
|
|
<li>updateFileList in Api functions (trigger file list updating)</li>
|
|
<li>uploadStart in Api functions (trigger file upload for all files synchron/asynchron)</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-1.0.0.4">v1.0.0.4</h3>
|
|
|
|
<ul>
|
|
<li>Removed some commas in js script</li>
|
|
<li>Added Drag&Drop feature in Chrome also for non-upload inputs</li>
|
|
</ul>
|
|
|
|
<h3>v1.0.0.3</h3>
|
|
|
|
<ul>
|
|
<li>Fixed <!DOCTYPE> tag in all HTML documents</li>
|
|
<li>Fixed img styles for thumbnails example</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-1.0.0.2">v1.0.0.2</h3>
|
|
|
|
<ul>
|
|
<li>Fixed Safari issue (<a href="https://github.com/innostudio/fileuploader/issues/2" target="_blank">#2</a>)</li>
|
|
</ul>
|
|
|
|
<h3 id="changelog-1.0">v1.0</h3>
|
|
|
|
<ul>
|
|
<li>Initial commit</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="footer">
|
|
<p><a href="https://innostudio.de/fileuploader/">@Fileuploader</a> - Designed and built with passion by <a href="https://innostudio.de/" target="_blank">Innostudio.de</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|