Develop Reference

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

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);
}

Read an input tag into a javascript string

I'm trying to read an input type="file" tag into a javascript string. I know this should be simple but I simply cannot get my code to work. The file is plain .html. Here's what I have
<h3>Select location of html file.</h3>
<form onSubmit="submitButtonPressed()">
<input type="file" id="classList" />
<input type="submit" />
</form>
<script>
var reader = new FileReader();
var htmlFile = document.getElementById("classList").files[0]; //read the file selected with the <input> tag
reader.readAsText(htmlFile);
var htmlText = reader.result; //and create a string with the contents
function submitButtonPressed() {
var lengthOfText = htmlText.length;
alert("It is " + lengthOfText + " characters long");
}
</script>
I'm just trying to create a string that contains the contents of the .html file selected by the input tag. I can't figure out why htmlText doesn't contain the contents of the .html file, could someone explain what I'm doing wrong?

this is the right answer for you :
HTML5 File API: How to see the result of readAsText()
reader.onload = function(e) {
// e.target.result should contain the text
};
reader.readAsText(file);
so i guess you will have to check on pressing the button if the file was loaded or not , maybe it is still in progress , or encountered an error

Passing path to uploaded file from HTML5 drag & drop to input field

I'm working on an application (in Node.js, which is irrelevant for this case) which allows the user to upload an image. It works fine using a form with an input (type="file") field.
However, what I want is to be able to upload an image using HTML5 drag and drop instead. As far as i've come it's possible to drag an image to the client, and the image thumbnail is displayed in a div. However I really need some help with getting the file upload working.
The thing is that I want to use the form that i'm using right now, and (somehow) pass the file's path to the input field, i.e. the flow will work exactly as it do now, but instead of choosing a file by browsing it I want to attach it to the input field by drag and drop.
In the js code below for drag and drop the file that was dragged to the client is stored in the variable "file", and i'm able to use "file.name", "file.type" and "file.size" exactly the same way as it works since before with the form. However, I can't access the files "path" (file.path) which makes it impossible to access the file server side for uploading the same way as I do it since before.
The question is, is it possible to pass the file object to the input field after the file has been dragged to the client, so that I can click on "submit" and upload the file? If so, how could this be done?
Thanks in advance!
the dropbox as well as the form i'm using for file uploads:
<div id='upload'>
<article>
<div id='holder'>
<p id='status'>File API and FileReader API not supported</p>
</div>
</article>
<form method='post' enctype='multipart/form-data' action='/file-upload'>
<p>
<input type='file' name='thumbnail'>
</p>
<p>
<input type='submit'>
</p>
</form>
</div>
the code for drag and drop:
uploadImage: function(){
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
reader.readAsDataURL(file);
return false;
};
},

You cannot use the file input to add the file data.
Nevertheless, what you can do (among other technics) is to use the base64 (natively available through the reader.onload event as event.target.result, when using readAsDataURL method) encoded data and put it into an hidden field :
html
<article>
<div id='holder'>
<p id='status'>File API and FileReader API not supported</p>
</div>
</article>
<form method='post' enctype='multipart/form-data' action='/file-upload'>
<input type='file' name='thumbnail' />
<input type='hidden' name='base64data' />
<input type='submit' formenctype='application/x-www-form-urlencoded' />
</form>
js
reader = new FileReader();
reader.onload = function (event) {
document.getElementById('base64data').setAttribute('value', event.target.result);
};
reader.readAsDataURL(file);
From the server side you'll be able to get the base64 encoded data from the file, just decode it and use it as you want.
While submitting the form, you could also change the "enctype" attribute (done through the formenctype attribute) and remove the basic html file input, since the data will be post in a text field.

It is impossible to know the path of the field for security purposes. With drag and drop you must have it upload independently of the main form. Look here for an example: http://www.sitepoint.com/html5-file-drag-and-drop/

I find that the hidden field set in reader.onload (see answer by #challet) is not set when acccessed in code behind. I am using asp.net and a WebForms project. To access the hidden fields I have to prepend MainContent_ to the field names. aspx code is below
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
...
<script type="text/javascript">
function dropHandler(ev) {
alert("File(s) dropped");
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
//alert("Default prevented");
if (ev.dataTransfer.items) {
if (ev.dataTransfer.items.length > 1) {
alert("Only single files can be dragged and dropped into Caption Pro Web");
return;
}
// If dropped items aren't files, reject them
if (ev.dataTransfer.items[0].kind === 'file') {
var file = ev.dataTransfer.items[0].getAsFile();
document.getElementById("MainContent_DroppedFileName").value = ev.dataTransfer.items[0].name
reader = new FileReader();
reader.onload = function (event) {
document.getElementById('MainContent_DroppedFileContent').value = event.target.result;
};
reader.readAsDataURL(ev.dataTransfer.items[0]);
}
} else {
// Use DataTransfer interface to access the file(s)
if (ev.dataTransfer.files.length > 1) {
alert("Only single files can be dragged and dropped into Caption Pro Web");
return;
}
document.getElementById("MainContent_DroppedFileName").value = ev.dataTransfer.files[0].name
document.getElementById("MainContent_DroppedFileContent").value = "Test";
reader = new FileReader();
reader.onload = function (event) {
document.getElementById("MainContent_DroppedFileContent").value = event.target.result;
};
reader.readAsDataURL(ev.dataTransfer.files[0]);
}
document.getElementById('<%=btnDrop.ClientID %>').click();
}
</script>
...
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<p>Drag image to this Drop Zone ...</p>
</div>
<asp:HiddenField ID="DroppedFileName" runat="server" />
<asp:HiddenField ID="DroppedFileContent" runat="server" />
...
</asp:Content>
I access the hidden fields from c# as shown below
protected void btnDrop_Click(object sender, EventArgs e)
{
string FileName = DroppedFileName.Value;
string FileContent = DroppedFileContent.Value;
}
If I use Internet Explorer as the target browser (not running VS as Admin as this disables drag/drop!) and set a breakpoint in the reader.onload() function the hidden field DroppedFileContent contains the encoded file content, but when I try to access it from btnDrop_Click it only contains "Test" as set before reader.onload() and does not contain the encoded file content. The field DroppedFileNam.Value is as set in the Javascript.