I am trying to upload files in JSON using angular and FileReader Api.
The problem is that for files larger than 600 - 700 KB my browser crashes.
As far as I can see the problem occurs when requesting against a resource and not when the file reader reads the file and encode that in base64
Any ideas?
Here is the code:
function readFiles(files) {
var reader = new FileReader();
var data = [];
function readFile(index) {
if (index >= files.length) {
UploadFilesResource.create(JSON.stringify(data), function (successData) {
scope.attachments = successData.data;
scope.showUploadForm = false;
}, function (errorData) {
MessageSrv.setErrorMessage(errorData.error_message)
});
return;
}
var file = files[index];
reader.onload = function(e) {
data.push(prepareFile(file, e.target.result));
readFile(index + 1)
};
reader.readAsDataURL(file);
}
readFile(0);
}
And here is the Resource Code:
crmApp.lazy.factory('UploadFilesResource',
['CrmAppResource', 'CrmAppConfiguration',
function ($resource, CrmAppConfiguration) {
return $resource(
CrmAppConfiguration.apiUrl + 'upload/files/:id',{id:'#id'}
);
}
]);
Thank you #Jeremy and #Jonas
That worked! The problem was JSON.stringify
So I removed that and now everything is OK with the browser!
Related
I'm using SixLabors.ImageSharp to crop images with Javascript JQuery and all is working rigth but when i need to get the image cropped i don't know how can i get the image without refresh the page and without do a POST.
I'm using Tutexchange tutorial and they obtain the image by a POST method (and i dont wanna do it like that) i think about run a method and with Blazor get the file encoded base64 but when i do it i cant get the reader.result because is inside the onloadend event.
How can i get a image blob without a POST method and without save the image in a folder to read with Blazor?
I tried passing the onloadend reader.result with a method and await with a bucle while to return it when is done but value never is different than null and i tested if the cropper work with a console.log() and all is right with it:
function InitializeCroppie(div_width, div_height) {
basic = $('#main-cropper').croppie
({
enableExif: true,
url: '/images/ChooseImage.png',
viewport: { width: div_width, height: div_height },
boundary: { width: div_width, height: div_height },
showZoomer: false,
format: 'png' //'jpeg'|'png'|'webp'
});
//Reading the contents of the specified Blob or File
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#main-cropper').croppie('bind', {
url: e.target.result
});
}
reader.readAsDataURL(input.files[0]);
}
}
// Change Event to Read file content from File input
$('#select').on('change', function () { readFile(this); });
}
var returnThisValue;
async function GetImageCroped() {
returnThisValue = null;
var blob = await basic.croppie('result', 'blob');
var reader = new FileReader();
if (blob != null) {
reader.readAsDataURL(blob);
reader.onloadend = function () {
SetValue(reader.result);
console.log(reader.result);
}
}
while (returnThisValue == null) {
//Waiting...
}
return returnThisValue;
}
function SetValue(value) {
returnThisValue = value;
}
function GetImageValue() {
return returnThisValue;
}
If is impossible without a POST method how can i receive it without reload the page.
EDIT:
I'm doing some test to know if is possible that js let blazor know when put the image in the localStorage to get it synchronic way with Blazor.
AFTER TEST: I tried to get the image with Blazored.LocalStorage and i cannot Chrome has a problem with "big data".
You can add a JavaScript listener event. It will trigger another event when updating the localstorage. It should be loaded when the page is initialized.
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function (key, newValue) {
var setItemEvent = new Event("setItemEvent");
setItemEvent.key = key;
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this, arguments);
};
window.addEventListener("setItemEvent", function (e) {
if (e.key == 'image') {
var _this = localStorage.getItem("image")
if (_this != e.newValue) {
console.log(e.newValue)
//call method which sends this blob
} else {
console.log('key->');
console.log(e.newValue)
}
}
});
Trigger method.
$('#btnupload').on('click', function ()
{
basic.croppie('result', 'blob').then(function (blob)
{
localStorage.setItem('image', blob)
//...
});
});
I'm using Trix, and for uploading attachments our backend developer tells me that I should convert the attachment to base64 and save the base64 data to the database instead of uploading the binary file.
I wrote this code for implementing it, and the output of the input field(HTML) is working as expected, but the image preview doesn't show in the editor.
$(function() {
$(document).on('trix-attachment-add', function(event) {
var attachment = event.originalEvent.attachment;
// Convert data URLs to File objects.
if(attachment.file) {
return uploadAttachment(attachment);
} else {
console.error('Could not upload attachment.');
console.error(attachment);
attachment.remove();
}
});
});
function uploadAttachment(attachment) {
var reader = new FileReader();
console.log(attachment)
// Set the reader to insert images when they are loaded.
reader.onload = function (e) {
var result = e.target.result;
var attrs = {
src : result,
url: result,
href : ''
};
attachment.setAttributes(attrs)
attachment.setUploadProgress(100);
}
// Read image as base64.
reader.readAsDataURL(attachment.file);
}
I don't know what causes this problem.
Try replacing
$(document).on('trix-attachment-add', function(event) {
with
document.addEventListener("trix-attachment-add", function(event) {
This could be event listeners being cached thus firing multiple times. The first load of image works, it could be the next loads that make this look busted.
Could also be Turbolinks issue so wrap your code with this instead:
$(document).on('turbolinks:load', function() {
I've managed to solve the issue by setting the fileObjectURL property as shown below
attachment.attachment.fileObjectURL = result;
Complete code for latest version (works with Symfony 6 easy admin bundle):
(function() {
function asBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
document.addEventListener("trix-file-accept", function(event) {
event.preventDefault();
if (event.file) {
asBase64(event.file).then(function(data) {
let image = document.createElement('img');
image.src = data;
let tmp = document.createElement('div');
tmp.appendChild(image);
let editor = document.querySelector('trix-editor');
editor.editor.insertHTML(tmp.innerHTML);
}).catch(e => console.log(e));
}
}); })();
I've created a simple web app using .NET (With Entity Framework) and AngularJS to retrieve PDF files. I'm able to have the app work perfectly on Desktop browsers and iOS browsers. Unfortunately I'm having issues with getting this to work on any Android browser.
Inside my controller is a function triggered by ng-click on a simple button that requests and displays the pdf. I was able to use the solution here to get the PDF's working correctly on iOS and Edge browsers.
appModule.controller("cellController", ['$scope','$http','$routeParams','$window','$sce', function ($scope, $http, $routeParams,$window,$sce) {
....
$scope.getLayout = function () {
var attachmentPromise = $http.get("/api/pdf" + $routeParams.ID, { responseType: 'blob' }).then(function (result) {
var file = new Blob([result.data], { type: 'application/pdf' });
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(file, "Layout.pdf");
}
else if (window.navigator.userAgent.match('CriOS')) {
var reader = new FileReader();
reader.onloadend = function () { $window.open(reader.result); };
reader.readAsDataURL(file);
}
else if (window.navigator.userAgent.match(/iPad/i) || window.navigator.userAgent.match(/iPhone/i)) {
var url = $window.URL.createObjectURL(file);
window.location.href = url;
}
else {
var url = window.URL || window.webkitURL;
window.open(url.createObjectURL(file));
}
});
};
}]);
As mentioned above the above code works well on desktop and iOS, but will either open a blank blob page on Android or fail to download the file on Android.
Any suggestions on this would be greatly appreciated :).
Let me know if I can provide any additional information
I was unable to get it to work as needed. As a work around, in the event the user is using an Android device I just download the document to local storage by opening a window to the file address. I hope this is something that is addressed in the future.
var attachmentPromise = $http.get("/api/" + $routeParams.ID, { responseType: 'blob' }).then(function (result) {
var file = new Blob([result.data], { type: 'application/pdf' });
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(file, "Layout.pdf");
}
else if (window.navigator.userAgent.match(/Chrome/i) && window.navigator.userAgent.match(/Mobile/i)) {
window.open("/api/" + $routeParams.ID)
}
else if (window.navigator.userAgent.match('CriOS')) {
var reader = new FileReader();
reader.onloadend = function () { $window.open(reader.result); };
reader.readAsDataURL(file);
}
else if (window.navigator.userAgent.match(/iPad/i) || window.navigator.userAgent.match(/iPhone/i)) {
var url = $window.URL.createObjectURL(file);
window.location.href = url;
}
else {
var url = window.URL || window.webkitURL;
window.open(url.createObjectURL(file));
}
})
This is my function:
FileCropped.prototype.change = function () {
var obj = $(this).data("plugin.file-cropped");
var files = obj.$element[0].files;
var file;
var URL = window.URL || window.webkitURL;
var blobURL;
if (files && files.length) {
file = files[0];
console.log("I have files");
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
obj.$element.val('');
obj.$hidden[0].value = blobURL;
//URL.revokeObjectURL(blobURL);
} else {
window.alert('Please choose an image file.');
}
} else
{
console.log("No files?");
}
}
I am trying right now to attach the blob to an existing form input but it does not work. With the chrome debugger I see the method works fine and follow the expected path, but at the time of submit the server gets nothing.
Any hint?
Edit: of course the function has no value right now. I could just use the normal file input. The goal is to be able to manipulate the blob before attaching it to the form.
You can use FileReader to read the file as data URL
var fileReader = new FileReader();
fileReader.addEventListener('load', function () {
blobURL = fileReader.result;
obj.$hidden[0].value = blobURL;
});
fileReader.readAsDataURL(file);
In one of my web application I have to show the image which selected for uploading before it uploaded to the server , using javascript .
I had this code ... It is working pretty well and fine in Mozilla . But not in Safari or Chrome .. Please help
// Handle file while select a new file
$('#file').change(function(){
$('#img_size').val((this.files[0].size)/1000000);
handleFiles(this.files);
});
// handle files
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById('fake_img');
img.src = file;
img.onload = function() {
};
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
This code is working fine in chrome
http://jsfiddle.net/PrNWY/13/
Its shows the selected image in chrome & FF.
update
you can check file reader capability with following code
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
alert('The File APIs are fully supported in this browser.');
} else {
alert('The File APIs are not fully supported in this browser.');
}
In my safari it failed because of it is not supporting file API fully.