Upload image in angular js - javascript

I want to upload the image in angular js the image name need to send to db and the uploaded image move to an folder(target location) Same like move_uploaded_file in PHP. I have implemented as below:
<input type="file" id="file" name="file" ng-model="machineimage"/>
<button ng-click="uploadMachineImage($index)">Add</button>
In controller:
$scope.uploadMachineImage = function() {
var imgobject = document.getElementById('file').files[0];
console.log(imgobject['name']);
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
console.log(data);
}
r.readAsBinaryString(imgobject);
};

Related

Convert an image to base64 in javascript

I want to transform my image into base64 and then into JSON to send it via a post request to a server in java script.
I have looked for several solutions on the internet but none of them really work. Can someone explain to me the logic to have to achieve the code?
For now, I have this code:
JS code :
<script>
function convert (){
//image = btoa(URL="../static/images/images_final.jpg");
fetch("/predict" ,{
method: "POST",
body: JSON.stringify({result})
})
}
var file = window.document.querySelector('#form-base64-converter-encode-image-file').files[0];
getBase64(file);
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", e => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
console.log(reader.result);
});
reader.readAsDataURL(file);
});
</script>
htlm code :
<form>
<input type="file" id="fileInput">
<button class="button"
type="reset"
onClick="convert()">
<h4>ENVOYER </h4>
</button>
</form>
API flask:
#app.post("/predict")
def predict_image():
req = request.get_json(force=True)
b64Image = req["image"]
buf = base64.b64decode(b64Image)
return print(b64Image[:20], buf[:20])

How to get all url's image from a multiple input file?

I'm trying to get all url values from a multiple input file. It works correctly with just one image but if I try to attach more than one, I retrieve a null response and only get the last one correctly. I hope anybody could help with this issue!
Post my code below and JSFiddle example:
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
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) {
//show url image
var dataURL = reader.result;
alert(dataURL);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
https://jsfiddle.net/3q49moyj/

How to convert the loaded csv data to JSon object in AngularJS

I have to load a CSV file using upload and then use the contents of this file(converted to JSON) to call a REST Interface using $http post request. This request wants input data in JSON format.
Please suggest me how to do the same. I have tried the following as of now. I am able to load the file and read its content. How to create the JSON onject from the same. Code as follows:
'use strict';
angular.module('myApp', [])
.controller('fupController', function ($scope, $http) {
$scope.data = '';
$scope.toJSON = '';
$scope.add = function(){
console.log("Add called");
var csvFile = document.getElementById('file').files[0],
reader = new FileReader();
reader.onloadend = function(e){
var data = e.target.result;
console.log("File Name: ", document.getElementById('file').files[0].name);
$scope.data = e.target.result;
// Trying to convert to JSON object
$scope.toJSON = angular.toJson($scope.data);
console.log("Json Data: ", $scope.toJSON);
// --> $http POST request with the JSON onject as input data
}
reader.readAsText(csvFile);
}
});
HTML:
<div class="form-group">
<label>Select File to upload</label>
<div ng-controller="fupController">
<input type="file" id="file" name="file" accept=".csv"/>
<input type="button" ng-click="add()" value="Upload" />
</div>
</div>

Import external html file with image

Here is my html code:
<input id="file" type="file">
<div id="preview">Preview</div>
and JavaScript Codes:
function handleFileSelect(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').innerHTML = e.target.result;
};
reader.readAsText(file);
};
document.getElementById('file').addEventListener('change',handleFileSelect, false);
fiddle : https://jsfiddle.net/8te1hyv9/4/
I am trying to load an external html file from my local drive into the div id preview. Its Working fine only with image src url are on server..
How to display the image from local drive into the preview.Is this possible to convert the image url to base 64 when importing the html file.

FileReader readAsBinaryString() to Image DOM Element

If have an input type file
<input id="file" type="file" name="file" />
and an Image
<img id="img">
If a file is selected I want to read Exif data from the image an load it into the img tag.
var $inputFile = $("#file");
$inputFile.on("change", function() {
var img = document.getElementById("img");
var files = $inputFile[0].files;
var reader = new FileReader()
reader.onload = function(event) {
var file = reader.result;
// this is not working
img.src = file;
var binaryString = reader.result;
var oFile = new BinaryFile(binaryString, 0, file.size);
var exif = EXIF.readFromBinaryFile(oFile);
// read exif data
}
reader.readAsBinaryString(files[0]);
});
The problem is that I did not get any image on the screen. It only shows up if I use reader.readAsDataURL(files[0]); but this I cannot use because I need the binaryString for the Exif data.
How do I get the image tag to show the selected file which is a binary string?
to show an image in "binary" form, you need to have it as a base62 encoded string, aka "dataURL".
To use it binary and put it as the src you can make a ObjectURL.
var objectURL = URL.createObjectURL(blob);
image.src=objectURL;
You don't need a fileReader for this, but you will need fileReader for your exif analysis

Categories

Resources