5.16.2
You have always been able to customize the default upload button. As of Fine Uploader 3.9, you can easily create multiple upload buttons with varying validation rules, styles, and behaviors.
The new extraButtons
option allows you to point Fine Uploader
at styled containers that you would like to use as upload buttons. This option takes an array of objects, and
each object must, at least, define an element
property with a value of your styled upload button container.
Fine Uploader will then attach a file input element to this container and track it just as it tracks the default
upload button it creates. You can specify an HTMLElement
as the value for the element
property.
By default, each extra button will inherit the root multiple
and
validation
option values from the root option
set. You can override these values for each button by simply contributing alternate multiple
and validation
properties for a specific extra button object. For example, say your default upload button allows jpegs,
to be selected, but you have an extra button elsewhere on your page that deals specifically with PDFs. You
also want to enforce a 5 MiB limit (where supported) for all types of accepted files
selected by both buttons. Your HTML and javascript might look something like this:
<div id="pdfButton" role="button" class="myCustomCssClassForStyling">Select a PDF</div> <div id="uploader"></div>
var uploader = new qq.FineUploader({ element: document.getElementById("myUploader"), validation: { allowedExtensions: ["jpeg", "jpg"], sizeLimit: 5000000 // 5 MiB } extraButtons: [ { element: document.getElementById("pdfButton"), validation: { allowedExtensions: ["pdf"] } } ] });
As always, Fine Uploader creates a default upload button (in Fine Uploader UI) for you,
and attaches the limitations specified via the validation
option to that button and any drop zones.
Fine Uploader will also attach an invisible file input element to the #pdfButton
element and track it.
Note that, in the above code, the extra button inherits the sizeLimit
from the base validation
option, but overrides the allowedExtensions
property.
Suppose you want to apply custom validation rules to a specific button. No problem! The validate
and
validateBatch
events contain a button
as the last parameter passed to your handler.
This button
parameter will be the container element for the button that was used to select/submit the associated file
to the uploader. If a drop zone was used to submit the file, or if an input element or source outside of Fine Uploader was used
to submit the file (such as via the addFiles
method), the button
parameter will be undefined.
You can also, at any time, associate any file with the button that was used to select/submit the file.
For example, if you want to attach specific parameters to a file, or send it to a different endpoint based
on the button that selected it, you can do so in an appropriate event handler, such as onUpload
.
For example:
var uploader = new qq.FineUploader({ /* other required config options left out for brevity */ callbacks: { onUpload: function(id, name) { var button = this.getButton(id); if (button.id === "pdfButton") { this.setParams({type: "pdf"}, id); } else { this.setParams({type: "jpeg"}, id); } } } });
Fine Uploader already allows you to drop folders that you would like to upload. What if you want to allow users to select folders via the file chooser dialog? Unfortunately, due to the restrictions imposed by this browser feature, you can either select files OR folders, not both. If you'd like to allow users to select files and folders, you can use the default upload button for file selection, and contribute an extra button marked as "folder selection" (Chrome & Opera 15+). Here's an example, also assuming you only want this button to appear if folder selection is possible in the current browser:
<div id="foldersButton" role="button">Select Folders</div> <div id="uploader"></div>
// only show the folders button if folder selection is possible in the current browser if (!qq.supportedFeatures.folderSelection) { document.getElementById("foldersButton").style.display = "none"; } var uploader = new qq.FineUploader({ /* other required config options left out for brevity */ extraButtons: [ { element: document.getElementById("foldersButton"), folders: true } ] });
As pointed out in the blog, iOS has an odd restriction that prohibits you from accessing the camera and the photo/video gallery simultaneously with a file input element. The blog details a way to get around this, but it involves a bit of complexity. Now, with the addition of the extra buttons feature, it's very easy! Here is a simplified version of the code listed in the blog, now using the extra buttons feature:
<div id="cameraButtonContainer">Upload from the camera</div> <div id="myFineUploader"></div>
// only show this button in iOS if (!qq.ios()) { document.getElementById("cameraButtonContainer").style.display = "none"; } var uploader = new qq.FineUploader({ /* other required config options left out for brevity */ camera: { ios: true, button: document.getElementById("cameraButtonContainer") } extraButtons: [ { element: document.getElementById("cameraButtonContainer") } ] });