We Keep Coding

CKEditor Drag Image just reloads the editor with no image in it

I'm trying to use the upload image plugin of ckeditor (4.7 version) without any luck. The image gets uploaded alright, but after upload finishes the editor flashes and apparently reloads with no image in it.
Server side code is like this:
try
{
HttpPostedFileBase uploads = HttpContext.Request.Files["upload"];
string file = uploads.FileName;
string ruta = Server.MapPath("~/App_Data/" + file);
uploads.SaveAs(ruta);
var exito = new
{
uploaded = 1,
fileName = file,
url = HttpUtility.UrlEncode("http://localhost:7742/App_Data/" + file),
};
return Json(exito, JsonRequestBehavior.AllowGet);
}
And the editor is configured like this:
<script type="text/javascript">
CKEDITOR.config.language = 'es';
CKEDITOR.config.extraPlugins = 'uploadimage';
CKEDITOR.config.imageUploadUrl = '/Home/UploadImages';
CKEDITOR.replace("editorNosotros");
</script>
I know I'm not providing many details but I'm following ckeditor's documentation (here) and I'm not finding any information about this behavior (most of what I've googled refers to previous versions of ckeditor).
I also tried changing the url to just /App_Data/" + file but nothing seems to work. I'm not sure if the editor is actually reloading or what's actually happening.
Ok, thanks to HMR comments things are getting interesting. I added the following code because anything else returned a 404 error as the path to the image was incorrect:
Uri baseUri = new Uri("http://localhost:7742");
Uri myUri = new Uri(baseUri, "App_Data/" + file);
var exito = new
{
uploaded = 1,
fileName = file,
url = myUri.PathAndQuery
};
I also had to add a configuration in the web config:
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="App_Data" />
</hiddenSegments>
</requestFiltering>
</security>
Now all the requests for the image return Ok, but I cannot see the json response of my controller action and still the editor reloads with no image in it.
Any comment will be greatly appreciated.

Convert HEIC to JPG , using php or JS

Anyone tried to convert a heic to jpg?
I looked at the official repository, but I did'nt understand how it works.
All examples in the repository are working. But when I try to process my photo, made on the iphone, the script refuses to process it.

I've had some luck recently with the conversion using libheif. So I made this library which should greatly simplify the whole process
https://github.com/alexcorvi/heic2any
The only caveat is that the resulting PNG/JPG doesn't retain any of the meta-data that were in the original HEIC.

I managed to convert heic to jpg with the help of heic2any js library (https://github.com/alexcorvi/heic2any/blob/master/docs/getting-started.md)
I converted the picture on client side, then gave it to the input in client side.
Server is seeing it as it was originally uploaded as jpg.
function convertHeicToJpg(input)
{
var fileName = $(input).val();
var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
if(fileNameExt == "heic") {
var blob = $(input)[0].files[0]; //ev.target.files[0];
heic2any({
blob: blob,
toType: "image/jpg",
})
.then(function (resultBlob) {
var url = URL.createObjectURL(resultBlob);
$(input).parent().find(".upload-file").css("background-image", "url("+url+")"); //previewing the uploaded picture
//adding converted picture to the original <input type="file">
let fileInputElement = $(input)[0];
let container = new DataTransfer();
let file = new File([resultBlob], "heic"+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
container.items.add(file);
fileInputElement.files = container.files;
console.log("added");
})
.catch(function (x) {
console.log(x.code);
console.log(x.message);
});
}
}
$("#input").change(function() {
convertHeicToJpg(this);
});
What I am doing is converting the heic picture to jpg, then previewing it.
After that I add it to the original input. Server side will consider it as an uploaded jpg.
Some delay can appear while converting, therefore I placed a loader gif while uploading.

extension crash on exporting stringified/encodeURIComponent data to file

It is about exporting extension data from options page.
I have array of objects, with stored page screenshots encoded in base64, and some other minor obj properties. I'm trying to export them with this code:
exp.onclick = expData;
function expData() {
chrome.storage.local.get('extData', function (result) {
var dataToSave = result.extData;
var strSt = JSON.stringify(dataToSave);
downloadFn('extData.txt', strSt);
});
}
function downloadFn(filename, text) {
var fLink = document.createElement('a');
fLink .setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
fLink .setAttribute('download', filename);
fLink .click();
}
On button click, get data from storage, stringify it, create fake link, set attributes and click it.
Code works fine if resulting file is under ~1.7 MB, but everything above that produce option page to crash and extension gets disabled.
I can console.log(strSt) after JSON.stringify and everything works fine no matter of the size, if I don't pass it to download function..
Is there anything I can do to fix the code and avoid crash?...or is there any limitation is size when using this methods?

I solved this, as Xan suggested, switching to chrome.downloads (it's extra permission, but works fine)
What I did is just replacing code in downloadFN function, it's cleaner that way
function downloadFn(filename, text) {
var eucTxt = encodeURIComponent(text);
chrome.downloads.download({'url': 'data:text/plain;charset=utf-8,'+eucTxt, 'saveAs': false, 'filename': filename});
}
note that using URL.createObjectURL(new Blob([ text ])) also produce same crashing of extension
EDIT:
as #dandavis pointed (and RobW confirmed), converting to Blob also works
(I had messed code that was producing crash)
This is a better way of saving data locally, because on browser internal downloads page, dataURL downloads can clutter page and if file is too big (long URL), it crashes browser. They are presented as actual URLs (which is raw saved data) while blob downloads are only with id
function downloadFn(filename, text) {
var vLink = document.createElement('a'),
vBlob = new Blob([text], {type: "octet/stream"}),
vUrl = window.URL.createObjectURL(vBlob);
vLink.setAttribute('href', vUrl);
vLink.setAttribute('download', filename);
vLink.click();
}

How to decode base64 to image file in Node.js?

I know this question is asked several times, but unfortunately nothing seems to work for me.
I post the src of an img to my node/express. It looks like this:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA+Q1JF ... UUUUAFFFFAH/2Q==
The data is saved in picture. I cut of the data:image-stuff and got the raw base64 and the filetype.
var result = {
"type":"",
"data":""
}
var matches = picture.match(/^data:image\/([A-Za-z-+\/]+);base64,(.+)$/),response = {};
result.type = matches[1];
result.data = new Buffer(matches[2], 'base64');
require('fs').writeFile(mediaFolder+'/test.'+result.type, result.data, "binary", function(err){
res.status(500).send("error");
});
res.status(200).send("success");
When I try to open the saved image it says: Damaged or too big. I also tried to set the "binary" parameter in the writeFile methode. The client always gets the 200 http status.
I don't know what's wrong with this. I checked the raw base64 String with an online decoder. It worked perfectly.
I logged every string/match and everything looked okay to me.
Any help would be nice to solve this Problem.
Thanks in advance!
EDIT:
This is how I send the picture:
var base64Image = $('#show-picture').attr('src');
xmlhttp.open("POST","/webapp-ajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("picture="+base64Image);

I believe you need to use encodeUriComponent(base64) before sending to server.
try sending a JSON object, and parsing the image on the client side.
For example:
var mimeType = image.split(';')[0];
var base64 = encodeUriComponent(image.split(',')[1]);
var imageData = {
"mimeType" : mimeType,
"src" : base64
}
...
xmlhttp.setRequestHeader("Content-type","application/json");
xmlhttp.send(imageData);

Ajax in .NET doesn't want to to load images as it should

Every way I try to obtain what I want with .NET and MSIE 8 desperately fails: Since I coulnd't manage to preload images with "GET", i decided to get them in base64: They came to the client side all right, but there I discovered MSIE8 can't manage base64 over 32Kb, so I'm down again.
So I came back to the classic method I found several times on the web, and there it goes:
var img = new Image();
var ajax = new ActiveXObject('Microsoft.XMLHTTP');
ajax.open("GET", url, false)
ajax.send(null);
var res = ajax.status;
if (res == 200) // succès
{
// this program crashes on next line as soon as 'url' points a jpg file
var tx = rajax.responseText;
// this program crashes on previous line except if 'url' points a text file
img.src = tx;
}
So what can I do to be able to load my image this way ? thanks for your help.

You're misunderstanding the src property.
src takes a URL, not an actual image.
You don't need any AJAX.