I am trying to use ckfinder and I am getting error - ckeditor

I am using var ckEditorCdn: string ="//cdn.ckeditor.com/4.19.1/full-all/ckeditor.js";
SPComponentLoader.loadScript(ckEditorCdn, {
globalExportsName: "CKEDITOR",
}).then((CKEDITOR: any): void => {
if (this.properties.inline == null || this.properties.inline === false) {
var editor = CKEDITOR.replace(this.guid + "-editor",
{
scayt_autoStartup: true,
skin: "moono-lisa,//cdn.ckeditor.com/4.19.1/full-all/skins/moono-lisa/",
height: '500px',
filebrowserBrowseUrl:'/ckfinder/ckfinder.html',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?type=Flash',
filebrowserImageUploadUrl:'/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl:'/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth: '1000',
filebrowserWindowHeight: '700'
});
}
I am not able to copy paste image directly into page, i am getting error as:
image
If I click on image option -> click on upload -> choose an image from local folder -> click on send it to server -> getting same error as HTTP error occurred while file upload(404 : file not found).
Can anyone tell me what mistake I am doing here.
I found a way around, i tried using:
filebrowserImageBrowseUrl: '//ckeditor.com/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
//using a folder from my sharepoint site.
filebrowserBrowseUrl: '/sites/HSAHandbooks/PublishingImages/Forms/Thumbnails.aspx',
filebrowserUploadUrl: '//ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '//ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images',
I am able to copy paste the images directly,
when i click on image option and choose browse server, it takes me to the path i mentioned and i can copy the link and use it to insert image.
when i click on image option -> choose upload -> choose an image from local folder - > click on send it to server - this works and the image gets stored in : https://ckeditor.com/apps/ckfinder/3.4.5/ckfinder.html?type=Images&CKEditor=editor1&CKEditorFuncNum=0&langCode=en
The above page can be accessed by anyone globally so, its not helpful for me.
Please help me out..

Related

Download TXT file from URL and save to PC on Flutter Web

I have a problem with my project, I wanna to download a .txt file and save to any directory with Flutter WEB, I think I put the setup but It does not work. Now de .txt file display the content in the same tab of browser, but I want to download this file, here is my code:
void downloadFile(String url) {
html.AnchorElement anchorElement = new html.AnchorElement(href: url);
anchorElement.download = "plantilla_simulador.txt";
anchorElement.dispatchEvent(html.Event.eventType('MouseEvent', 'click'));
anchorElement.style.display = 'none';
anchorElement.click();
}
Perhaps you are trying to download file from another site.
Keep in mind that download attribute only works for same-origin URLs, or the blob: and data: schemes.
This code should download file:
html.AnchorElement(href: 'index.html')
..download = 'some_name.txt'
..style.display = 'none'
..click();
but this one should open file in browser:
html.AnchorElement(href: 'https://raw.githubusercontent.com/flutter/flutter/master/flutter_console.bat')
..download = 'some_name.txt'
..style.display = 'none'
..click();

Downloaded Excel file with Macros is corrupted via MVC ajax

I am trying to download an Excel file from MVC Ajax call, but everytime it downloads, I cannot open the file, because it says it is corrupted.
Following is my Ajax call:
function Download() {
$.ajax({
url: '/Home/ExcelDownload',
type: "POST",
success: function (result) {
if (result !== null || result !== "") {
$('<iframe src=' + result + ' frameborder="0" scrolling="no" id="myFrame"></iframe>')
.appendTo('body');
}
//var iframe = document.getElementById('invisible');
//iframe.src = result;
},
error: function (data) {
}
});}
From my controller I call the action method like this:
string host = Request.Url.Authority;
return Json("http://" + host + "/ExcelTemplates/EInvoiceTemplateNew.xlsm");
I am having macros enabled in Excel as well.
The file downloads properly but when I try to open it, it gives me a warning about being from a trusted source, and on clicking yes, I get another dialog saying "The workbook cannot be opened or repaired By Microsoft excel because it is corrupt".
Any help or suggestions or workarounds to make my code working.
Thanks In Advance!!!..
I'm not able to do a project and try the excel library right now as I'm at work, so I'm just doing this much quickly.
To start, I think you can get away from using ajax completely. Which is always nice because it's less code to maintain, you can use a normal anchor tag:
Download
This won't redirect the page, because the browser should interpret the content-disposition/Mime type, and just download the file.
Then you can try returning the file like this, where you first read the file (in this case into a stream, but you could do it as a byte[] as well as File has a overload for it), and then return it through your controller by using File and FileResult.
E.g:
public FileResult GetExcelDocument(int id)
{
string filePath = GetPathToDocumentWithId(id); //However you get the excel file path
return File(System.IO.File.OpenRead(filePath),
System.Web.MimeMapping.GetMimeMapping(filePath),
"filename.xlsm");
}
This website says that the content type/MIME of .xlsm is "application/vnd.ms-excel.sheet.macroEnabled.12", but I think GetMimeMapping should work.
Optionally, if you want the file to download in a new tab, you can set the target of the anchor tag to "_blank" and it should open a new tab and download the file there.
Let me know what the result is.
If you're set on using JQuery and ajax, I found this example which follows along your previous attempt:
From Here
var $idown; // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
if ($idown) {
$idown.attr('src',url);
} else {
$idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
}
},

CKFinder 3: Moving Resized Image to a destination folder

I am using CKFinder 3 intergrated with CKEditor. Now, after resizing an Image and clicking on Choose Resized, I want to move/copy the resized image to another folder using javascript. I am able to get upto the following code.
CKFinder.start({
onInit: function (finder) {
finder.on('file:choose:resizedImage', function (event) {
var file = event.data.file;
var resizedData = file.get('imageResizeData');
var resized = file.get('imageResizeData').get('resized');
// Need help here to move the resized image to another folder.
});
}
});
NOTE: I am using ASP.NET Connector.
You can use command:send request to send CopyFiles request:
https://docs-old.ckeditor.com/ckfinder3/#!/api/CKFinder.Application-request-command_send
Parameters taken by CopyFiles can be found here:
https://docs-old.ckeditor.com/ckfinder3-net/commands.html#command_copyfiles

Meteor Image Display Not Working Once App Is Deployed

Currently I am creating an application where I display an uploaded file from CollectionFS and display it using the CollectionFS url return. Locally the image loads and is displayed. However once I deploy the application to meteor.com the image url does not work. With the console indicating that the image path cannot be found.
CollectionFS returns this url for my image:
/cfs/contacts/75erhMtuwjn66fQH3_default1.png
Locally when I deploy the app I can see the image using in my .html:
img src="/cfs/contacts/75erhMtuwjn66fQH3_default1.png"
The specific code returned by CollectionFS is in the .html file and is being called client side:
{{cfsFileUrl "defaultHandler" fileId=fileId collection="Collection"}}
Locally I use this address as the source for the uploaded image in my html:
localhost:port/cfs/contacts/75erhMtuwjn66fQH3_default1.png
But when I attempt to view the image of the deployed app using the same procedure, it returns with an error of url not found:
http://host.meteor/cfs/contacts/75erhMtuwjn66fQH3_default1.png.com
A file is added on a click event client side .js:
'change .fileUploader': function (e) {
var files = e.target.files;
var fileName = files[0].name;
for (var i = 0, f; f = files[i]; i++) {
var k = ContactsFS.storeFile(f);
Session.set('fileID', k);
}}
Server side:
ContactsFS.fileHandlers({
default1: function(options) {
return {
blob: options.blob,
fileRecord: options.fileRecord // if no blob then save result in fileHandle (added createdAt)
};
}});
Then I can call the url in html with the given function from collectionFS documentation:
{{cfsFileUrl "default1" fileId=fileId collection="ContactsFS"}}
Once again the problem isn't generating the url. Both locally and once deployed the app displays a url. It is using the image url as the source for the image tag that is giving me the problem.
CollectionFS had a bug. I contacted the creator with the issue and it is now resolved in the collectionFS package. The report and closed issue can be found at:
https://github.com/raix/Meteor-CollectionFS/issues/85

Drupal Node Forms - Image field: How to directly upload an image after choosing a file (no need to click upload button)

I'm trying to change the default behavior of Drupal when adding an image through image field on a content type.
When you choose an image to assign to a node, it's not directly uploaded. You also need to click "upload" to display the preview of your image, and this is not really user friendly.
How can I change this (programmatically) to make Drupal start uploading directly the image after choosing the file.
Thank you for help
You can do it this way:
(function ($) {
Drupal.behaviors.autoUpload = {
attach: function(context, settings) {
$('.form-item input.form-submit[value=Upload]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Upload]', $parent).mousedown();
}
}, 100);
});
$('.form-item input.form-submit[value=Transférer]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Transférer]', $parent).mousedown();
}
}, 100);
});
}
};
})(jQuery);
This solution works with either english and french browsers. Unlike AutoUpload module, which only works on browsers configured in english. Note the [value=Upload] / [value=Upload] attribute
I found a similar post:
https://drupal.stackexchange.com/questions/31121/how-can-i-automatically-upload-images-on-file-selection-rather-than-pressing-the
It's exactly what I need..
You should be able to use http://drupal.org/project/imce for your needs.
I am not sure about the Image field but when I encountered this issue I decided letting users add images in body since it is a much easier option for durpal - When inserting images in text They will show immediately .
IMCE + filefield seems like a viable option for your direct needs,They do mention AJAX support.

Resources