Changed base 64 encoding of image to server image path after uploading of image on server.

[rbsl-yasmin]

I don't want base 64 encoding of images, for that I am using fileUploadOptions where I will upload images on my server and will return there absolute path. as you guys mention in your doc, if I send URL of images back then base 64 paths will be replaced by the path sent in response from the server. But nothing sort of worked and also uploadCompleted and uploadFailed are not working. as I can see in the medium-editor-insert-plugin.js you guys comment out uploadCompleted and uploadFailed. Please if you can give a proper example of how should I handle this so that images can upload on my server and replace the base 64 encoding of images to the path of the images from my server?

this is my code - $(function() { $('.description').mediumInsert({ editor: editor, addons: { // (object) Addons configuration images: { // (object) Image addon configuration label: '', // (string) A label for an image addon uploadScript: null, // DEPRECATED: Use fileUploadOptions instead fileDeleteOptions: {}, // (object) extra parameters send on the delete ajax request, see http://api.jquery.com/jquery.ajax/ preview: true, // (boolean) Show an image before it is uploaded (only in browsers that support this feature) captions: true, // (boolean) Enable captions captionPlaceholder: 'Type caption for image (optional)', // (string) Caption placeholder autoGrid: 3, // (integer) Min number of images that automatically form a grid formData: {}, // DEPRECATED: Use fileUploadOptions instead fileUploadOptions: { // (object) File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options url: '{{ route("admin::save_image") }}', // (string) A relative path to an upload script acceptFileTypes: /(.|\/)(gif|jpe?g|png)$/i // (regexp) Regexp of accepted file types }, styles: { // (object) Available image styles configuration wide: { // (object) Image style configuration. Key is used as a class name added to an image, when the style is selected (.medium-insert-images-wide) label: '', // (string) A label for a style added: function($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active) removed: function($el) {} // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active) }, left: { label: '' }, right: { label: '' }, grid: { label: '' } }, actions: { // (object) Actions for an optional second toolbar remove: { // (object) Remove action configuration label: '', // (string) Label for an action clicked: function($el) { // (function) Callback function called when an action is selected var $event = $.Event('keydown'); $event.which = 8; $(document).trigger($event); } } }, messages: { acceptFileTypesError: 'This file is not in a supported format: ', maxFileSizeError: 'This file is too big: ' }, uploadCompleted: function($el, data) { alert("complete"); }, // (function) Callback function called when upload is completed uploadFailed: function(uploadErrors, data) { alert('There is a problem in uploading the image'); console.log(uploadErrors); console.log(data); } // (function) Callback function called when upload failed } } }); }); // this is my upload script public function saveImage(Request $request){

    $uploadedImage = $request->file('files');
    $image_path = null;
    $images = new \stdClass();
    foreach($uploadedImage as $image) {
        $folder = '/shared/1/cover-image/';
        $filename = 'cover-image.' . $image->getClientOriginalExtension();
        $image_path = AalekhHelper::saveUploadedImage($image, $folder, $filename);
        $images->url = env('APP_URL').$image_path;
    }

    $response = new \stdClass();
    $response->files = [$images];
    echo json_encode($response);
    exit;
}

[rbsl-yasmin]

Its working now !

[BechirAhmed]

How you make it? my images got uploaded successfully but the image still base64

[rbsl-yasmin]

@BechirAhmed make sure you send absolute URL from the server and also the response needs to be set in this format.

$response = new \stdClass();
$response->files = [$images];
echo json_encode($response);

Besides that you can do one more thing is, in mediumInsert function set preview false, after that the images will not be converted into base 64. Hope this helps.

[BechirAhmed]

Thanks for your answer, but when set preview to false the image will not display after insertion and that's something I don't want. I use the editor to create posts for my blog and it's not a good practice Or it's not cool if you can't display the image after insertion and customize it. So what you suggest?

[rbsl-yasmin]

@BechirAhmed When image preview is true then if something goes wrong with my server or the image uploading taking time, in that case the image is still showing in the editor due to base 64 encoding and this confuses the user that image is uploaded successfully. User will save the blog and base 64 encoding image will be attached to the blog. so by setting preview to false, the image will only be displayed when it is successfully uploaded to my server. Once the upload will done then user can see the preview and also I want to mention that when preview is false then a loader will be shown in the editor till image is uploading to the server, due to the loader feature I don't think so its a bad practice.

Thanks

[BechirAhmed]

@rbsl-yasmin You're completely right, It's working now like a charm, thanks so much for your help and for clearing things to me

[rbsl-yasmin]

Your welcome