tinyMCE editor setting localised path as src of uploaded image - tinymce

I've setup tinyMCE to do image uploading and it displays uploaded images in the editor, but on inspecting the source of the editors HTML I can see that the src attribute is set like it would be a file path:
<img src="../../../api/images/1"/>
I have a file_picker_callback which POSTs the image to my backend server to save the image, and returns an absolute URL in the "location" key as specified in the tinyMCE docs: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url
But I am unsure why regardless of providing an absolute URL the src set on the image begins with "../../../".
The relevant tinyMCE configuration:
tinymce.init({
file_picker_types: 'file image',
file_picker_callback: function(cb, value, meta) {
let tinyMCE = this;
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*,.doc,.docx,.txt,.rtf,.odt,.pdf');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
// Register the blob in TinyMCEs image blob registry.
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinyMCE.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
backend.save(file).then(
fileLocation => {
let options = {};
if (meta.filetype == 'file') {
options = {
title: file.name,
text: 'My Attachment'
};
}
cb(fileLocation, options);
},
(/* error */) => {
blobCache.removeByUri(blobInfo.blobUri());
}
);
};
reader.readAsDataURL(file);
};
input.click();
}
});
I can see that there is an options object I can pass to the callback which sets some element attributes of the image, but I can't find a reference to what this object can contain in the docs :(
Would like some help to solve this and get absolute URLs in my image srcs, thanks

convert_urls: false,
By default all URLs are automatically converted to relative URLs. If you want to insert the real URL of the uploaded image, set convert_urls option to false. It will restore URLs to their original values.

Related

Issue trying to change a loaded PDF in the embed

I'm using the Adobe PDF Embed API and can successfully display a PDF after a user selection. When my app starts up, I initialize a DC View object:
let dcView = new AdobeDC.View({
clientId: ADOBE_KEY,
divId: div
});
And after a user has dragged a file, I use a file reader to to throw a promise at it:
let reader = new FileReader();
let name = this.pdfFile.name;
reader.onloadend = function(e) {
let filePromise = Promise.resolve(e.target.result);
dcView.previewFile({
content: { promise: filePromise },
metaData: { fileName: name }
});
};
reader.readAsArrayBuffer(this.pdfFile);
This works perfectly... once. If I drag a file again, when it gets to the render portion, only the filename on top of the embed changes, not the actual rendered contents.
You'll need to recreate the AdobeDC.View object prior to loading a new document. I'm guessing that this is because there may be unresolved Promises if an operation takes a while to resolve like loading annotations or performing a search. Your new code might look like this...
let reader = new FileReader();
let name = this.pdfFile.name;
reader.onloadend = function(e) {
let filePromise = Promise.resolve(e.target.result);
let dcView = new AdobeDC.View({
clientId: ADOBE_KEY,
divId: div
});
dcView.previewFile({
content: { promise: filePromise },
metaData: { fileName: name }
});
};
reader.readAsArrayBuffer(this.pdfFile);

Hide source input field or change shown url in TinyMCE

Good day all.
I wanna create direct upload of images via tiny.
https://codepen.io/Cere6ellum/pen/qBdRGmx
tinymce.init({
selector: '#editor',
// images_dataimg_filter: function(img) {
// return img.hasAttribute('internal-blob');
// },
plugins: 'image code',
toolbar: 'undo redo | link image | code',
/* enable title field in the Image dialog*/
image_title: false,
image_dimensions: false,
image_description: false,
automatic_uploads: false,
/*here we add custom filepicker only to Image dialog*/
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: function (callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
callback(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
});
How i can hide shown address of added image in the input field (source)?
Or if it's impossible, how i can change this shown (blob:https://) address to something like /images/75bcd4b4-217c-4d8b-91e4-425736223cd1
Or, if it's impossible too, how i can remove input field of source? Can i place only "add image" button in the form?

Image uploaded from Mobile phone to Angular is sideways or upside down

I am able to upload images from my desktop to an Angular based Web Application overlayed on SharePoint without issue, but if I upload from a Mobile phone, such as an iPhone, using the take "Take Photo or Video" or "Photo Library" function, it causes the image to be sideways when taken in portrait or upside down when taken in landscape. Here is my current upload function. Any clues/have others had the same issues uploading to Mobile Web Applications from iPhones/Mobile Phones to a SharePoint library?
Here is my upload function:
// Upload of images
$scope.upload = function () {
//console.log($scope.files);
if (document.getElementById("file").files.length === 0) {
alert('No file was selected');
return;
}
var parts = document.getElementById("file").value.split("\\");
var uploadedfilename = parts[parts.length - 1];
var basefilename = uploadedfilename.split(".")[0];
var fileextension = uploadedfilename.split(".")[1];
var currentdate = new Date();
var formatteddate = $filter('date')(new Date(currentdate), 'MMddyy-hmmssa');
var filename = basefilename + formatteddate + '.' + fileextension;
var file = document.getElementById("file").files[0];
uploadFileSync("/sites/asite", "Images", filename, file);
}
//Upload file synchronously
function uploadFileSync(spWebUrl, library, filename, file)
{
console.log(filename);
var reader = new FileReader();
reader.onloadend = function(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
var buffer = evt.target.result;
var completeUrl = spWebUrl
+ "/_api/web/lists/getByTitle('"+ library +"')"
+ "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?"
+ "#TargetLibrary='"+library+"'&#TargetFileName='"+ filename +"'";
$.ajax({
url: completeUrl,
type: "POST",
data: buffer,
async: false,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-length": buffer.byteLength
},
complete: function (data) {
console.log(data);
},
error: function (err) {
alert('failed');
}
});
}
};
reader.readAsArrayBuffer(file);
}
The output of these is just pushed into an array for use in an Angular UI Carousel:
// Control of Image Carousel
$scope.myInterval = 0;
// Population of carousel
$scope.slides = [];
appImages.query({
$select: 'FileLeafRef,ID,Created,Title,UniqueId',
$filter: 'ReportId eq ' + $routeParams.Id + ' and DisplayinReport eq 1',
}, function (getimageinfo) {
// Data is within an object of "value"
var image = getimageinfo.value;
// Iterate over item and get ID
angular.forEach(image, function (imagevalue, imagekey) {
$scope.slides.push({
image: '/sites/asite/Images/' + imagevalue.FileLeafRef,
});
});
});
The image carousel is on page as follows:
<div style="height: 305px; width: 300px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;height:300px">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
IMPORTANT: The images are sideways and upside down upon upload to the SharePoint library, so irrespective of outputting them, they seem to be misoriented when they hit the destination library I am using as a source to display on page.
How do I upload the images so SharePoint respects the EXIF data/orientation?
It may be related to EXIF. See JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
If you want a better answer, we will need the code which show the image, and the code server side.
UPDATE : I'm not an expert at all on SharePoint, but you can found a lot about it in the SharePoint Stack Exchange. For example, https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library, should do the trick.
To sum up a little : in your case, their could be a lot of cases to study. So, I recommended you auto-correct the exif, and then permit to your user to correct it if the auto-correct was wrong. Their is a lot of tools to do that. If you want to do it server-side, look at the link above, and if you want to do it on the client side, you could use JS-Load-Image for example.

