Wysihtml5: How to download inserted image to server?

Question

I'm currently using Wysihtml5 HTML text editor. It works well. But now I want to store inserted images on my Amazon S3 Bucket.

When someone insert an image from an URL, that image should be on my own server or bucket.

Currently Wysihtml5 editor normally holds image sources. See here:http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/

When I press insert image;

It should store image to my server
Then it should replace image's old source url with my own server url path

How to trigger insert image button for image download with Ajax request? What should be my steps before implement this feature?

I checked it but it's not working properly..Hey instead you should use this one as : http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/ — Umair Shah, Feb 25 '17 at 23:14
I don't understand you @UmairShahYousafzai? What did you check what did not work properly? — hakki, Feb 25 '17 at 23:16
I was checking the insert image feature and it wasn't working very well..at first it wasn't able to add images from `https` links and also from links with extra parameters and then when I changed the link to `http` instead so only for once it inserted the image and then when I removed the image and tried again so then it wasn't adding the inserting the image anymore..! May be some sort of bug...As in the description it's been said that it's no longer maintained..! :D — Umair Shah, Feb 25 '17 at 23:19
Ok thanks your attention. @UmairShahYousafzai, Do you have an idea about my question? — hakki, Feb 25 '17 at 23:20
2nd this is just a `JS` based frontend editor..It don't have any uploading features...You need to add those features on submission through `PHP` or anything..! It only inserts the image with remote server src not uploading them to the server..! — Umair Shah, Feb 25 '17 at 23:20
Yes I know that. But How to trigger, Insert image button for initial step for upload? How wysiwyg handle events? — hakki, Feb 25 '17 at 23:22
You do know you can do that through PHP right??? upon submission for now what I can think of but there may be another way..for instance the editor writes in HTML code so you can get the src attribute urls of the images and then upload them to your server and then replace the urls back with the remote src links..! :D — Umair Shah, Feb 25 '17 at 23:27
For that you can either use `PHP API` as : http://simplehtmldom.sourceforge.net/ or write your own code for html parsing in PHP..! — Umair Shah, Feb 25 '17 at 23:29
But it is extra process for my server. Does not any event handler for wysiwyg? — hakki, Feb 25 '17 at 23:31
Or you can do an ajax request upon inserting the image url so event would get that and then send an ajax based request to the image upload php file with the link as parameter and the image will be uploaded and then in response you will get your server url the uploaded image url at your server..! And that's pretty much about it...! :P — Umair Shah, Feb 25 '17 at 23:32
Please. I also know trying something about it. I'll add my progress here. — hakki, Feb 25 '17 at 23:34

Umair Shah · Answer 1 · 2017-03-01T08:54:57.520

Here is how exactly you can do it :

Take a look at link :

Paste Event Based Image Uploader Script : http://huntedhunter.com/uploadimage/

I just wrote this a little while ago..!

How It Works :

Just right when someone paste an HTTP site image link in the input field so the image url is posted to upload.php through ajax post request file and the upload.php file downloads the image and save it on local server and then then new image url is received in ajax response to the current page and hence you can do anything with the response..!

Here is the code :

HTML :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$( document ).ready(function() {
$('#insert').on('input', function(e) {
   var $val = $('#insert').val();
   $.ajax({
       url: 'upload.php',
       type: 'POST',
       data: { imageurl: $val} ,
       success: function (response) {
           $('#newimageurl').val(response);
           $('#showimage').attr('src', response);
       },
       error: function () {
           //your error code
       }
   }); 
});
});
</script>
<title></title>
</head>
<body>
<form class="form-horizontal" style="padding: 10%">
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Insert Image: </label>
        <div class="col-sm-10">
            <input class="form-control" id="insert" placeholder="Enter ImageURL" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Your New Image URL:</label>
        <div class="col-sm-10">
            <input class="form-control" id="newimageurl" placeholder="Enter ImageURL" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Your New Image:</label>
        <div class="col-sm-10"><img id="showimage" src=""></div>
    </div>
</form>
</body>
</html>

PHP : (upload.php)

<?php
$image_name = basename($_POST["imageurl"]);
$ch = curl_init($_POST["imageurl"]);
$fp = fopen("tmp/$image_name", 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
$url = $_SERVER['REQUEST_URI']; //returns the current URL
$parts = explode('/', $url);
$dir = $_SERVER['SERVER_NAME'];

for ($i = 0; $i < count($parts) - 1; $i++)
    {
    $dir.= $parts[$i] . "/";
    }

echo "http://" . $dir . "tmp/" . $image_name;
?>

That is cool. I can do this part but my bigger problem is how to connect this solution to wysihtml? : ) And If user delete image from text editor, what will hapen? — hakki, Feb 26 '17 at 01:27
And Do you want to be able to delete the image too when user delete image from the text editor? — Umair Shah, Feb 26 '17 at 01:29
It's very easy now you just need to mention the editor input id's and that's it you are good to go..! — Umair Shah, Feb 26 '17 at 01:30
Yes this will be big issue if there are thousands images and contents on your server. Basically I want to implement a text editor like Qora's — hakki, Feb 26 '17 at 01:30
Also you can think with http://summernote.org/ summernote editor. Editor is not important for me. Just I want to use URL image upload. And How can I delete images on my server when user delete it from text editor? — hakki, Feb 26 '17 at 01:32
See this: https://www.froala.com/wysiwyg-editor/docs/concepts/image/delete but this editor is too expensive for me. So i try to find open source alternative — hakki, Feb 26 '17 at 01:33
Yes...you can delete images by monitoring change in the `DOM` and when the image element is removed from the dom so then you get the src of that image element and locate that image in the folder and remove that by sending an ajax request to another php file..! :D :P But you are going to do it on your own..Unless if you are looking for paid support..So then I may be able to help you..! — Umair Shah, Feb 26 '17 at 01:38
This may help you as : http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom — Umair Shah, Feb 26 '17 at 01:42

Wysihtml5: How to download inserted image to server?

1 Answers1