Ckeditor uploadimage 404 error / plugin setup - javascript

I'm trying to add the adding of images into with the editor, with drag 'n drop.
I wanted to update CK editor anyway, so after some reading I created a new CKeditor download via the package building, including the plugin uploadimage -
http://ckeditor.com/addon/uploadimage
When I try to drag 'n drop an image in it, I'll see a green bar saying upload succesful and for less then a second I see the image in the editor.
Then a red bar is showing. saying:
'HTTP error occurred during file upload (404: File not found).'
I have this in the ckeditor config.js:
config.uploadUrl = '/upload/';
As I assumed this was the path were the images are uploaded. The folder is created and for testing I have set its permissions to 777.
As this is not working I assume I did something wrong here, or that I'm missing something in the configuration. But via the documentation I don't see what it might be.
I hope someone can point me in the right direction.
On a side note, I do not need/want a file browser. A little context -> this editor will be used by logged in users. I do not want one user be able to see images from the other and the input text in only used once, so no need to find earlier images as for this particular use the user will only use this editor once for setup. This is why I tought the uploadimage plugin would fit best for my needs.
Kind regards,
Martijn

Based on the documentation of ckeditor:
The uploadUrl setting contains the location of a script that handles file uploads of pasted and dragged images
This is not the folder in your server that you want to upload the files to. This should be the script that handles the submit of the file that should be uploaded, and this script is the one who handle the saving of the file in the relevant folder on the server.
This plugin only covers the client side (what happen in the browser) and not the server side (which you need to implement by yourself).

Related

PhotoeditorSDK - how to implement export function

I'm leaving my moving from a flash based image editor for our custom CMS to the last minute I know, but PhotoeditorSDK seems to be the thing we need. However my Javascript programming is not up to much so I'm struggling with how to deal with the resultant image I want to export.
I can upload and pass the file to the editor no problem.
I just want to post the resulting processed image to my file handling (which is CFML Lucee) by passing it a file or url or form field - doesnt matter which really.
But the documentation on the SDK only appears to be limited to this (in the export documentation)
editor.on(UIEvent.EXPORT, async (image) => {
// todo: handle exported image here
So I'm stuck.
What I would like to happen is to have the resulting image (post editing) sent to my script, where I can do what I need to to on solid ground.
Any suggestions or areas to explore greatfully received
A lot of these editors export DIRECTLY from the browser using SVG or other techniques, so chances are that is what they are doing.
to export or save image simply just redirect to the url of the download which will download the file without navigating the page. you can add any params you want to the get request including the base64 of image
document.location='./imageout.cfm?content='+image; (or whatever url generates the exported doc and myimageref is the variable with a reference or path of what to export.
Any docs url we can look at?
otherwise you can just create a form object in js and submit the form with image as a field with POST.

Loading an Image Folder using Javascript

I am creating an Image manipulation tool in the browser, and I want people to be able to select an Image folder to use as a directory to work from, and I would like those images to be available for editing and displaying in a HTML canvas.
How can I have the user select a folder on their computer and load all the images from inside it?
What about handling Dropbox, Box, Google drive as well as File, Folder and Drag & Drop. If you are interested take a look to this: http://extract.autodesk.io/ - This sample does not work with images, but 2d/3d models, but it is not different than images, change change the file filters accordingly.
Source code is posted here: https://github.com/cyrillef/extract-view.and.data.api
Where to start:
Install Flow.js - https://github.com/flowjs/flow.js
https://github.com/cyrillef/extract-view.and.data.api/blob/master/www/index.html#L195 for the HTML portion
https://github.com/cyrillef/extract-view.and.data.api/tree/master/www/js
upload-flow.js - using the flow.js library for local file
loaders.js - to handle dropbox, box, google driver, etc...
https://github.com/cyrillef/extract-view.and.data.api/tree/master/server
flow-node.js - the Flow.js Node.js implementation
file.js - the server routing for Flow file
You also got it in PHP, if you do not want Node.js
https://github.com/cyrillef/extract-php-view.and.data.api

jQuery File Upload - Get Folder Name

I'm using JQuery FileUpload in my web application. Things are working fine. Now i want to extend the behavior and get the folder name from uploaded file. Requirement is to get the folder name when user drop a file on page or select it through the file selection dialog. For this i tried to use callback "fileuploadchange" and "fileuploaddrop". Both worked and i was able to get the selected file collection i.e data.files but data.files[0] didn't contains any information about the source folder. Any idea on how this can be achieved ?
Thanks in advance.
You can only get info on what the user decides to "give" you, for security reasons. You might get that functionality by using some flash plugin, but with html/js you are not allowed into the users pc, not even folder names (thankfully)

Sitecore Pipeline Upload Processor

I'm using UploadProcessor to block specific file uploading into MediaLibrary.
Everything is working good and I can see the alert Sitecore's message. But, Sitecore's error message is not really user-friendly "One or more files could not be uploaded. See the Log file for more details"
So, I'd like to add extra alert box for users. Below is my code, but the javascript is not working.
Some people want me to use "SheerResponse", but Sitecore Document mentions that
The uiUpload pipeline is run not as part of the Sheer event, but as part of the form loading process in response to a post back. This is because the uploaded files are only available during the “real” post back, and not during a Sheer UI event. In this sense, the uiUpload pipeline has not been designed to provide UI. In order to provide feedback to a User, the processor should resort to some trick which emits the JScript code.
http://sdn.sitecore.net/Articles/Media/Prevent%20Files%20from%20Uploading/Pipeline%20upload.aspx
Do you have any idea how to implement alert box??
The Upload control in the Media Library uses flash to upload the files. As part of this upload process, the file sizes are checked using JavaScript and a client side validation is made before the upload.
There are a number of changes you need to make. I'm just going to list them here, you can find all the code in my Github Gists:
https://gist.github.com/jammykam/54d6af46593fa3b827b4
1) Extend and update the MediaFolder.js file to check the file size against the Image Size ONLY if the extension is one specified in config
if (file.size > this.uploadLimit() || this.uploadImageLimitReached(file)) {
...
}
2) Update MediaFolder.xml page to include the above JS. Amend the codebeside, inheriting from Sitecore.Shell.Applications.Media.MediaFolder.MediaFolderForm and overriding OnLoad and OnFilesCancelled, to render restricted extensions and max image size settings so these are passed to the Javascript and display friendly alert.
settings.Add("uploadImageLimit", ((long)System.Math.Min(ImageSettings.MaxImageSizeInDatabase, Settings.Runtime.EffectiveMaxRequestLengthBytes)).ToString());
settings.Add("uploadImageRestrictedExtensions", ImageSettings.RestrictedImageExtensions);
3) Update Attach.xaml.xml codebeside to check image size, inheriting from Sitecore.Shell.Applications.FlashUpload.Attach.AttachPage and overriding OnQueued method:
if (ImageSettings.IsRestrictedExtension(filename) && num > maximumImageUploadSize)
{
string text = Translate.Text("The image \"{0}\" is too big to be uploaded.\n\nThe maximum image size that can be uploaded is {1}.", new object[] { filename, MainUtil.FormatSize(maximumImageUploadSize) });
this.WarningMessage = text;
SheerResponse.Alert(text, new string[0]);
}
else
{
base.OnQueued(filename, lengthString);
}
4) Add a config include with the new settings.
<setting name="Media.MaxImageSizeInDatabase" value="1MB" />
<setting name="Media.RestrictedImageExtensions" value=".jpg|.jpeg|.png|.gif|.bmp|.tiff" />
You can still (and should) keep the pipelines in place, but note from my previous answer I gave the "Restricted Extension" config setting has now changed (into a single setting instead of passing it into the pipeline). The Gist contains the
NOTE that I have tested this using Sitecore 7.2 rev 140526, so the base code is taken from there. If you are using a different version then you should check the base C#, JS and XML code matches what I have provided. The code is commented to show you what has changed.
The above works in the Content Editor, it does not work in the Page Editor! Which in Sitecore 7.2+ uses SPEAK dialogs and it looks like they use a different set of pipelines. That would need more investigation (raise another question, and specify which version of Sitecore you are using).

