Basic Local File Picker

This example shows how to add a local file picker to Image dialog.

Contribute to this page

While we demonstrate how you can add local file picker to the Image dialog, in order for it to be useful in real world scenario, you should also enable image uploading functionality - as a way to transport those local images to a server.

Note: The following code relies on URL.createObjectURL(), the level of support for which across modern browsers can be checked here.

See the Pen yVqpjq by TinyMCE (@tinymce) on CodePen.

You might also consider our MoxieManager module, which can hook onto file_picker_callback and provide feature-rich file manager UI right in the popup (check a demo here). With accompanying plugins it is possible to pick files from Dropbox, Google Drive and much more.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.