Loading...
 
Skip to main content

History: File Upload

View published page Edit published page

Source of version: 56 (current)

Copy to clipboard
The file upload interface in Tiki is
* Not taking advantage of modern browser possibilities
* Not consistent (ex.: The ((doc:Files Tracker Field)) accepts drag and drop but not the ((doc:File Gallery)) upload)

Tiki should select a modern file upload lib, and proceed to appropriate integration throughout This page is to compare options. See also [https://tiki.org/forumthread56798|forum thread about File upload component choice]

!! Library comparison chart
{WYSIWYG(height="300px" use_html="y")}<table class="wikitable table table-striped table-hover">
	<tbody>
		<tr>
			<td class="wikicell"><strong>Feature / Library</strong></td>
			<td class="wikicell"><strong>FileAPI</strong></td>
			<td class="wikicell"><strong>jQuery File Upload</strong></td>
			<td class="wikicell"><strong>Bootstrap File Input</strong></td>
			<td class="wikicell"><strong>elFinder </strong>(already in Tiki, and a also a file/image browser)</td>
			<td class="wikicell"><strong>flow.js</strong></td>
		</tr>
		<tr>
			<td class="wikicell">Client-size resize of images. This is really important because phone nowadays will take huge pictures, and in some cases, there is no setting to reduce picture size.</td>
			<td class="wikicell"><a href="https://github.com/mailru/FileAPI/blob/master/README.md#imagetransformobject">Yes</a></td>
			<td class="wikicell"><a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing">Yes</a></td>
			<td class="wikicell">Via events (call any ext plugin)</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Upload many files at once (<a href="http://caniuse.com/#feat=input-file-multiple">requires modern browser</a>)</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
		</tr>
		<tr>
			<td class="wikicell">Offer simple form based uploads as well as advanced ajax based uploads</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"><a href="http://plugins.krajee.com/file-input#usage-modes">Yes</a></td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Templates to control rendering of layout, preview and styles</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Easily plug and play additional components</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Inbuilt support to manage previously uploaded files on <span style="background-color:rgb(245,245,245);">server</span>.</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes    (only DELETE)</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Ability to preview files for many file types beyond images (e.g. image, text, html, video, audio. etc.)</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes (images, audio and video, additional types can be realized via plugins)</td>
			<td class="wikicell">Yes </td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Ability to show custom preview file type icons for each file thumbnail.</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes (can simply be done via templates and CSS)</td>
			<td class="wikicell"><a href="http://plugins.krajee.com/file-preview-icons-demo">Yes</a></td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Get file from URL (to avoid download and re-upload)</td>
			<td class="wikicell"> </td>
			<td class="wikicell">No, but I've posted sample code here: <a href="https://gist.github.com/blueimp/5075976" rel="noreferrer" target="_blank">https://gist.github.com/blueimp/5075976</a></td>
			<td class="wikicell">On wishlist</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Enter caption with upload</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data" rel="noreferrer" target="_blank">https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data</a> for howto)   </td>
			<td class="wikicell">Yes (via extraData)</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Preview image, audio or video before upload (to avoid accidents)</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Image</td>
		</tr>
		<tr>
			<td class="wikicell">Progress bar</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
		</tr>
		<tr>
			<td class="wikicell">Limit file types for upload</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
		</tr>
		<tr>
			<td class="wikicell">Maximal file size or image dimensions (to block before upload)</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes (max file size, image dimensions also possible via plugin)</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Manual validation</td>
		</tr>
		<tr>
			<td class="wikicell">Chunked upload (to get around server limits)</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"><a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads">Yes</a></td>
			<td class="wikicell"><a href="https://github.com/kartik-v/bootstrap-fileinput/issues/290">On wishlist</a></td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
		</tr>
		<tr>
			<td class="wikicell">Cancelable uploads (Individual file uploads can be canceled)</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Resumable uploads</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
		</tr>
		<tr>
			<td class="wikicell">Upload from webcam</td>
			<td class="wikicell">yes, via camanJS</td>
			<td class="wikicell">No, but has API to upload File or Blob</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Drag &amp; Drop</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
		</tr>
		<tr>
			<td class="wikicell">Available via Packagist</td>
			<td class="wikicell"><a href="https://github.com/mailru/FileAPI/issues/338">No</a></td>
			<td class="wikicell">Yes, but Packagist meta data not maintained by main dev</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Not official</td>
			<td class="wikicell">Yes</td>
		</tr>
		<tr>
			<td class="wikicell">License</td>
			<td class="wikicell"> </td>
			<td class="wikicell">MIT</td>
			<td class="wikicell">BSD 3-Clause</td>
			<td class="wikicell"> </td>
			<td class="wikicell">MIT</td>
		</tr>
		<tr>
			<td class="wikicell" colspan="6" style="text-align:center;"><strong>Features that would be nice not just at upload</strong></td>
		</tr>
		<tr>
			<td class="wikicell">Image crop</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">No, but possible via processing API</td>
			<td class="wikicell">Via events (call any ext plugin)</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Watermark</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">No, but possible via processing API</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell">Orientation from EXIF</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Yes</td>
			<td class="wikicell">Via events (call any ext plugin)</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
		</tr>
		<tr>
			<td class="wikicell" colspan="6" style="text-align:center;"><strong>Other criteria</strong></td>
		</tr>
		<tr>
			<td class="wikicell">AngularJS Integration</td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
			<td class="wikicell"> </td>
			<td class="wikicell"> </td>
			<td class="wikicell">Yes</td>
		</tr>
	</tbody>
</table>

<p> </p>
<p> </p>{WYSIWYG}

!! Some options
!!! FileAPI
* https://github.com/mailru/FileAPI
** {HTML()}<script type="text/javascript" src="https://www.openhub.net/p/624207/widgets/project_factoids_stats.js"></script>{HTML}

!!! jQuery File Upload
* https://github.com/blueimp/jQuery-File-Upload
** has many [https://github.com/blueimp/jQuery-File-Upload/wiki/Options|options]
** [https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-multiple-resolutions-of-one-image-with-multiple-resize-options|Upload multiple resolutions of one image with multiple resize options]
** https://groups.google.com/forum/#!forum/jquery-fileupload
** https://packagist.org/packages/blueimp/jquery-file-upload
* "[https://github.com/blueimp/jQuery-File-Upload/blob/master/README.md|The user interface of all versions except the jQuery UI version is built with Bootstrap and icons from Glyphicons.]"
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/jQuery-File-Upload/widgets/project_factoids_stats?format=js'></script>{HTML}

!!! Bootstrap File Input
* https://github.com/kartik-v/bootstrap-fileinput
* http://webtips.krajee.com/ajax-based-file-uploads-using-fileinput-plugin/
* https://packagist.org/packages/kartik-v/bootstrap-fileinput
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/bootstrap-fileinput/widgets/project_factoids_stats?format=js'></script>{HTML}

!!! elFinder
* ((elFinder)) also does a lot so file picker from elFinder could perhaps be re-used.

{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/elFinder/widgets/project_factoids_stats?format=js'></script>{HTML}

!!! flow-php-server
* https://packagist.org/packages/flowjs/flow-php-server
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/flow-php-server/widgets/project_factoids_stats?format=js'></script>{HTML}


!! Open Hub stats and comparisons
* https://www.openhub.net/p/_compare?project_0=jQuery-File-Upload&project_1=bootstrap-fileinput&project_2=FileAPI

!! Related links
* ((File Gallery Revamp))
Show PHP error messages