Develop Reference

Sending file to server from a HTML input file

I have a web page where I upload file from an input type file HTML element.
Then I need to send that file by Url with Ajax to a Java server to a REST web service where it will be processed.
I tried FileReader().readAsDataURL function in javascript, file is encoded in base64 then sent to server by url. But when I try to decode it in Java, it fails.
How can I achieve this ?
My code client-side :
var file = document.getElementById('add_attach').files[0];
var filename = document.getElementById('add_attach').value;
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var name = encodeURIComponent(filename);
var file_content = e.target.result;
//Ajax request to server with sending file_content
};
}
My code server-side :
file_content = file_content.substring(file_content.indexOf("base64"));
file_content = file_content.replace("base64,", "");
byte[] decodedBytes = Base64.getDecoder().decode(file_content);
The errror I get :
java.lang.IllegalArgumentException: Illegal base64 character 20

How to create and upload a video to parse server?

I am able to upload image file to S3 using parse server. (by creating parse file from base64 image data and doing save() on parse file)
How can I do the same thing for a video file? I am doing this using parse-server js library in Ionic 2 app with typescript. The below code worked for images.
let file = new Parse.File("thumbnail", { base64: imageData });
file.save().then(() => {
// The file has been saved to Parse.
console.log("File uploaded....");
}, (error) => {
// The file either could not be read, or could not be saved to Parse.
console.log("File upload failed.");
});
In case of a video file, I have the file location received from cordova media capture callback. Help me in uploading the video file.
Thank you

here is my solution after days of research.
it works for iphone.
the important statement is this:
data=data.replace("quicktime","mov");
var options = { limit: 1, duration: 30 };
navigator.device.capture.captureVideo(function(files){
// Success! Audio data is here
console.log("video file ready");
var vFile = files[0];
console.log(vFile.fullPath);
///private/var/mobile/Containers/Data/Application/7A0069EB-F864-438F-A685-A0DAE97F8B2D/tmp/capture-T0x144510b50.tmp.GfXOow/capturedvideo.MOV
self.auctionvideo = vFile.fullPath; //localURL;
console.log(self.auctionvideo);
var fileReader = new FileReader();
var file;
fileReader.onload = function (readerEvt) {
var data = fileReader.result;
data=data.replace("quicktime","mov");
console.log(data);
//data:video/quicktime;base64,AAAAFGZ0
console.log(data.length);
self.auctionvideo=data;
self.videofile = {base64:data};
};
//fileReader.reasAsDataURL(audioFile); //This will result in your problem.
file = new window.File(vFile.name, vFile.localURL,
vFile.type, vFile.lastModifiedDate, vFile.size);
fileReader.readAsDataURL(file); //This will result in the solution.
// fileReader.readAsBinaryString(file); //This will result in the solution.
},
function(error){
},
options);

Import xlsx file into html page via javascript

I want to read the data of a specific xlsx file into javascript to show them on a .html page.
For that i downloaded sheetjs. A .xlsx parser.
But now I realized that you kinda must choose a file in the html site to read it. But I only want to use one file the whole time. Also the html site will only run local. So is there any way to get going with setting up a absolute path in the js to the file. So something like
file= "C:\test.xlsx"
Code example from the documemtary:
function handleFile(e) {
var files = e.target.files;
var i,f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsBinaryString(f);
}
}
input_dom_element.addEventListener('change', handleFile, false);

Decode Base 64 audio file Mp3 into playable Mp3

I am converting the audio MP3 file and storing it as base64 in database using WEB API, now I am fetching the base64 file using ajax and I am getting the base64, the problem is how can I convert the base64 file back to mp3 file and play it using JavaScript.
This if for demo I am using input file, I am getting base64 file from server
<input type='file' onchange='openFile(event)' id="EdituserProfileImage">
var fileName;
var filetype;
var filesize;
var VoiceBase64;
var openFile = function (event) {
var input = event.target;
fileName = input.files[0].name;
filetype = input.files[0].type;
filesize = input.files[0].size;
console.log(input);
console.log(fileName);
var reader = new FileReader();
reader.onload = function (evt) {
var voiceInBinay = evt.target.result;
VoiceBase64 = btoa(voiceInBinay);
contvertBase64toBinaray(VoiceBase64);
};
reader.readAsBinaryString(input.files[0]);
};
This function "contvertBase64toBinaray" using for converting base64 to Binary, I have binary file, need to save as mp3 from this below binary
function contvertBase64toBinaray(VoiceBase64) {
var audiofile = atob(VoiceBase64)
};

Use window.atob function to decode your base 64 data.
This question shows you how you can play the mp3 in JS.

How to checksum the file to be uploaded with javascript?

I want to checksum the files at browser side before uploading, then checksum and compare at server side to make sure the consistent. But how can I get the pure binary data of the file and checksum it? I tried the way below, but doesn't work:
let fileSelect = document.getElementById('file')
let files = fileSelect.files
let file = files[0]
var r = new FileReader();
r.onload = function(){ console.log(r.result); };
r.readAsArrayBuffer(file);
var file_sha1 = sha1(r.result)

The library you are using seems to support string input only.
Find a library support binary input. Eg. js-sha1. And you should hash it in the callback.
var reader = new FileReader();
reader.onload = function (event) {
var file_sha1 = sha1(event.target.result)
};
reader.readAsArrayBuffer(file);