We Keep Coding

Custom Upload Images using CKEditor, BLOB field and Rails 4

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.

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);
}

How to identify uploading item is folder while doing drag and drop

I am using file upload functionality using drag and upload .I want to identify uploading item is folder.Is there any possible way to identify uploading item is folder for IE browser in javascript.

You need to use the (pretty experimental) directory API:
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/html5/folder-upload/
Basically, you need to check:
event.dataTransfer.items[0].webkitGetAsEntry().isDirectory
// ↑ You may need a loop here

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.