We Keep Coding

Loop image convertion to base64 based on how many images are uploaded in file upload

How can I loop this image convertion to base64 based on how many images are uploaded in file upload?
This script I am using, I want it to be looped based on how many images that are selected in the file upload:
<input id="inp" type='file' multiple>
<p id="b64"></p>
<img id="img" height="150">
<script>
document.getElementById("inp").addEventListener("change", readFile);
function readFile() {
var FR = new FileReader();
FR.addEventListener("load", function (e) {
document.getElementById("img").src = e.target.result;
document.getElementById("b64").innerHTML = e.target.result;
});
FR.readAsDataURL(this.files[0]);
}
</script>
Thank you!

<script>
var bs64Array = [];
document.getElementById("inp").addEventListener("change", readFile);
function readFile() {
var FR = new FileReader();
FR.addEventListener("load", function (e) {
var image = document.createElement('img')
image.src = e.target.result;
document.getElementById("b64").appendChild(image);
bs64Array.push(e.target.result)
});
FR.readAsDataURL(this.files[0]);
}
</script>

Extract data from uploaded file without submittng the file in JavaScript?

I want to take a user uploaded a file in Javascript and extract data from it without submitting the page and process that data for giving other options in the form on the same page.
It would be of great help if anyone could please help me out here.

Use the HTML 5 file API and FileReader, it allows you to work with files directly on the browser.
Here's a full example:
<input type="file" id="input" onchange="handleFiles(this.files)">
<div id="output">
</div>
<script type="text/javascript">
function handleFiles(files) {
//$("#output").html("got: "+files[0].name);
var reader = new FileReader();
reader.onload = function(e) {
$("#output").html(reader.result);
}
reader.readAsText(files[0]);
}
</script>
Please read this: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
and read this:
https://www.w3.org/TR/FileAPI/#APIASynch
The FileReader class provides the following useful methods:
interface FileReader: EventTarget {
// async read methods
void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob);
void readAsText(Blob blob, optional DOMString label);
void readAsDataURL(Blob blob);
....
Please read the above links, they will provide all the examples for you.

Here is the example of how to access a file's content.
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// Do everything what you need with the file's content(e.target.result)
console.log(e.target.result);
};
})(f);
reader.readAsText(f);
}
document
.getElementById("upload")
.addEventListener("change", handleFileSelect, false);

Base64 encoding in Jquery

I try to encode my image to base64 data string, but I have problem with output result. My base64 string is very short to has a valid data. If I print it in test div, I have normal and long string. Where the problem I don't know. I want to use my code for previewing logo.
function readURL(input, object) {
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e)
{
$(object).attr('style', 'background-image :url("' + e.target.result + '")');
console.log(e.target.result);
}
reader.readAsDataURL(input.files[0]);
}};
This is my function...
$("#company_avatar").change(function(){
readURL(this, '#company_avatar_preview');});
And this function in use.

You are getting base64 string back, its better to add that to img src. You cant give background base64 code.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function(e) {
$('#' + '<%=ImageDisplay.ClientID%>').attr('src', e.target.result).width(256).height(96);
$('#status').html("Done loading. processed 1 files.");
};
}
}
ImageDisplay
<input id="fileBox" name="fileBox" type="file" onchange="readURL(this);" accept="image/png, image/jpeg, image/gif" runat="server"/>
<img id="ImageDisplay" src="#" alt="#Default" runat="server"/>
<div id="status"></div>

Upload base64 image to .NET webservice and convert it there

I have a function that sends data through data:JSON.stringify(formdata)using POST to a remove .NET webservice. I have no problem this far. What I want to do it to add also add a another value to the formdata JSON that will hold a base64 image data and send it to the server, and there I will convert it back to a JPEG image.
How can I so that? I already have a preview function that created a preview, but also create a base64 image:
function previewFile() {
var preview = document.querySelector('.uploadimage');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
I see many question people asking how to upload image to the server. I want to stay with the current configuration but just pass the base64 image data to the server as a string. I see many developers struggling with that, and most of them just engine up creating a form in javascript and submitting like that.

Here is a recent way I did this:
string base64 = base64string.Substring(base64string.IndexOf(',') + 1);
byte[] imageData = Convert.FromBase64String(base64);
Image img;
using (var ms = new MemoryStream(imageData, 0, imageData.Length)) {
img = Image.FromStream(ms, true);
You will need:
using System.Drawing;
OR to simply convert to a jpg, use this:
File.WriteAllBytes("image.jpeg", Convert.FromBase64String(base64));
For sending the data I use the following JS:
function sendImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function (e) {
$("#imgImage").attr("src", e.target.result); //show a preview
//send e.target.result as a string to your webservice
};
FR.readAsDataURL(this.files[0]);
}
}
I use this event to listen for uploaded files:
document.getElementById("fileid").addEventListener("change", sendImage, false);
And the front end:
<input type="file" id="fileid" />

Having problems viewing the uploaded array via JavaScript

I am using the File API to upload a file and save its content as a variable in JavaScript. This is what I have so far but, the result that I get is undefined.
<body>
<input type="file" id="file" name="file" multiple />
<script>
function handleFileSelect(evt) {
// grab the file that was uploaded which is type File.
// evt is the event that was triggered
// evt.target returns the element that triggered the event
// evt.target.files[0] returns the file that was uploaded
var file = evt.target.files[0];
// instantiate a FileReader object to read/save the file that was uploaded
var reader = new FileReader();
// read the file and save as an array
fileArray = reader.readAsArrayBuffer(file);
window.alert("hello");
window.alert(fileArray);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>

FileReader is asynchronous. you should set up onload
var reader = new FileReader();
reader.onload = function(){
console.log(reader.result);
};
// read the file and save as an array
reader.readAsArrayBuffer(file);