Develop Reference

How to retrive save image in image preview in edit form?

I am trying to use image preview before upload.Its working fine while creating new.but how to retrieve that image that has already saved in edit form and can be change when i try to change another image ? This is my input type for file.
<input type="file" class="form-control" name="image" id="image">
<img id="user_image" src="{asset('admin/images/user/'.auth()->user()->image)}}" />
This is my script file to preview image before uploading
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
#php $value=auth()->user()->image; #endphp
$('#user_image').show();
$('#user_image').attr('src', e.target.result).slideDown();;
};
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function() {
readURL(this);
});
</script>

How to display an image which i inputted

i made a button that takes an image as an input but i cant find a way to show the picture.
i have tried to make an empty element and then change its URL like i saw on a different website but it didnt work.
HTML
<input
id="myImage"
class="photo-upload"
type="file"
accept="image/*, image/jpeg">
<img id="the-picture" width="200" />
JavaScripts
const uploadPictureButton = document.querySelector(".photo-upload");
uploadPictureButton.addEventListener("click", displayPicture);
function displayPicture(event) {
let image = document.getElementById("myImage");
image.src = URL.createObjectURL(event.target.files[0]);
};

There were some fixes required in the code, the file has to be read and the URL should be created, here is the working snippet for the code.
const uploadPictureButton = document.querySelector(".photo-upload");
uploadPictureButton.addEventListener('change', function () {
displayPicture(this);
});
function displayPicture(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('the-picture').setAttribute('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
<input
id="myImage"
class="photo-upload"
type="file"
accept="image/*, image/jpeg">
<img id="the-picture" width="200" />

You can use innerHTML for display an image also.

Try this one out, it works for me
<img height="100" width="100" alt="avatar" id="imgPreview> <input type="file" onchange="document.querySelector("#imgPreview").src = window.URL.createObjectURL(this.files[0])">

how to call function and access in innerHTML

I'd like to show data which stored in DB at update page.
My problem is that I wanna access innerHTML tag to show images and any other data like
document.getElementById(visibilities).checked = true;
or
for (i=0; i<files.length; i++) {
var image = new Image();
image.src = files[i];
image.height = 100;
display.appendChild(image);
}
Btw, I don't know how to access tags or call function with onload in innerHTML. Please let me know. Thanks in advance.
function getData(id) {
var path = '/project/update/' + id;
restfull.get({
path: path
}, function(err, data) {
if(err) return;
var title = data.title;
var descriptions = data.descriptions;
var visibilities = data.visibilities;
var files = data.image;
const modal = new window.Modal({
modalContainerId: 'updateModal'
, modalTitleText: `Update Your Project`
, modalContentsInnerHTML: ` <form method="put" id="updateform" enctype="multipart/form-data" onload='getData()'>
<input type="radio" name="visibilities" value="public" id="public">Public
<input type="radio" name="visibilities" value="private" id="private">Private
<input type="radio" name="visibilities" value="unlisted" id="Unlisted">Unlisted <br>
<label for="title">Project Title</label>
<input type="text" name="title" id="title" required value="${title}"><br>
<label for="descriptions">Description</label>
<input type="text" name="descriptions" id="descriptions" required value="${descriptions}"><br>
<label for="multi_image">Images/ Videos
<input type="file" id="multi_image" name="multi_image" multiple onchange='previewImages()'><br>
<div id="display"></div>
<div id="projectpreview"></div>
</form>`
, modalSubmitBtnText: 'Update'
, modalSubmitBtnAction: function(){updatesubmit(data._id)}
, modalCancelBtnText: 'Cancel'
, modalCancelBtnAction: function() {
modal.destroy();
}
})
modal.show();
})
}

You can define the function outside and reference it by name. Here I also use the dataset of the button inside the innerHTML to store the id I want to access when the function is called.
const id = 1
document.getElementById('container').innerHTML = `
<button data-selected="${id}" onclick="foo(event)">Click Me</button>
`
const foo = ({target}) => console.log('selected id:', target.dataset.selected)
<div id="container"></div>

If you want to preview the uploaded image for update:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInput").change(function() {
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
<input type='file' id="imgInput" />
<img id="preview" src="#" alt="your image" />
</form>
If you want to display an already stored image from database:
var image = document.getElementById('preview');
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
image.width=100;
image.height=100;
image.alt="here should be some image";
<img id="preview">

How to create file uploading with a possibility of adding files again and again?

I'm trying to do something like such interface showed on the following image. Clicking on the Plus I want to be able to select multiple images and show them within the squares. Then, I want to click on the Plus again and add a few more images, and show them in the new portion of squares. I wanna let user select such number of files that he wants.
IMAGE
For now I've found solution for single file:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>

let files = []; // once
if (input.files) {
let files = [...files, ...input.files];
}

ajax image upload with pre-preview

I am uploading image with ajax and showing image before uploading with jquery.
here is my html code
<form id="uploadimageS2" action="" method="post" enctype="multipart/form-data">
<div id="image_previewS2"><img id="previewingS2" src="img/noimage.png" /></div>
<div id="selectImageS2">
<label>Select Your Image</label><br/>
<input type="file" name="fileS2" id="fileS2" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
then here is my jquery code
// Function to preview image
$("#fileS2").change(function() {
$("#messageS2").empty(); // To remove the previous error message
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewingS2').attr('src','img/noimage.png');
$("#messageS2").html("<p id='errormsg'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
return false;
}
else
{
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
function imageIsLoaded(e) {
$('#image_previewS2').css("display", "block");
$('#previewingS2').attr('src', e.target.result);
$('#previewingS2').attr('width', '250px');
$('#previewingS2').attr('height', '230px');
};
reader.readAsDataURL(this.files[0]);
var file = this.files[0];
here i want to add another element instead of "this". because i am uploading 3 images in one page and when using this script it is going wired.
i already tried
reader.readAsDataURL($(#uploadimageS2).files[0]);
reader.readAsDataURL($(#fileS2).files[0]);
and those didn't work.