I am stuck on sending image via webrtc channel, but I got this error.
Cannot read property 'files' of undefined at SimpleWebRTC
I need help. Thank you in advance.
$("#send-image").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.output #photo').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
webrtc.sendDirectlyToAll('shareImage', '');
}
});
var input = $('#send-image')[0];
if (input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.output #photo').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
Related
I am using TinyMCE 5.7 and it handles uploading images well. However when an image is pasted from the clipboard (ex: Snipping Tool) it gets pasted as data which is not desired. I can use the setting paste_data_images to block pasting data images but I would prefer that it convert the data into an upload request like normal image upload process. Is there a way to intercept the paste and do the upload? I am using both the image and paste plugins. Thanks
Eventually I figured out how to write my own paste function. First, in the TinyMCE config:
setup: function (editor) {
editor.on('paste', function (e) {
var imageBlob = retrieveImageFromClipboardAsBlob(e);
if (!imageBlob) {
return;
}
e.preventDefault();
uploadFile(imageBlob, function (response) {
if ('location' in response) {
if (editor) {
// console.log('upload completed', response);
editor.insertContent('<img src="' + response.location + '" />');
} else {
console.log('Tinymce editor not found!');
}
}
});
});
}
Then the routine to decode the pasted info:
function retrieveImageFromClipboardAsBlob(pasteEvent) {
if (pasteEvent.clipboardData === false) {
return false;
}
var items = pasteEvent.clipboardData.items;
if (items === undefined) {
return false;
}
for (var i = 0; i < items.length; i++) {
// Only paste if image is only choice
if (items[i].type.indexOf("image") === -1) {
return false;
}
// Retrieve image on clipboard as blob
var blob = items[i].getAsFile();
// load image if there is a pasted image
if (blob !== null) {
const reader = new FileReader();
reader.onload = function(e) {
// console.log('result', e.target.result);
};
reader.readAsDataURL(blob);
return blob;
}
}
return false;
}
and a routine to upload the file
function uploadFile(file, callback) {
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (e) {
var percentComplete = (e.loaded / e.total) * 100;
console.log("Uploaded: " + percentComplete + "%");
};
xhr.onload = function () {
if (xhr.status !== 200) {
alert("Error! Upload failed " + xhr.response);
}
if (callback) {
callback(JSON.parse(xhr.response));
}
};
xhr.onerror = function () {
alert("Error! Upload failed. Can not connect to server.");
};
xhr.open("POST", "/upload/tinymce", true);
var data = new FormData();
data.append('file', file);
xhr.send(data);
}
Please can anyone me show how to sending Base64 image into server,I am using Dom to image library.
//My script
import domtoimage from "dom-to-image";
export default {data: function() {return{ post: { image: "" },}
createPost(post) {
var node = document.getElementById("my-node");
domtoimage.toPng(node).then(function(dataUrl) {
var image = new Image();
image.src = dataUrl;
document.body.appendChild(image); }) this.$store.dispatch('createPost', post)},}
//In Action.js
createPost({commit}, post) {axios.post('posts', post).then(res => {commit('CREATE_POST', res.data)})},
imgProfile(event) {
this.image = event.target;
if (this.image.files && this.image.files[0]) {
var reader = new FileReader();
reader.onload = (e) => {
this.imageData = e.target.result;
}
reader.readAsDataURL(this.image.files[0]);
this.SvImage = this.image.files[0];
}
},
I'm trying to use ExcelJS in Vue and I need FileReader to read and parse the files but I'm getting errors. How do I use FileReader with VueJS?
Input Form
<input type="file"
id="importProductionSchedule"
name="importProductionSchedule"
#change="checkFile($event)"
ref="importProductionSchedule"
>
checkFile method
checkFile() {
let reader = new FileReader()
let self = this
reader.onload = (e) => {
let bstr = e.target.result
let wb = XLSX.read(bstr, {type:'binary'})
let wsname = wb.SheetNames[0]
let ws = wb.Sheets[wsname]
let data = XLSX.utils.sheet_to_json(ws, {header:1})
self.form.filedata = data
self.cols = make_cols(ws['!ref'])
}
reader.onerror = (stuff) => {
console.log("error", stuff)
console.log (stuff.getMessage())
}
// reader.readAsArrayBuffer(event)
reader.readAsBinaryString(event.target.files[0])
},
First of all, logging event.target.files[0] in the console would return the file, but I'm testing both event and event.target.files[0] to make sure.
These are my errors:
event = Uncaught Error: cannot read as File: {"isTrusted":true}
event.target.files[0] = Uncaught Error: cannot read as File: {}
you can use below method
createImage(file) {
let reader = new FileReader()
reader.onload = (event) => {
this.product.image = event.target.result
}
reader.readAsDataURL(file)
}
methods:{
uploadImage(event) {
const image = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = (event) => {
this.previewImage = event.target.result;
};
},
}
I need to load a mp3, slice and play it using web audio , on firefox a slice mp3 any where and decode work fine, but on safari an error with null value occurs. Exist a trick or a way do slice the ArrayBuffer on Safari?
player.loadMp3 = function(url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function() {
var mp3slice = request.response.slice(1000,100000);
player.context.decodeAudioData(mp3slice); // context is webkitAudioContext on safari
callback();
};
request.send();
};
I need to create a mp3 player with some especial features:
Time shift the music (like http://codepen.io/eranshapira/pen/mnuoB)
Remove gap between musics ( I got this slicing ArrayBuffers and join then with a Blob but only in safary/IPAD don't work).
Cross platform (IPAD and android. I'm using apache cordova for that).
Solution
player.loadMp3 = function(url, callback) {
console.log("loading " + url);
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function() {
console.log("loaded");
console.log("decoding...");
player.context.decodeAudioData(request.response, function(buffer) {
console.log("decoded");
player.buffer = player.joinAudioBuffers(player.buffer,buffer,2000000);
player.duration += player.buffer.duration;
player.time = minsSecs(player.buffer.duration);
console.log("concatenated");
callback();
});
}, function() {
alert("decode failure");
};
request.send();
};
The code you've shown shouldn't work on any browser. For one thing you need to provide a callback function to decodeAudioData. You also need to slice the decoded data after decoding it, not the raw mp3-encoded data before decoding it. Some browsers might be able to decode a slice of the mp3 file, but it's not expected. Something like this:
player.loadMp3 = function(url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function() {
var mp3slice = request.response.slice(1000,100000);
player.context.decodeAudioData(mp3slice, function(decoded) {
var pcmSlice = decoded.slice(1000, 100000);
callback(pcmSlice);
});
};
request.send();
};
I haven't tested this code.
I would like to learn phantomjs, but i can`t find good tutorial. I have 2 questions:
where is problem in following code (need to capture label of button and write to file):
var page = require('webpage').create();
var fs = require('fs');
page.onConsoleMessage = function(msg) {
phantom.outputEncoding = "utf-8";
console.log(msg);
};
page.open("http://vk.com", function(status) {
if ( status === "success" ) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
page.evaluate(function() {
var str = $("#quick_login_button").text();
f = fs.open("ololo.txt", "w");
f.writeLine(str);
f.close();
console.log("done");
});
phantom.exit();
});
}
});
what tutorial in phantomjs you can advice to me? (not from official site)
Because execution is sandboxed, the web page has no access to the phantom objects.
var page = require('webpage').create();
var fs = require('fs');
page.onConsoleMessage = function(msg) {
phantom.outputEncoding = "utf-8";
console.log(msg);
};
page.open("http://vk.com", function(status) {
if ( status === "success" ) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
var str = page.evaluate(function() {
return $("#quick_login_button").text();
});
f = fs.open("ololo.txt", "w");
f.writeLine(str);
f.close();
console.log("done");
phantom.exit();
});
}
});
PhantomJS comes with a lot of included examples. Take a look here.