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