Save dataURL image to cache without a round trip to the server

Question

In my web app, users drag images from their desktop onto the browser window. I then use FileReader's readAsDataURL to display the image in the browser, as I described here. I can then upload the image to the server. The JavaScript in the browser can know in advance what the new URL for the image is to be.

Is there a way to tell the browser: "Here is the data that you would download from this URL, but there's no need to download it because it's already available right here. Just use this."? My aim is to get the image into the browser's cache so that using the real URL (rather than the dataURL) will display the image. This means that the browser can take responsibility for unloading such images from memory when they are (temporarily) no longer displayed.

Do you have any suggestions on how to cut out unnecessary bandwidth usage?

Answer 1

Correct me if I'm wrong, but I understand that you want the browser to display the image using the data from the desktop, instead of from the server on which it was uploaded.

As far as I know, browser caching relies heavily on the URLs, so I don't see how you could tell the browser to use local data instead of remote data.

However, you could:

• load image directly from disk (you have the local path). However, you you have the local path in the code
• use local storage (see Saving and loading an image from localStorage) to save the image locally and get it