Am using the Plupload Uploader , what am trying to implement is after the file is uploaded i wont to convert the file to base64 and send it in a soap envelop , i managed to create an envelop and use my web-service , now my question is how can i get the file as base64 in the uploader.bind 'FileUploaded' :
uploader.bind('FileUploaded', function(up, file) {
}
Best Regards,
This works for me, if using an HTML5 supported browser
UploadFile: function (up, file) {
var reader = new window.FileReader();
reader.readAsDataURL(file.getNative());
reader.onload = function () {
base64data = reader.result;
base64data = base64data.substring(base64data.indexOf(",") + 1);
}
}
Related
I'm working on a REST web application that manages documents between users and uploaders. The backend is written in Java and my Document entity contains, besides various attributes, a byte[] content. I was able to send a file created at server side by
#GET
...
document.setContent(Files.readAllBytes(Paths.get("WEB-INF/testFile.txt")));
return Response.ok(document).build();
and retrieve it at front-end (vueJs) through
async function download(file) {
const fileURL = window.URL.createObjectURL(new Blob([atob(file.content)]));
const fileLink = document.createElement("a");
fileLink.href = fileURL;
fileLink.setAttribute("download",`${file.name}.${file.type}`);
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove;
window.URL.revokeObjectURL(fileURL);
}
the problem is that when I try to upload a file and then download it, its content is not parsed correctly (is shown undefined, string in Base64 or numbers depending on how I try to solve it). The file is sent by a post request and is retrieved through an input form bound to an onFileSelected function.
function onFileSelected(e) {
var reader = new FileReader();
reader.readAsArrayBuffer(e.target.files[0]);
reader.onloadend = (evt) => {
if (evt.target.readyState === FileReader.DONE) {
var arrayBuffer = evt.target.result;
this.file.content = new Uint8Array(arrayBuffer);
//this.file.content = arrayBuffer;
}
};
}
axios.post(...,document,...)
and I have tried using atob and btoa as well before assigning the value to this.file.content. If I print the file on server Welcome.txt it gives B#ae3b74d and if I use Arrays.toString(welcome.getContent()) it gives an array of numbers but as soon as it passed to the frontend its content become in Base64 welcome: { ... content: IFRoaXMgaXMgYSB0ZXN0IGZpbGUhIAo...}. Any idea? Thank you a lot!
I am new to Javascript and am working on a task to compress and then upload an already uploaded image.
I am trying to:
Retrieve the uploaded image,
Compress it
Convert it to a base64 URL
Convert it into a blob
And then into a file and upload it.
But this code just doesn't work.
When I step through it using a debugging tool it does it's job but otherwise it doesn't.
I think the rest of the code after the loadImage function call doesn't really execute.
Please help me make sense of it! Thanks!
function loadImage(formObj2, fldid2, file, callback) {
var oldImage = document.createElement("img");
var psImageOutput = new Image();
var reader = new FileReader();
reader.onload = function(e) {
/* code to compress image */
callback(psImageOutput);
}
reader.readAsDataURL(file);
}
var inputFile = fileQueue[i].file;
var formObj1 = formObject;
var fldid1 = fldid;
loadImage(formObj1, fldid1, inputFile, function(psImageOutput) {
var newImageDataSRC = psImageOutput.src;
/* Manipulate SRC string and create a blob and an image file from it */
formObj1.append(fldid1, newimgfile);
});
Be careful, on the line :
formObj1.append(fldid1, newimgfile);
You seem to append a dom node called newimgfile but in your code this variable doesn't exist.
I am using angular 1.7 with material design for my project. i am using angular material file input for this but it gives me result in file format. what i need is to convert that file format into base64 format. i have tried some external libraries but it doesn't work for me. can anyone post code or make a codepen/jsfiddle.
You can try this solution (this is o copy of this post: How to convert file to base64 in JavaScript? ):
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = /*Your file goes here*/
getBase64(file); // prints the base64 string
I am developing an app which needs to record audio, and then have the audio stored as part of an object, and uploaded to a database.
I am trying to alert the base64 of the file first just to ensure it has been found correctly.
I am using the cordova media capture plugin to access the recorder on a device, and am able to record the audio, however once it has been recorded I want to convert into a base64 format before sending to the database. When I use this method it alerts the base64, but it is empty, just "data:audio/mpeg;base64," with nothing after, I do not know why it isn't converting the file correctly.
Plugin: https://github.com/apache/cordova-plugin-media-capture
function captureSuccess(capturedFiles) {
//Convert capturedFiles[0] into var containing file as base64
previewFile(capturedFiles);
alert("Audio Captured");
}
function captureError() {
alert("Audio Not Captured");
}
navigator.device.capture.captureAudio(captureSuccess, captureError, {
limit: 1,
duration: 20
});
});
/***********************************************************************************/
function previewFile(files) {
var preview = document.querySelector('img');
var file = files[0];
var reader = new FileReader();
reader.onload = function () {
alert(reader.result);
};
if (file) {
reader.readAsDataURL(file);
}
}
I was having alot of issues to this, and had looked all over StackOverFlow for an answer but had alot of trouble finding one, so for anyone in the future who has this issue I was able to solve it. The issue was that the file I wanted to convert to base64 had a "start" and an "end" which were both set the 0, so none of the bytes were being accessed. To ensure the bytes are accessed I keep the start byte as 0 (so don't change anything), and set the end byte to the same as the file size. Here is the resolved code below:
$("#btnAudio").click(function () {
function captureSuccess(capturedFiles) {
var path = capturedFiles[0].fullPath;
//Convert capturedFiles[0] into var containing file as base64
previewFile(capturedFiles);
alert("Audio Captured");
}
function captureError() {
alert("Audio Not Captured");
}
navigator.device.capture.captureAudio(captureSuccess, captureError, {
limit: 1,
duration: 20
});
});
/***********************************************************************************/
function previewFile(files) {
var file = files[0];
var reader = new FileReader();
file.end = file.size;
var preview = document.querySelector('audio');
reader.onload = function () {
/*For testing I am just alerting reader.result, but if you want to store the
base64 just create a var and set its value to reader.result*/
alert(reader.result);
};
if (file) {
reader.readAsDataURL(file);
}
}
Here i want to get the Data from Excel File by using upload file control.My Snippet is
window.onload = function () {
var fileInput = document.getElementById('fup1');
var fileDisplayArea = document.getElementById('txt1');
fileInput.addEventListener('change', function (e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function (e) {
txt1.innerText = reader.result;
}
reader.readAsText(file);
});
}
when i run this code i get the data in below format
PK!q9+p��[Content_Types].xml ��(�̔MN�0��H�!�%n��j�?K��ؓƪc[���g��
P�T��DQ4���f��|[�d��9g#���Ni�����Cz���*a�����|v~6}�y���-欌��p���J`�
how can i resolve this please help me
First of all you have to understand what you are doing. You are taking a exel file( which is not in a txt format) converting it into fileStream( buffer of bytes) finally you are converting it into txt file( which was a exel file). So what do you expect the result.
Now try Solving this problem using two popular JavaScript libraries:
1. xls
2. xlsx
Which allow you to parse in pure JavaScript.
For Documentation of these two libraries you can refer to following link.
Documentation