Uppy fetches files from local disk, remote URLs, and platforms like Instagram, Dropbox, Google Drive, then uploads them to the final destination. Large uploads are immune from poor network conditions with the help of the tus standard (an open protocol for resumable uploads built on HTTP).
The Dashboard plugin renders a simple drag and drop, shows file previews, and allows users to edit metadata and monitor upload progress. It serves as a host for other Uppy plugins. For instance, when adding Instagram or Webcam modules, they appear in the dashboard as tabs enabling users to pick files from any of those as well.
With the XHR Upload plugin, the tool will add files to the existing Apache, Nginx, Node.js, Ruby, or PHP server from a local disk or web camera. However, you have to run an Uppy open source cloud server to upload from the remote place. In case of accidental navigation or browser crash, Uppy can restore files and continue uploading. It’s because of the Golden Retriever plugin that saves selected files in the browser cache.
The Uppy widget speaks multiple languages. The tool is 100% open-source and driven by the community. Uppy, therefore, is free of charge, so it is a good option if you want to cut down on file upload software. The documentation page is quite exhaustive. There, you can find a clear installation guide, a list of plugins, and available features. The demos page allows familiarizing with the Uppy dashboard, drag and drop, and some plugin functionalities.
Vault accepts data in the JSON format. You can load files from local sources and external URLs. Downloading files from Vault is also possible if there’s a link attribute with the path to their location on the server. Moreover, Vault restores the list of previously uploaded data from the server.
By default, files are uploaded automatically when end-users add them into Vault. However, it’s possible to configure a manual load that lets them click an Upload button. The progress bar shows how the upload maps it with the percentage of readiness. You can also add extra drop areas so users can drag files both into Vault and other parts of your application. The upload process can be undone at any moment by clicking the Cancel button.
The upload tool offers a range of options for conveniently managing files with the help of the REST API. For instance, you are able to control the upload process by limiting the maximum size of each loaded file, the number of uploaded files, or acceptable data extensions. Files downloaded via Vault can be filtered and sorted by criteria chosen by the end-user.
The Vault component comes with two default view modes – List and Grid. The grid view is advantageous, as you can see file previews and manipulate their quality. It is possible to easily toggle between List and Grid modes. End-users can also simultaneously manipulate multiple files and reorder them via drag-and-drop.
A great benefit of the Vault uploader is its rich customization capabilities. All the elements, including icons, progress bars, and toolbar controls, are easily modified. You can apply a non-English locale by providing translation for all text labels in Vault. You can also benefit from TypeScript support that makes your code cleaner and facilitates a faster development process.
The documentation page is quite comprehensive. There is a step-by-step tutorial to create a client-side file uploader, detailed feature guides, API references, and integration guides for Angular, React, and Vue.js. The demos page provides samples to demonstrate the key features of the DHTMLX Vault uploader.
You can also download a 30-day trial version and then upgrade to the most suitable option.
The Syncfusion uploader component allows users to load images, documents, and other files to the server. The widget has a similar set of features to the above-mentioned tools, including multiple file selection, auto upload, and drag-n-drop. Plus, it supports pause, resume, and retry options via chunking. The chunk functionality works in asynchronous upload only. It enables the uploader to divide the selected files into small data blocks or chunks and transmit them to the server using AJAX.
You can integrate the uploader with such frameworks as Angular, React, Vue, and Blazor. The default component appearance is fully customized with the help of the template and buttons properties. Besides, Syncfusion allows switching language of action buttons, file status, icon title, and tooltips, as well as the text content of the drag area. It’s possible to set up right-to-left rendering for those who use RTL languages.
The documentation page is divided into 11 sections. There you can find a getting started guide, the list of available features with code samples, and API references. The demos page provides a clear example of the file upload control with the default functionalities. You are able to browse or drag-n-drop any files you want to upload to the server, try out the auto-upload and sequential upload options.
Dropzone is a free-to-use tool that is driven by donations. Thus, for example, chunked uploads and browser-side image resizing became accessible to everybody through the financial support received from different software development companies.
The documentation page describes installation and configuration processes, shares tips, and hosts the events list. The demo page provides the most basic example of Dropzone. The upload doesn’t actually work since there is no server to handle the file load. The tool is distributed under the MIT license.
FineUploader is a free community-driven MIT licensed tool. The documentation page shares quick-start tutorials, exhaustive features, and API references. You can also read about how to upgrade to the 5.x version. The demo page allows users to the default simple thumbnails template combined with FineUploader UI. Moreover, the demo is restricted in allowed extensions, therefore, you can try to load jpeg, jpg, gif, and png only.
Any of the components listed in this overview can be used in open-source software development. Some of them require payments to be applied in commercial projects.
Have more options to add? Share your opinion in the comments below.
Credit: Source link