Custom Upload Images using CKEditor, BLOB field and Rails 4 - javascript

I'm currently using CKEditor in my site. The user may upload some images to the server using the button for Upload Image in the CKEditor.
There is a textarea field with id #article_conteudo on the page that uses the CKEditor, here is the javascript code to configure the editor:
CKEDITOR.replace('article_conteudo', {
filebrowserImageUploadUrl: '/article/upload/'
});
The URL /article/upload/ points to a method file_upload in an articles_controller:
def file_upload
image = ArticlesImage.new
image.imagem = params[:upload].read
image.save
end
The images are stored in a BLOB field in a MySQL Database.
The images are saved in the database with no problems. But, after saving, nothing happens in the Editor. I'm not sure what is the expected response for the Upload Action of the CKEditor on this case. I'm not sure, also, if CKEditor uploads support the use of BLOBs.
How can I implement this functionality in my project?
If it can't be done with CKEditor, is there any other plugin that can do it?
Thanks for your help
PS: The use of BLOB is MANDATORY for the project, I cannot use other methods

it depends of what you need.
If you want to display images on your browser, you have to create the JSON response involved.
And then, the fileUploadResponse of the CKEditor would be able to display your images (or files) on your editor.

Related

Fineuploader : how to replace uploaded images?

I'm using fine uploader to upload images. After I upload an image, I need to be able to upload another image to replace the uploaded image before and only allow one image at one time. Is there any options for that or should I delete the upladed image before I start uploading the new one?
This is what I would do:
Set the multiple configuration option to false. This will be most helpful if you are using the UI built into the Fine Uploader library (and not a custom UI or React Fine Uploader. In that case, after a file has been submitted, subsequent files will "replace" that initial file in the UI.
Remove/replace the item on your server when handling the upload request if a file for that user already exists.
This is making a lot of assumptions as you have provided very little information about your situation or setup. This should get you started down the right path though.
End up deleting the uploaded images before uploading a new one:
onValidate: function() {
this.deleteFile(avatar_id);
}

Upload file with input[type="file"] without a second button to send

I'm setting up a typical profile picture upload and crop feature for a site. I'm looking at how others have set it up and I see that many are managing to have one input type="file" and it not only allows for selecting a file but also calls the PHP or JS to display the image.
I'm completely stuck on how to make it do something after the image has been chosen.
Does any one have a link or suggestion on how to perform this?
One way you could achieve this is to convert the file into a blob, then present it using an HTML5 canvas. Example: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Another option is to issue an AJAX request after the file input has been changed. Do whatever server processing you need to (crop, save, etc.) then return the AJAX call a path to the file. Then just append a new <img src='filepath.jpg' /> to the DOM.
I would upload the image using AJAX, having a API receiving the image. When image has been saved the API-method returns the path of the image.
You can then display the image using the path you recieved from your API-method.

How to do multi file uploading in JQuery without form and giving remarks/comment for each file?

I'm looking for some JQuery plugin/Plain JS to have multi file uploading without any forms. Also, have to provide remarks for each file(similar to Facebook albums). Need to save both file(as BLOB) and remarks in database using Java(Servlets). There should not be any file storage in server while doing this activities.
Note: I already had a look on jquery file upload, uploadify, etc. Not able to use those plugins according to requirement.

Getting full file path of a clients file using a file dialog box

I am trying to allow users to upload pictures to the server.
I am trying to create a similar system to any website that has an 'attach' file or 'upload image' feature. All I need is to get the full path of the file select by the file dialog.
I tried using this for the file dialog with no success:
<input type="file">
This method does not provide the full file path, due to security reasons. My question is how can I create a similar input dialog to websites like tinypic, photobucket, etc.. that can help users input the full file path of a given image, into an input field?
I am aware that this cannot be done using the method above for security reasons, however, I have seen this done before on various websites without any problems, I was wondering what I had to do to implement a similar file dialog that helps fill in the text, which is a full file path, of an input field?
It is not possible to get the file full path on local machine using browser and javascript.
However, as you would like to upload the file to the server, the easy possibility I see is to use html form with input type file. You will receive the file on your http server when the form is submitted.
Here is a very good url http://www.cs.tut.fi/~jkorpela/forms/file.html that explains the whole process nicely.

image copy paste in ckeditor through firefox?

my problem is that with just copy paste i can copy image in ckeditor in firefox ,after copying this image it doesn,t get displayed in other browser how can i remove pasting of image in firefox
Image urlis also looks diffrent
This is called a Data URI and IE8 can actually display it, if the file is smaller than 32 KB. IE7 can not display it, IE9 has no trouble.
If you want to use this functionality, you'd have to add some code server side that receives the HTML you provided, and before you submit it to the database extract the base64 encoded Data URI's and save them as 'regular' attachments in your database. You'd replace the data URIs with 'regular' uris that point to the image assets on your storage location.
We do something similar for the OTRS project: http://blog.otrs.org/2012/02/06/pasting-images-using-firefox/
If you have already configured a file uploader in CKEditor, you can use this plugin to convert the pasted images into real files and upload them:
http://ckeditor.com/forums/Plugins/ImagePaste-plugin-for-Firefox

Categories