Code to display locally stored image?

[RichardInTN]

Is there an HTML, Javascript or CSS that I can put in the General footer that will replace the background image with a "locally stored" (something on an individual member's personal device's storage media, like their hard drive, or flash drive in their phone/tablet) image?

I figure I'd have to have a custom profile field to host the address (and that's no problem to add), which then could be hidden by Javascript.

All this talk about transparent and semi-transparent backgrounds got me thinking "what if..." and It might be nice to be able to have your kids as a background, or your sweetie, or your car... whatever... but some people don't want to upload or don't have online storage for images... so getting the image from their "local storage" is the only option.

So... what say you, my favorite miracle workers... is this possible?

[RichardInTN]

Anyone? Come on guys, don't make me lose my faith in you lot as "Miracle Workers"!

[Tumbleweed]

Something like this? (Not my code, I just googled it.)


jsfiddle.net/N7KfQ/4/

[RichardInTN]

Without the picker... (because their image's local address would be stored in a custom profile field), and preferably set to stretch the image to fill.

But yeah. that kind of works.

[Peter]

RichardInTN ,

Someone might have to correct me here, as I've not done much with the FileReader class.

For security reasons, file reader will not allow you to read from a local file when passed in via the path (which sounds like what you are wanting to do).

The way around this, is to get the user to pick the file using a "picker" (input file type), and store the data (event.target.result) in local storage.

[RichardInTN]

But using a "picker" would be impractical because they'd have to "pick" the file each time they loaded a page.

[Kami]

Aug 26, 2017 19:40:35 GMT -8 RichardInTN said:

But using a "picker" would be impractical because they'd have to "pick" the file each time they loaded a page.

Not really sure what gives you this impression? Local Storage is stored on the browser and wouldn't be cleared unless the user manually clears it or otherwise does some user-initiated action (e.g. replacing the image).

www.w3schools.com/html/html5_webstorage.asp

[RichardInTN]

Aug 26, 2017 20:12:01 GMT -8 Kami said:

Aug 26, 2017 19:40:35 GMT -8 RichardInTN said:

But using a "picker" would be impractical because they'd have to "pick" the file each time they loaded a page.

Not really sure what gives you this impression? Local Storage is stored on the browser and wouldn't be cleared unless the user manually clears it or otherwise does some user-initiated action (e.g. replacing the image).

www.w3schools.com/html/html5_webstorage.asp

Because if the code requires a picker, it's more likely that it will require it each page-load than not require it. It's not like an already permanently-set "image fetch". There's no way to set the selected image as the new default, in the actual code, on the next page re-load... at least none that I can think of anyway.

[Kami]

Maybe I am misunderstanding Peter, but with the mention of local storage (which isn't cleared until the user clears it), the implication to me was that using local storage would allow the data (i.e. the location of the image on the user's hard drive) to be stored indefinitely.

[Peter]

Aug 27, 2017 20:17:36 GMT -8 Kami said:

Maybe I am misunderstanding Peter , but with the mention of local storage (which isn't cleared until the user clears it), the implication to me was that using local storage would allow the data (i.e. the location of the image on the user's hard drive) to be stored indefinitely.

You are 100% correct about local storage.  Local storage is persistent, and requires either the code, or the user of the browser to clear it.

What would get stored is the data of the file (base64), not the location.  The location is not something you have access too from what I can see, and this is why having a field with the file location (e.g, c:\somewhere\over\the\rainbow.png) wouldn't work, it needs to be a file browse dialog.

---

Here is some sample code that you can run in the console.  It will add browse and clear buttons to the top of the page.  Browse for an image and it should display it as the background.  Refresh the page and run the code again in the console, and it should read from local storage, as the base64 encoded string is stored there.

// Create "file picker" and clear button

$("<div><input type='file'  id='browse-file' /> <button id='clear-bg'>Clear Image</button></div>").prependTo(document.body);

$(() => {

// Each file browsed and selected, update local storage
// and also update the background image.

//  @TODO: Add in file type checking (e.g, png)

$("#browse-file").on("change", e => {
let reader = new FileReader();

// Once the data has been read, store it in local storage

reader.onload = function(event){
let data = event.target.result;

if(data){
localStorage.setItem("user-bg", data);
update_bg();
}
};

// base64 encoded string

reader.readAsDataURL(e.target.files[0]);
});

// Allow the user to clear the background and data

$("#clear-bg").on("click", () => {
localStorage.setItem("user-bg", "");
update_bg();
});

// Update background based on data stored in local storage

function update_bg(){
let data = localStorage.getItem("user-bg") || "";

$("body").css("background-image", "url(" + data + ")");
}

update_bg();
});

Important note:  There is no file type checking in the sample code, this is something that needs to be done later.

[Kami]

Peter thanks for the clarification!

[RichardInTN]

bump...

[Peter]

Sept 2, 2017 20:47:01 GMT -8 RichardInTN said:

bump...

Why are you bumping?

Your question has been answered.

[RichardInTN]

Sept 3, 2017 1:37:08 GMT -8 Peter said:

Sept 2, 2017 20:47:01 GMT -8 RichardInTN said:

bump...

Why are you bumping?

Your question has been answered.

Because as far as I can tell, that's not a code that reads a local location that they can change at will but will stay constant across all openings and refreshes of web-pages without prompting until/unless they intentionally change it (plus I thought you were just answering Kami 's question... not posing a possible solution).

[Kami]

Sept 3, 2017 17:23:25 GMT -8 RichardInTN said:

Sept 3, 2017 1:37:08 GMT -8 Peter said:

Why are you bumping?

Your question has been answered.

Because as far as I can tell, that's not a code that reads a local location that they can change at will but will stay constant across all openings and refreshes of web-pages without prompting until/unless they intentionally change it (plus I thought you were just answering Kami 's question... not posing a possible solution).

I think you misunderstood! Peter can correct me if I'm wrong, but I don't think I am:

- The solution that Peter proposed would NOT require having to re-select the image on every page load. While yes, a file picker is necessary, that is simply so that the *browser* can store the data (the base64 data, rather than the image location as I originally thought) via localStorage, which would therefore mean that the data will exist for the user until cleared (either clearing the image or replacing it with a new image). If localStorage stores this data until the user clears it, then the file picker would, logically, not appear on every page / need to constantly be updated because the data is stored indefinitely until the user chooses to clear it.