Monthly Archives: March 2013

Fine Uploader has a new home

Recently, Andrew Valums and I handed Fine Uploader over to Widen Enterprises. Full Disclosure: Widen is my employer. Widen already uses Fine Uploader in their flagship digital asset management product, Media Collective, as well as their image management application, Smartimage. We felt that this was a good move, as Fine Uploader is becoming too much work for me to handle during my free time. This means that Fine Uploader will finally have a sustainable amount of resources (in terms of money, developers, QA, PMs, and cash) behind it. This will allow the library to grow much faster and in much more dramatic ways.

New Location

The Fine Uploader Github repo has moved to Widen/fine-uploader. The web page, blog, and twitter account will remain unchanged for now. If you have forked the old (valums/file-uploader) repo, please read this Stackoverflow case for an explanation of how you can update your cloned/forked copy of the repo.

New Licensing

Starting with Fine Uploader 3.3.1, the licensing has changed. Fine Uploader is now a GPL Version 3 licensed library. If the terms of GPL v3 do not work well for your organization, you may purchase a commercial license from Widen, which will release you from the terms of the GPL v3 license. From the downloads page, you can download a free 45-day trial of the commercially-licensed library, or you can download the GPL v3 version, or purchase a commercial license immediately. If you have already contributed to Fine Uploader in the past, you are eligible for a discount on the commercial license. Please send an email to licensing@fineuploader.com, along with proof of your past contribution, to obtain your discount.

Note that the server-side examples will continue to be attached to an MIT license, and has been moved to the Widen/fine-uploader-server repository.

Improvements

With a well-established company like Widen backing Fine Uploader, it will be possible to evolve the library at a much faster pace. In fact, all aspects of Fine Uploader will improve, including support, testing, development, feature planning, demos, and documentation. You will see a great number of changes/improvements to the library over the coming weeks, and development activity will increase in the near future.

You can follow the progress of Fine Uploader via the Twitter feed, as well as this blog. Support will continue to be handled on Stackoverflow (see the support page for more details). Bug/feature cases should be filed in the Fine Uploader issue tracker, while support requests belong in the support forum. You may send other general comments to info@fineuploader.com. Please do not post comments in the support forum, as these will be removed by Stackoverflow moderators.

regards,
Ray Nicholus and the rest of the team at Widen Enterprises

Upload an image via paste in 3.4

Updates since the original post/feature implementation

A new feature in Fine Uploader 3.4 allows you to copy an image from any web page, and then upload it by pasting it into an uploader instance. This may be quite useful for some workflows that involve Fine Uploader. Without this feature, in order to upload an image from another web page, you must save the image to your local file system and then either drop it into an uploader instance or select it from the “choose files” dialog. Certainly copying and pasting is a much more efficient way to do this. Note that you can also use this feature to upload any image currently present in your clipboard. For example, suppose you take a screenshot and add it directly to your clipboard. You can then paste it into your Fine Uploader instance.

Supported browsers

The stage was set for this feature in 3.3 with the addition of the addBlobs API function. You see, pasted images must be converted into Blob objects before they can be sent (uploaded) to the server for further processing. Support for handling pasted images is currently made possible by the Clipboard API. Chrome is the only browser with complete support of the clipboard API. Therefore, uploading images via paste is only currently supported on Chrome. It is possible to support pasting images on other browsers, but this will involve quite a bit more work, as well as server-side intervention. See the associated feature case for more details. For now, I will support upload via paste on browsers that fully support the Clipboard API, but am willing to add support for non-Clipboard API browsers if a good number of users let me know that this is important to them.

Handling pasted images in FineUploaderBasic mode

In order to enable this feature, you must provide a targetElement value. This is the element that should receive pasted images. This target element must have focus before the paste event can be handled. This is normally accomplished by clicking on the element before pasting the image from the clipboard, or by programmatically giving it focus.

Once the image has been pasted, the onPasteReceived callback will be invoked with the associated Blob as a parameter. As the readme suggests, this is a promissory callback, and a qq.Promise MUST be returned if you provide your own implementation of this callback. Via the promise object, you can return a string that determines the name of the associated image. This will be passed along with the upload request. Fine Uploader will also append an extension to the name, based on the image type. This callback can be used if you need to make an ajax call to determine the name of the pasted image, or if you need to display a (blocking or non-blocking) modal dialog to ask the user for this information. If you do not contribute a custom implementation for this callback, the defaultName property of the paste option, along with an appropriate extension, will be used to name the pasted image.

Handling pasted images in FineUploader mode

Everything in the above “Handling pasted images in FineUploaderBasic mode” also applies to FineUploader mode, but a small nicety in the form of an overriable name prompt is available. In other words, if you want a basic prompt dialog to ask the user for a name after an image has been pasted, you can do so simply by setting the promptForName property of the paste option. If you want to ask the user to name a pasted image, you don’t have to worry about the onPasteReceived callback at all. You can also use a more appropriate prompt dialog by overriding the showPrompt option function. A simple example of this, using a bootbox modal prompt, is described in the qq.Promise documentation.

Promises, promises

Along with this feature, I have introduced a new component of Fine Uploader: qq.Promise. This is a very simple class that enforces the promise contract. In short, it provides support for asynchronous requests, such as callbacks that must delegate to ajax or a non-blocking dialog in order to return a response to Fine Uploader. Promises will likely be used more in Fine Uploader over time, and this implementation of a promise will also grow with the needs of this library. At some point, I will likely modify any API functions/callbacks that could potentially benefit from promises to require a promise as a return value. You can read more about Fine Uploader’s promise support in the promises readme document.

The future…

As more browsers fully support the new Clipboard API, the ability to upload an image via paste will spread beyond Chrome. Fine Uploader will also support automatic display of thumbnails (before uploading) in the near future as well, which will apply to traditional files and pasted images.

Please have a look at the paste option documentation for both FineUploaderBasic and FineUploader mode, along with the onPasteReceived callback, the showPrompt FineUploader mode option, and the qq.Promise for more details on the items described in this article.
As always, I’m interested in hearing how my users would like to see this feature improved. Please file a feature request in the Github issue tracker if you have a suggestion. Also, the support forum is there should you have any questions regarding use of this feature. Note that I am particularly interested in users who would like this feature expanded to other browsers that do not support the clipboard API. Please read the associated case in the issue tracker and leave a comment if you wish. Please be sure to read about what is involved for proper support of other browsers.

-Ray Nicholus