Upload/download/save image to a local server from a remote server using an Image URL and PHP?

I am building a Discussion Forum as part of a bigger application I am building, the forum is just 1 section of the Application.
For my TextArea fields when posting a new Topic or a Post Reply, I have decided that nothing is as good as the PageDown Markdown Library. It is the same one that StackOverflow uses on all their sites and it works better than many of it's competitors.
The way the library ships though, I am not happy with the default Insert Image functionality. You hit the button to insert an image and it allows you to enter a URL for an Image and then it inserts the proper MarkDown syntax to show the linked image.
This just won't cut it. I need the functionality that you see on StackOverflow! Very similar anyways.
I need it to show a Dialog when you click the Insert Image button, like it does now, but instead of just an input field for a Image URL, it will have 2 filed options...
Upload image from your computer
Insert an Image URL and it will then DOWNLOAD the image from that URL and insert it into the post just as if you had uploaded it from your computer. This is important to not confuse this step. IT should not simply insert the Image linking it to the original Image URL. Instead it will take that URL and download/upload the Image to the same server that the upload from computer option does and then it will insert the NEW Image URL pointing to the newly uploaded image!
Based on some simple HTML like below for a Dialog window with a filed for my Upload from Computer functionality, which I already have working. I need to come up with some JavaScript and PHP that will download/save a remote image to my upload folder on my server when a button is clicked using only the URL that will be inside the URL text input field.
So it will need to do a few things...
Fetch and save an image file to my uploads folder using PHP when the only thing that the PHP function will receive is a URL of the image which could be on the same server or most likely a remote server.
After successfully saving/uploading an image from the URL, the PHP function will return a JSON string with the status/error and if successful then it will also return the actual URL and filename of where the new image is saved on the local server. The JavaScript/AJAX script will receive this JSON response and insert the Markdown syntax for the image into the PageDown editor.
The PHP function will need to ensure that the URL that it is trying to save/download is a valid image file and not some malicious file! Also not simply just some file of the wrong filetype like a non-image file unless we are allowing the file type.
It will be part of a module installed on many dinosaur servers so it needs to work on as many servers as possible too!
From the web
From your computer
I would be greatful of any help, tips, code snippets or anything to help with this. At this stage I really just need to build a nie PHP function that will upload images from a remote URL and also ensure that the URL passed in is a real image file or even better that it is in the allowed file types array!
A couple years ago I had started this but have now lost it and I am starting over and don't remeber much about how I went about doing it then.
The easiest way to download a file from a remote server would be to use copy (http://php.net/manual/en/function.copy.php):
copy('http://someurl.com/image.png', '/var/www/uploads/image.png');
As this function returns a bool, it is easy to determine whether the operation was successful and create a JSON response.
To verify that the file is an actual image, there is unfortunately no way that is 100% sure. It is probably enough to check the mimetype though. You can use finfo for that (http://php.net/manual/en/function.finfo-file.php):
$finfo = finfo_open(FILEINFO_MIME_TYPE);
echo finfo_file($finfo, $filename);
finfo_close($finfo);
For a gif, this would return image/gif for example. You will have to hardcode a list of all mimetypes you want to allow.

Categories

Resources