Using amazon s3 storage with summernote

[ankur1708]

Summernote converts uploaded image as a base64 data which is too large to store.
Is there way to inject amazon s3 service, so that only link gets stored in db?

[drewhamlett]

This is what I have. Sorry for the coffeescript. It only does the first image dragged in right now.

sendFile = (file, callback) ->

  data = new FormData()
  data.append("file", file)
  $.ajax {
    url: '/upload',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: (data) ->
      callback(data)
  }

$ () ->
  $post = $('#post-create')
  $post.summernote {
    height: "350px",
    onImageUpload: (files, editor, welEditable) ->
      sendFile files[0], (data) ->
        url = "#{data.scheme}://#{data.host}#{data.path}"
        editor.insertImage(welEditable, url)

Rails controller

class UploadsController < ApplicationController

  def create
    @file = params[:file].tempfile
    s3 = AWS::S3.new
    random = SecureRandom.hex
    image = s3.buckets['my-bucket'].objects.create("#{random}.jpg", @file)

    render(json: image.public_url)
  end
end

[ankur1708]

Thanks drewhjava. That helps.
I will modify it to delete images from s3 as well on removing images from editor content and post it here soon.

[hackerwins]

@ankur1708, @drewhjava Great!!! 👍

[moffepoffe]

based on @drewhjava code.

jQuery(document).ready(function() {
    jQuery('#summernote').summernote({
        height: "500px",
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0],editor,welEditable);
        }
    });
});
function sendFile(file,editor,welEditable) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: "/ajax/saveimage",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
                editor.insertImage(welEditable, url);
        }
    });
}

PHP server side

$f3->route('POST /ajax/saveimage', function($f3){
        $name = randomString();
        $ext = explode('.',$_FILES['file']['name']);
        $filename = $name.'.'.$ext[1];
        $destination = '/home/xxx/public_html/images/'.$filename;
        $location =  $_FILES["file"]["tmp_name"];
        move_uploaded_file($location,$destination);
        echo 'http://xxx.com/images/'.$filename;
    });
function randomString() {
    return md5(rand(100, 200));
}

will work on it to be dynamic :-)

[eyeris]

Hi I have tried this code several times and everything works out until the,

success: function(url) {
editor.insertImage(welEditable, url);

The php function prints the correct image path and I can even access the stored file in browser address bar. but its doesn't insert to the editor. any suggestions

[titosemi]

@eyeris Your php code has to return back the url to the file in order to be able to render it.

[mirivlad]

@moffepoffe, @ankur1708 How do remove the picture from the server if it is removed in the editor? Please show me an example, do not have a high skill in javascript :(

[drewhamlett]

@mirivlad I just leave it on the server. Your talking less then a cent. You should always run your images through imagemagick before uploading.

If I were doing it, I would implement a scraper that runs every day and listed out all images(older ones) on s3 and see if they existed in the posts.

Put it this way.

You store 10,000 100kb images(some will be smaller). That's 0.953674 gb. That's $0.01 on Amazon S3. I think it actually counts as free usage tier also.

http://calculator.s3.amazonaws.com/calc5.html

[mirivlad]

@drewhjava Yes, I think you're right. Old habits are still with me :)

[drewhamlett]

@mirivlad Look at the bright side, if you start storing millions of images on Amazon S3 that means your product is successful enough to hopefully have some income. Haha.

[mirivlad]

@drewhjava I'm not going to store images in AS3. The project is small and will be located at the customer's hosting about which I know nothing. If the customer will be required to AS3 to store pictures, I realize it feature for an additional cash :)

[moffepoffe]

@mirivlad i will try to fix the code for you later today :)

[mirivlad]

@moffepoffe I would be inordinately grateful to you :)