I am attempting to select an image on my computer and pass the data to a REST endpoint using the file element.
<input type="file" id="input">
I am able to render the image and display it in the browser. However, I get an empty string or object when passing the image to the endpoint as shown in the code below.
(function () {
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const reader = new FileReader();
reader.onload = (function() {
return function(e) {
sendFile(e.target.result);
};
})();
reader.readAsDataURL(this.files[0]);
}
function sendFile(file) {
let img = {
'Photo': new Blob([file], {type : 'image/png'})
};
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
}
};
xhr.open('POST', 'http://localhost/example/service.svc/AddPhoto/', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhr.send(JSON.stringify(img));
}})();
Service looks like this:
[OperationContract]
[WebInvoke(UriTemplate = "/AddPhoto/", Method = "POST",
RequestFormat = WebMessageFormat.Json, ResponseFormat =
WebMessageFormat.Json)]
void AddPhoto(BlogEntityModel blogEntityModel);
If you want to send the file as JSON, you have to take into account two things:
The value of e.target.result is a data URI.
You cannot convert Blob to JSON using the stringify method.
So, to fix it, you just should replace 'Photo': new Blob([file], {type : 'image/png'}) with 'Photo': file.
Keep in mind that in your case, the variable file is a data URI. If you want to submit only the Base64 value you have to remove the data:image/xxx;base64, prefix.
Related
I have Blob, which stored in db and i take it from database with java server like this:
Entity.java
#Column(name = "img")
private Blob img;
public Blob getImg() {
return img;
}
public void setImg(Blob img) {
this.img = img;
}
Repository.java
#Transactional
#Query(value = "SELECT img FROM articles WHERE category = ?", nativeQuery = true)
//Blob findP(String category);
Blob findPic(String category);
Controller.java
#RequestMapping(value="/Pic_test")
#ResponseBody
public Blob getPics() throws SQLException, IOException {
return remindRepository.findPic("Java");
}
Then I receive it with Javascript to image it:
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('http://localhost:8080/articles/Pic_test', function(dataUrl) {
var display = document.getElementById('display');
var url = window.URL.createObjectURL(new Blob([dataUrl]));
var img = new Image();
img.src = url;
document.getElementById("demo").innerHTML = img.src;
})
However, if I call my "img" Blob in java code, i have an error in server, but if I call it byte[], my picture is not shown just.
I can't comment the java part since I know nothing about it, but for the javascript one, what you do is... not correct.
You don't seem to understand what is a data URL, nor what you are doing here.
So a data URL is a string, made of an header and of some file content (data:|mime/type;|file-content).
A data URL is an URL that points to itself, useful to embed data that should normally be served from network.
Quite often, the file content part is encoded as base64, because the URI scheme is limited in its set of allowed characters, and that binary data couldn't be represented in this scheme.
Now let's see what you are doing here...
You are downloading a resource as a Blob. That's good, Blob are perfect objects to deal with binary data.
Then, you read this Blob a data URL. Less good, but I can see the logic, <img> can indeed load images from data URLs.
But then from this data URL string, you create a new Blob! This is completely wrong. The Blob you just created with new Blob([dataUrl]) is a text file, not your image file in any way. So yes, the data is still hidden somewhere in the base64 data which is itself in the data URL, but what your poor <img> will see when accessing the data hooked by the Blob URI is really just text, data:image/png;base64,iVBORw0... and not at all �PNG... like its parsing algo can read.
So the solution is quite easy: get rid of the FileReader step. You don't need it.
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
xhr.responseType = 'blob';
xhr.onload = display;
xhr.send();
function display(evt) {
// we did set xhr.responseType = "blob"
var blob = evt.target.response; // so this is a Blob
// hence, no need for anything else than
var url = URL.createObjectURL(blob);
var img = new Image();
img.src = url;
document.body.appendChild(img);
}
And if I may, all your thing could also just be
document.getElementById('display').src = 'http://localhost:8080/articles/Pic_test';
An image file is sent from ASP.Net MVC using FilePathResult. How can this image be converted into a base64 string at client side (web browser) when http response is received. It is showing data in the raw form in response.data object. I've tried
var blob = new Blob([response.data], { type: 'image/jpeg' });
var reader = new FileReader();
reader.onloadend = function () {
var base64data = reader.result;
console.log(base64data);
}
reader.readAsDataURL(blob);
When you fetch the binary as text with ajax, browsers will try to parse the character set and change your data.
You must fetch the data as a blob to avoid to tell them not to
function getBase64(blob) {
var blob = xhr.response
var reader = new FileReader();
reader.onload = function () {
var base64data = reader.result;
console.log(base64data);
}
reader.readAsDataURL(blob);
}
var xhr = new XMLHttpRequest()
xhr.open('GET', '/myfile.png', true)
xhr.responseType = 'blob' // get data as blob
xhr.onload = function() {
getBase64(xhr.response)
}
xhr.send()
// or if you are using fetch
fetch('/myfile.png')
.then(function(res) {
res.blob() // get data as blob
.then(getBase64)
})
I hope I am not misunderstood:
Try this script, for the easier ajax I'm using jquery:
$.ajax({
url: 'someImage.png',
type: 'POST',
success: function(r) {
var data = btoa(r);
$('img.photo').attr('src', "data:image/png;base64," + data);
},
});
you can change above code as you need.
Here is my code is like:
<input
type="file"
id="imageFile"
name='imageFile'
onChange={this.imageUpload} />
Now I want to store this image in local storage and display it at another side. So I want to store the image in local storage. My code is inside of image upload function.
My function is like:
imageUpload(e) {
console.log(e.target.value);
}
My console print is like C:\fakepath\user-bg.jpg
First, you should be aware that:
LocalStorage can only store strings, so you can store files using a string representation only (like base64)
LocalStorage is not really made for storing files, because browsers only offer you limited capacity
If this is really what you want to achieve, here's the solution:
class Hello extends React.Component {
imageUpload = (e) => {
const file = e.target.files[0];
getBase64(file).then(base64 => {
localStorage["fileBase64"] = base64;
console.debug("file stored",base64);
});
};
render() {
return <input
type="file"
id="imageFile"
name='imageFile'
onChange={this.imageUpload} />;
}
}
const getBase64 = (file) => {
return new Promise((resolve,reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
});
}
JsFiddle
One implementation to upload files, using Java in the backend and Google App Engine that uses blob Blobstore. First try to call a function in your button that sends the file name:
<input id="btn-chooseImage" className="btn-file"
onChange={() => this.handleUploadSession()}
After that, call a get function in backend to save the file uploaded and save as a img state to render it.
Js:
handleUploadImg(redirectAction){
var file = $('#btn-chooseImage')[0].files[0]
var formData = new FormData();
formData.append("uploaded_files", file);
var request = new XMLHttpRequest();
request.open("POST", redirectAction, true);
request.send(formData);
request.onload = function() {
if (request.status === 200) {
var response = JSON.parse(request.responseText);
this.setState({
img: '/serve?blob-key=' +response.blobKey.toString()
});
}
}.bind(this);
};
handleUploadSession(){
var request = new XMLHttpRequest();
request.open("GET", "/uploadSession");
request.send();
request.onload = function () {
if(request.status === 200){
var redirectAction = JSON.parse(request.responseText);
this.handleUploadImg(redirectAction);
}
}.bind(this);
}
Java:
#RequestMapping(value = {"/uploadSession"}, method = RequestMethod.GET)
protected void GetUploadSession(HttpServletRequest request,
HttpServletResponse response) throws IOException {
BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
String redirectAction = blobstoreService.createUploadUrl("/myView");
String json = new Gson().toJson(redirectAction);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
I'm having troubles instantiating a new file object in javascript.
Here's the general gist of what I'm trying to do. There is client side code that expecting a "file" type object. I need to access the file that's located on the server (game.smc), download it to the local machine and feed it to the client side code.
I did some research and found that creating a new blob object is the first step. But in the code below the blob object remains null and is never getting populated. Does the path in the xhr.open need to have the entire url? Maybe i'm missing an entire concept here not sure.
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/Roms/game.smc");
xhr.responseType = "blob";
xhr.onload = function()
{
blob = xhr.response;
}
xhr.send();
Once I can get the blob object populated I can then do this to convert it to a file object.
function blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
This is what I ended up doing. Shows how to get the blob object as well as convert it to a file type.
function autoLoadGame(fileName) {
var gameLocation = '/Content/Roms/Snes/' + fileName;
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", gameLocation, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
var blob = xhr.response;
var file = new File([blob], fileName, { type: '', lastModified: Date.now() });
snes_readfile(file);
}
}
xhr.responseType = "blob";
xhr.send();
}
I'm making an ajax call to an API that returns binary data. I'm wondering if its possible to take that binary data and display it for the client in a new window? This is what I'm doing right now. The problem is, the document opens up, but its completely blank.
$.ajax({
type: "POST",
url: apiURL,
data: xmlRequest,
complete: function(xhr, status) {
var bb = new window.WebKitBlobBuilder();
// Append the binary data to the blob
bb.append(xhr.responseText);
var blobURL = window.webkitURL.createObjectURL(bb.getBlob('application/pdf'));
window.open(blobURL);
}
});
Any ideas?
Okay, I figured it out. I had to specify the responseType as 'array buffer':
function downloadPDF() {
var xhr = new XMLHttpRequest();
xhr.open('POST', API_URL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var bb = new window.WebKitBlobBuilder();
bb.append(this.response); // Note: not xhr.responseText
var blob = bb.getBlob('application/pdf');
var blobURL = window.webkitURL.createObjectURL(blob);
window.open(blobURL);
}
};
xhr.send(createRequest());
}