Unable to display multiple uploaded images in HTML - javascript

I'm trying to upload multiple images onto my webpage but I'm having trouble understanding how to get a valid URL for the source of the image and to check if the number of files uploaded is correct. How should I go about doing so? Here is a sample of the code I have written:
<div id = "image_display">
<input type="file" id="image" name="image" multiple>
</div>
const img = document.getElementById('image');
const display = document.getElementById('image_display');
img.onchange = evt =>{
const [file] = img.files;
if(file){
const newImg = document.createElement('img',{
src : URL.createObjectURL(file)
})
display.appendChild(newImg)
}
}

You need to break-up the creation of the image.
use document.createElement to create the image
set the new image's src
const newImg = document.createElement('img');
newImg.src = URL.createObjectURL( file );

Related

How to read and display html file

I'm making a html editor but the problem is that when someone needs to view an html file i don't know how to display the text from the file.
<input type="file" onchange="previewFile()"><br>
<p id="txt1" src="blank.html"></p>
<script>
function previewFile() {
const preview = document.getElementById('txt1');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// reads image file to a blob string
preview.src = window.URL.createObjectURL(file);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
I used this script to read a file and display it by changing the paragraph src to a blob link, but looks like the paragraph dosn't get the text by a html text link using src.
Is there a way to do it?
The paragraph does not have src attribute, You need to use either innerText or innerHTML to display the content.
function previewFile() {
const content = document.querySelector('.content');
const [file] = document.querySelector('input[type=file]').files;
const reader = new FileReader();
reader.addEventListener("load", () => {
// this will then display a text file
content.innerText = reader.result;
}, false);
if (file) {
reader.readAsText(file);
}
}
<input type="file" onchange="previewFile()"><br>
<p class="content"></p>
The p tag does not support src attribute so the alternative solutions would be using element.innerHTML= text or you change the p tag into iframe

Javascript Unerror method using another js file

<img src="images/business-card.webp" onerror="this.onerror=null; this.src='images/business-card.jpg' " class="m-auto img-fluid">
I want to write this feature from within js file. How can i do it ?
First, create the image in javascript:
var image = document.createElement("IMG");
document.body.appendChild(image);
image.src = "images/business-card.webp;
image.class = "m-auto img-fluid";
Now, add an onerror function:
blah.onerror = function(){this.onerror=null; this.src='images/business-card.jpg'};

HTML2Canvas Library Sometimes Produces Blank Images Randomly ONLY When Image Is Uploaded By Link

So I'm Making a meme generator and the user has the option to enter an image link OR upload a local file from storage.
Here is my html for link/local storage upload.
<div class="Main_Grid_Item Link_Upload_Div">
<form action="/" method="POST">
<p>Enter Image Link:</p>
<input class="Image_Input" type="text" name="Link_Url" placeholder="Image Link"><br>
<button class="Image_Submit" type="submit" name="button">Submit Image</button>
</form>
</div>
<div class="Main_Grid_Item File_Upload_Div">
<form>
<p>Upload Image:</p>
<input id = "UploadOutput" class = "Upload_Output" type="text" placeholder="Image Name After Upload" readonly><br>
<label for="ImgStorage" class="Image_Upload_Label">Upload Image</label>
<input type='file' id="ImgStorage" />
</form>
<br>
</div>
And for specifically file uploading this is my javascript which was mostly copied from this stack thread: Javascript image upload and display
function readURL(input) {
//if picture exists then create a new FileReader
if (input.files && input.files[0]) {
var reader = new FileReader();
//the image with specified id gets url
reader.onload = function (e) {
$("#blah").attr("src", e.target.result);
};
//reads picture
reader.readAsDataURL(input.files[0]);
}
}
Just to clarify that entering a link/uploading an images DOES WORK both ways and the image is shown properly on screen. The problem that I'm facing is when taking a "screenshot" with html 2 canvas.
This is my javascript code for taking a screenshot with html2canvas
//takes screenshot of Meme with overlay
$("#Save_Meme_Button").on("click", memeScreenShot);
function memeScreenShot() {
html2canvas(document.querySelector(".Main_Image_Div")).then((canvas) => {
document.body.appendChild(canvas);
});
}
This code essentially takes a "screenshot" of the image and then shows it below the website. The problem is that when I upload an image with a url, "screenshotting" the image will sometimes produce a blank image.
However if I go to the image-url, download the image on local storage, and then use the other option to upload an image from local storage, the image is saved sucessfully instead of showing a blank image.
Is there any reason why a blank screenshot of the image sometimes happens when uploaded by link compared to being uploaded by local storage? I looked a bit on the docs about something about a tainted canvas but I'm not sure if thats the problem because I get no errors in the console when uploading/saving an image :
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#:~:text=Security%20and%20tainted%20canvases,-Because%20the%20pixels&text=As%20soon%20as%20you%20draw,an%20exception%20to%20be%20thrown.
I am getting a cors error when the image is uploaded blank when I enable the option to useCors. I think this is why the link option is not working and the local storage is working
enter image description here
Code that displays image
<div id = "MainImageDiv" class="Main_Image_Div">
<% if(typeof imgUrl !== 'undefined'){ %>
<img id="blah" src=<%= imgUrl %> class="Main_Image" /></img>
<% } else{ %>
<img id="blah" src="/images/stonks.png" class="Main_Image" /></img>
<% } %>
<p id="TopTextPar" class="Top_Text"></p>
<p id="BottomTextPar" class="Bottom_Text"></p>
</div>
Ok so I managed to solve my problem. It's essentially a copy of the solution on this thread : html <img src=...> works but JS Image loading cause CORS error.
What I essentially did was take the image url the user entered and rendered it onto a seperate canvas.
And I enabled cors with this https://cors-anywhere.herokuapp.com/. I got a (cors enabled?) data url out of this and then all I had to do is append an image with the image src as the data url I received.
Here's my solved code :
// Changes image based on link
$("#ImageSubmit").click(function(){
//makes the previous meme dissapear and gets the url of the inputted link
$("#blah").css("display","none");
const imgUrl = $("#ImageInput").val();
function loadImgAsBase64(url, callback) {
//creates camvas amd image element + allows cors + loads image
let canvas = document.createElement('CANVAS');
let img = document.createElement('img');
img.setAttribute('crossorigin', 'anonymous');
img.src = 'https://cors-anywhere.herokuapp.com/' + url;
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
let dataURL = canvas.toDataURL('image/png');
canvas = null;
callback(dataURL);
};
}
loadImgAsBase64(imgUrl, (dataURL) => {
$("#MainImageDiv").append(`<img id="blah" class = "Main_Image Link_Meme"
src="${dataURL}">`);
});
loadImgAsBase64(imgUrl)
});

