Send image to server side by javascript - javascript

I wrote a code in javascript to paste screenshot in radeditor and now i want to store that image to database some how, so i guess i must send it to server side, but i don't know how.
Is there any way to see that image in server side?
And this is the code of pasting screenshot in radeditor:
<script type="text/javascript">
window.addEventListener('load', function(e) {
var editor = $find("<%=edtText.ClientID%>")
editor.get_document().body.onpaste = function(e) {
var items = e.clipboardData.items;
for (var i = 0; i < items.length; ++i) {
if (items[i].kind == 'file' &&
items[i].type.indexOf('image/') !== -1) {
var blob = items[i].getAsFile();
window.URL = window.URL || window.webkitURL;
var blobUrl = window.URL.createObjectURL(blob);
var editor = $find("<%=edtText.ClientID%>");
var imageSrc = "<img src='" + blobUrl + "'>";
editor.pasteHtml(imageSrc);
}
}
}
});
</script>

Related

How to fix string saving as code to word?

I have the following code:
function downloadNotes() {
var information = document.getElementById("text").innerHTML;
var textToBLOB = new Blob([information], { type: 'text/plain' });
var sFileName = 'formData = document.doc';
var newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
When I save my notes, it successfully saves it to word, but when I open it, it shows the code all compressed rather than the string output:
Here.
Change this line:
var information = document.getElementById("text").innerHTML;
To this:
var information = document.getElementById("text").innerText;
Your code was reading the HTML content of the element instead of the Text value of the element. If this doesn't work you may need to code it to cut out the HTML.

How to pass different types of data on ajax send() function to PHP?

I am trying to send a file(pdf file) as well as user text input using ajax using vanilla javascript please dont post any jquery answers.
formData contains the pdf file and formVal contains the user text input.
If I remove formVal from the request.send function then the file is uploaded but if I include formVal the send function does not work as nothing gets uploaded.
var formData = new FormData();
var dropzone = document.getElementById('dropzone');
var sub = document.getElementById('subForm');
var uploadFile = function (formVal) {
var request = new XMLHttpRequest();
request.onload = function(){
var data = this.responseText;
console.log(data);
//window.location.reload();
}
request.open('post', 'index.php');
request.send(formData, formVal);
}
dropzone.ondrop = function (event) {
event.preventDefault();
document.getElementById('para1').innerHTML = "File uploaded";
var files = event.dataTransfer.files;
//uploadFile(event.dataTransfer.files,);
var i;
for(i = 0; i<files.length; i = i+1){
formData.append('file[]', files[i]);
}
return false;
}
sub.onclick = function () {
var code = document.getElementById('cCode').value;
var size = document.getElementById('cSize').value;
var dd = document.getElementById('cDD').value;
var val = "c=" +code+"&s="+size+"&d="+dd;
if(formData.get('file[]') === null){
alert("Drang and drop PDF file");
}else{
uploadFile(val);
}
}

Javascript filereader onload ( get file from server )

What I want is to read a file from the windows file system or a server so I can display the contents on the website and we are not allowed to use a database or PHP only Javascript.
What I currently have is beneath this and it works if I get the file from a html file upload box the only thing I need is how do I get a file in the javascript without inserting it manually but to load on pageload.
The rest of the code works if I insert the file manually I only need to get a file and insert it into var file = ;
var file = // How do I get file from windows system / or server is also a possibility
var reader = new FileReader();
reader.onload = function(progressEvent){
// Entire file
console.log(this.result);
// By lines
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; line++){
console.log(lines[line]);
}
};
reader.readAsText(file);
I got it to work
var file = readTextFile("test.txt");
var allText;
var trumpCount = 0;
var hilaryCount = 0;
var reader = new FileReader();
// Entire file
console.log(this.result);
// alert(allText);
// By lines
var lines = allText.split('\n');
for(var line = 0; line < lines.length; line++){
// alert(lines[line]);
if (lines[line].indexOf("t") !== -1){
trumpCount++;
}else{
hilaryCount++;
}
}
alert("Votes for trump: " + trumpCount + " Votes for hilary: " + hilaryCount + " Total votes: " + (trumpCount + hilaryCount))
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
allText = rawFile.responseText;
//alert(allText);
}
}
}
rawFile.send(null);
}

remove blank lines when uploading csv files angular