How to show a default preview icon in case if it's not possible to create a thumbnail?

I am setting up Jquery-File-Upload for my website. The script is you can see here:
http://blueimp.github.io/jQuery-File-Upload/‎
This script automatically creates preview thumbnails of image files, however, it allows to select any files (doc, pdf etc). If user selects such a file, the script shows error "File type not allowed" but doesn't show any thumbnail. I want to set up a default thumbnail image for all non-image files.
I modified jquery.fileupload-image.js file:
Original:
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
}
return data;
}
My modification:
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
} else {
data.files[data.index][options.name||'preview']='<img src="/images/default-thumbnail.png">';
}
return data;
}
It works perfectly but the problem is that I will use this script in different sections of my website and thumbnail size always will be different.
So, I need to define default thumbnail in my html file. I tried:
var defaultthumbnail = '<img src="/images/default-thumbnail.png">';
or in options:
defaultthumbnail: '<img src="/images/default-thumbnail.png">'
but it doesn't work. The script doesn't return image and doesn't show any error.
Any ideas?
<script>
$(function () {
var formData = $('#fileupload').serializeArray();
var defaultthumbnail = '<img src="/images/default-thumbnail.png">';
'use strict';
$('#fileupload').fileupload({
url:'//mydomain.com'
});
$('#fileupload').fileupload('option', {
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
autoUpload:false,
maxNumberOfFiles:10,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent)
});
if ($.support.cors) {
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
type: 'HEAD'
}).fail(function () {
$('<div class="alert alert-danger"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
});
</script>
Looks that Jquery-File-Upload project is abandoned...
So if you want to show a default thumbnail for unsupported file types, do the following:
<script>
var defaultthumbnail = '<img src="/images/default-thumbnail.png" />';
$(function () {
var formData = $('#fileupload').serializeArray();
'use strict';
..............
..............
</script>
in jquery.fileupload-image.js file
change
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
}
return data;
}
to
setImage:function(data,options){
if(data.preview&&!options.disabled){
data.files[data.index][options.name||'preview']=data.preview;
} else {
data.files[data.index][options.name||'preview']=defaultthumbnail;
}
return data;
}

How to change tinymce editor font style and size on the fly?

tinymce's FAQ explains how to change the editor's default font style by referencing a custom content_css file.
But I'd like to change the editor's font style on the fly programmatically. Any ideas? Thanks.
This is possible, but requires some knowledge.
You will need to call something like
self.switchStyle(url, ed);
where switchStyle is
// url is the url to the stylesheet file to be added to the editor iframes head
// ed is the editor object or editor id
switchStyle: function(url, ed) {
if (typeof ed != 'object') {
ed = tinymce.get(ed);
}
//replace the custom content_css if set
var url_to_replace = ed.getParam('content_css');
var doc = ed.getDoc();
var $doc = $(doc);
var sheets_urls = [];
if (url_to_replace){
sheets_urls.push(url_to_replace);
}
// remove all stylesheets from sheets_urls
$doc.find('link').each(function() {
if (tinymce.inArray(sheets_urls, $(this).attr('href').split('?')[0]) !== -1) {
$(this).remove();
}
});
var link = doc.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
// setstylesheet
$doc.find('head:first').append(link);
},