I'm trying to make a function which allows my user to customize the whole background of my site. so I made a form for image upload but I don't know what to do next to do with this image I got from a user. Where this image or images are stored and how to access to this image and make this images as a background image. below is my html
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
and I gave animation using css
.crossfade figure {
animation: imageAnimation 60s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center;
color: transparent;
height: 100%;
width: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
z-index: -1;
margin: 0;
}
.crossfade > figure:nth-child(1) {
background-image: url(../img/0.jpeg);
}
.crossfade > figure:nth-child(2) {
animation-delay: 12s;
background-image: url(../img/1.jpeg);
}
.crossfade > figure:nth-child(3) {
animation-delay: 24s;
background-image: url(../img/2.jpeg);
}
.crossfade > figure:nth-child(4) {
animation-delay: 36s;
background-image: url(../img/0.jpeg);
}
.crossfade > figure:nth-child(5) {
animation-delay: 48s;
background-image: url(../img/1.jpeg);
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1;
}
45% {
opacity: 0;
}
100% {
opacity: 0;
}
}
and get image from user by form
<form id="background-form" method="get">
<div>
<label for="custom-file" class="form-label">Choose Images to upload(jpg, jpeg, or png) up to 5MB</label>
<input
required
type="file"
class="form-control"
id="custom-file"
accept=".jpg, .jpeg, .png"
multiple/>
</div>
</form>
And javascript file to handle submit
const submit = document.querySelector("form#background-form")
function handleSubmit() {
//How should I access to the image I got from form
//I tried to access by using URL.createObjectURL(file) API but didn't work
//Or is there a way to store this image in localstorage or sessionstorage?
//If it is possible how can I access to the image URL?
}
There is way to store your image using local and session storage based on your needs and take in count, that localStorage have size limit of 5mb and limit can be increased by the user when needed, however, only a few browsers support this but on other hand sessionStorage size is limited only by system memory.
To save image in localStorage you can do following.
const fileInput = document.querySelector('#fileInput');
when input is changed - when image is chosen or changed this function executes
fileInput.addEventListener('change', function () {
const reader = new FileReader(); -- read content of files
when content of files is loaded
reader.addEventListener('load', function () {
save result ( image ) in local storage
localStorage.setItem('image', reader.result)
})
read content of blob or file
reader.readAsDataURL(this.files[0]);
})