JavaScript selecting image to an img tag

Question

I have a fake profile system for a class project, it requires a profile picture, and it needs an option to change it locally (from your hard drive). I have a working i

Answer 1

Well, the native file uploading interface (as I've found) doesn't allow you to do that, assuming you're only working client-side.

The only time that will ever be useful to you is in a form that is submitted to a server because browser security measures prevent you from doing anything else with it.

Modern browsers will give you a fake file path on the client side as the result of a file upload to prevent malicious acts with the user's filesystem.

However, I think the Ink Filepicker API provides exactly the functionality you're looking for. When the user uploads a file, it will return an object that contains the name of the file and a URL that points to its download location, which is exactly what you're looking for (this would fill the src attribute of your image).

It's really simple to set up, actually.

First, sign up for a free account and grab an API key. In your head, set it up like this:

Then, you have access to all of the API's functionality.

To do what you're asking, you'll need to create a button like this:

Upload Image

Clicking on it will produce a dialog for the user to pick a file that looks like this:

Then, create a handler function:

I've found this to be a tremendously useful API: here are the docs.

Demo