JS Function to swap Image

Using a pre-trained model for image classification, I created a webpage that in theory will allow the user to browse their computer for a image and when that image is selected, it is automatically processed and the top three responses for what that image most likely is displayed on the webpage along with the probability for each. My JS function is probably very wrong, I’m somewhat self-taught. I’m also using materializecss and tensorflow.js if it helps.
I’m having trouble with changing the image I currently have hard coded there with the chosen image of the user.
HTML
<div name="imagePost" class="offset-s1 col s6">
<img class="responsive-img" id="changeImage" src="images/dog.jpg" alt="description">
<input type="file" name="pickImage" onchange="swapImage(pickImage)">
</div>
JS Function
function swapImage (pickImage) {
var image_toShow = pickImage;
document.getElementById('changeImage').innerHTML = image_toShow;
}
Here is how you can swap the image
function swapImage(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
const img = document.getElementById("changeImage");
reader.onload = function(event) {
img.src = event.target.result;
};
reader.readAsDataURL(selectedFile);
}
Thanks for the help and suggestions. I ended up using a file reader, eventlisteners, and actually creating the img tag in another js function. Ill share it below incase it could help others. So the html part just has a empty div and js reads the input file and creates a img tag with the uploaded photo.
<div name="imagePost" class="offset-s1 col s6">
<fieldset>
<div id="changeImage">
</div>
</fieldset>
<input type="file" id="pickImage">
<a class="btn-large black col s4 offset-s1 unselect" onclick="app()">Calculate</a>
</div>
</div>
window.onload=function()
{
var y = document.getElementById("pickImage");
y.addEventListener('change', loadimage, false);
}
function imageHandler(e2)
{
var store = document.getElementById('changeImage');
store.innerHTML='<img id="newImage" class="responsive-img" src="' + e2.target.result +'" alt="The image here is interchangeable, allowing for users to process many different images using the machine learning model.">';
}
function loadimage(e1)
{
var filename = e1.target.files[0];
var fr = new FileReader();
fr.onload = imageHandler;
fr.readAsDataURL(filename);
}

Display image thumbnail of image selected from filepicker

I'm using a regular HTML File Picker input form item to allow my users to select files. I'd like to show them a thumbnail of the file they selected as they will be required to select many images and it can get confusing.
Does anyone know if it's possible to display the image they selected without uploading it to the server? If so, how?
If someone can point me to a post or give me an idea of how I might do this it will be greatly appreciated.
<input type="file" name="image" accept="image/*">
<!-- Create an <img> element to preview the image -->
<img id="image-preview" width="320">
<!-- The <input> can go anywhere in your page or <form>. Note the "onchange" attribute -->
<input type="file" name="image" accept="image/*" onchange="handleFileChange">
Make sure the following JavaScript comes after the above <img> and <input> elements. You can put this in your .js file that is loaded at the end of the page or in a <script> element at the end of page.
// Select the preview image element
const imgElement = document.getElementById('image-preview');
function handleFileChange(e) {
// If no file was selected, empty the preview <img>
if(!e.target.files.length) return imgElement.src = '';
// Set the <img>'s src to a reference URL to the selected file
return imgElement.src = URL.createObjectURL(e.target.files.item(0))
}
This should get you started
http://jsfiddle.net/41go76g4/
Basically you read the file in with fileAPI in javascript and set the returned blob as the dataURL for an img tag.
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
ref: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Categories

Resources