Basic Local File Picker

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

While we demonstrate how you can add local file picker to the Image dialog, in order for it to be useful in the 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(). To check the level of support for this feature across modern browsers, visit this link.

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.

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

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.