I got a csv-reader directive and let's user upload a csv file. I noticed that when I upload a file with spaces between words for example:
abc
abc
abc
abc
abc
this gets shown. I want to delete all the blank lines Not sure what to do.
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
var rows = contents.split('\n');
// Check if the last row is empty. This works
if(rows[rows.length-1] ===''){
rows.pop()
}
}
// this doesn't work for some reason. It doesn't detect the '' in the middle of the arrays.
for( var i=rows.length-1;i>0;i--){
if(rows[i] === ''){
rows.splice(i,1)
}
}
Try using Array.prototype.filter()
var rows = contents.split('\n').filter(function(str){
return str;
});
From what you have shown it looks like you want to check if each item in the csvModel is an empty string, rather than newValue
Something like:
for( var i=0 ;i< $scope.csvModel.length; i++){
if (csvModel[i] == "") {
$scope.csvModel.splice(i,1);
}
}
var text = [];
var target = $event.target || $event.srcElement;
var files = target.files;
if(Constants.validateHeaderAndRecordLengthFlag){
if(!this._fileUtil.isCSVFile(files[0])){
alert("Please import valid .csv file.");
this.fileReset();
}
}
var input = $event.target;
var reader = new FileReader();
reader.readAsText(input.files[0], 'UTF-8');
reader.onload = (data) => {
let csvData = reader.result;
let csvRecordsArray = csvData.split(/\r\n|\n/);
if (csvRecordsArray[csvRecordsArray.length - 1] === '') {
csvRecordsArray.pop();
}
var headerLength = -1;
if(Constants.isHeaderPresentFlag){
let headersRow = this._fileUtil.getHeaderArray(csvRecordsArray, Constants.tokenDelimeter);
headerLength = headersRow.length;
}
this.csvRecords = this._fileUtil.getDataRecordsArrayFromCSVFile(csvRecordsArray,
headerLength, Constants.validateHeaderAndRecordLengthFlag, Constants.tokenDelimeter);
if(this.csvRecords===null){
this.csvRecords=[];
}
else if(this.csvRecords!==null) {
if ((JSON.stringify(this.csvRecords[0])) === (JSON.stringify(this.csvFormate))) {
alert("format matches");
this.displayCsvContent = true;
for (let i = 0; i < this.csvRecords.length; i++) {
if (i !== 0) {
this.csvRecords[i].push(this.recordInsertedFlag);
}
}
}
else {
alert("format not matches");
}
}
if(this.csvRecords == null){
this.displayCsvContent=false;
//If control reached here it means csv file contains error, reset file.
this.fileReset();
}
};
reader.onerror = function () {
alert('Unable to read ' + input.files[0]);
};

how can I get the cover of an mp3 file?

I have an mp3 file and when I read it with windows media player, it has the cover of the album, so I'm wondering if there's a way to get that cover in javascript or jQuery
Read more at this URL: http://www.richardfarrar.com/embedding-album-art-in-mp3-files/
What you want is to use the ID3 header, where the arists data and more is stored. Also images can be stored in these headers. Probably this is also done in the mp3 files you have.
A library like https://github.com/aadsm/JavaScript-ID3-Reader can read this data out of the MP3 with Javascript.
Borrowed from the example (Note: you need the library above before this code will work):
function showTags(url) {
var tags = ID3.getAllTags(url);
console.log(tags);
document.getElementById('title').textContent = tags.title || "";
document.getElementById('artist').textContent = tags.artist || "";
document.getElementById('album').textContent = tags.album || "";
var image = tags.picture;
if (image) {
var base64String = "";
for (var i = 0; i < image.data.length; i++) {
base64String += String.fromCharCode(image.data[i]);
}
var base64 = "data:" + image.format + ";base64," +
window.btoa(base64String);
document.getElementById('picture').setAttribute('src',base64);
} else {
document.getElementById('picture').style.display = "none";
}
}
ID3 is no longer being maintained. Check here.
var jsmediatags = require("jsmediatags");
jsmediatags.read("./song.mp3", {
onSuccess: function(tag) {
console.log(tag);
var image = tag.tags.picture;
document.getElementById('title').innerHTML = tag.tags.title;
document.getElementById('artist').innerHTML= tag.tags.artist;
document.getElementById('album').innerHTML = tag.tags.album;
document.getElementById('picture').title = tag.tags.title;
if (image) {
var base64String = "";
for (var i = 0; i < image.data.length; i++) {
base64String += String.fromCharCode(image.data[i]);
}
var base64 = "data:" + image.format + ";base64," +
window.btoa(base64String);
document.getElementById('picture').setAttribute('src',base64);
} else {
document.getElementById('picture').style.display = "none";
document.getElementById('picture').title = "none";
}
},
onError: function(error) {
console.log(':(', error.type, error.info);
}
});

Categories

Resources