Summernote 0.8.12 Image Upload And Delete - javascript

In Summernote 0.8.12 version, I couldn't find a code to upload and delete Images. Can you help me?

To do this you need to use a call back to a function which will handle your upload - in my case I have below for my summernote (very simplified for relevance):
$('.editor').summernote({
toolbar: [
['insert', ['link', 'picture']]
],
callbacks: {
onImageUpload: function(image) {
uploadSNImage(image[0]);
},
onMediaDelete : function(target) {
deleteSNImage(target[0].src);
}
}
});
The callback says that when an image is uploaded it calls the function called uploadSNImage.
This function looks like:
function uploadSNImage(image, editor) {
var data = new FormData();
data.append("image", image);
$.ajax({
url: 'YOUR UPLOAD SCRIPT',
cache: false,
contentType: false,
processData: false,
data: data,
type: "post",
success: function(url) {
var image = $('<img>').attr('src', url);
editor.summernote("insertNode", image[0]);
},
error: function(data) {
}
});
}
You will need to change url to the url on your server which will take the image and validate it, store it somewhere and so on but this will physically allow the image to be passed to that script.
The output from that script should be url to the file you have uploaded so you can then use that in the success part of the function.
To delete works in a similar way except this time you use onMediaDelete in the callback - again this invokes a function with an ajax call to a script to delete the image (edited to include this above).
Your delete function then looks something like:
function deleteSNImage(src) {
$.ajax({
data: {src : src},
type: "POST",
url: "YOUR DELETE SCRIPT",
cache: false,
success: function(data) {
alert(data);
}
});
}

Related

jquery not calling ajax handler

This should be a really simple fix, but I am pulling my hair out.
This part of the site is really simple. I have a .js file that uses ajax to insert a post into the database when submit is clicked. I get the success part of the jquery, but nothing ever gets put into the database.
Here is the jquery in the $(document).ready(function():
//Button for profile post
$('#submit_profile_post').click(function(){
$.ajax({
type: "POST",
url: "includes/handlers/ajax_submit_profile_post.php",
data: $('form.profile_post').serialize(),
success: function(msg) {
$("#post_form").modal('hide');
location.reload();
},
error: function() {
alert('Failure');
}
});
});
Here is the ajax handler:
<?php
require '../../config/config.php';
include("../classes/User.php");
include("../classes/Post.php");
include("../classes/Notification.php");
if(isset($_POST['post_body'])) {
$post = new Post($con, $_POST['user_from']);
$post->submitPost($_POST['post_body'], $_POST['user_to']);
}
?>
As I said, If I add an alert under the jquery success, I get it just fine but nothing happens after that.
Any help would be greatly appreciated!
Try using FormData
var fd = new FormData();
fd.append('field', value);
$.ajax({
url: 'http://example.com/script.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
`enter code here`
success: function(data) {
alert(data);
}
});

Inserting image to an editor

I am using summer note editor and I want to upload an image to a folder when an user select an image file and at the same time I want to insert the image into the editor, How can achieve that, now I have the code that only upload the image to a folder but not into the editor...
$(document).ready(function() {
$('#summernote').summernote({
height: 510,
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: 'savetheuploadedfile.php',
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
I got the answer, rather than using an editor object, replace the
editor.insertImage(welEditable,url);
with
$('#summernote').summernote('editor.insertImage',url);
Summer note new version passes only one argument. So you can use this script
$('.summer').summernote({
height: "200px",
onImageUpload: function(files) {
sendFile(files[0], $(this));
}
});
function sendFile(file, editor) {
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: 'savetheuploadedfile.php',
cache: false,
contentType: false,
processData: false,
success: function(upload_file_url) {
editor.summernote('insertImage', upload_file_url);
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});

jQuery Submit Form (w/ file and text) without redirecting from current window

I want to build an application form where on can attach an image - it's just a couple of input elements - within a div (not an form element). The form shall be processed without an page redirect. So I use ajax. Everything works fine so far. But now I need to add an image.
$('#submit_application').click(function () {
//...
$.ajax({
url: 'submit.php',
type: 'post',
data: {
'action': 'submit',
'image': $('#image_upload').val(),
// ..
'someStringifiedJSON': JSON.stringify(foo)
},
success: function (data, status) {
// ...
},
error: function (xhr, desc, err) {
// ...
}
});
});
How can I get my file into php's $_FILES variable? Or how can I pass the file to php so that I can upload it?
you can send files using formData.
var file = $('#image_upload')[0].files[0];
var fData = new FormData();
fData.append('action', 'submit');
fData.append('image', file);
fData.append('someStringifiedJSON', JSON.stringify(foo));
and your ajax request will be:
$.ajax({
url: 'submit.php',
type: 'post',
data: fData ,
contentType: false,
processData: false,
success: function (data, status) {
// ...
},
error: function (xhr, desc, err) {
// ...
}
});
Explanation:
as specefied here.if you set processData to true it will pass it as query string.if you want to send non-processed data set it to false.
default for contentType is application/x-www-form-urlencoded; charset=UTF-8.which won't work for files (because it sends heder like multipart/form-data; boundary=---------------------------125911542220235) when you set it to false browser generate right content-type header automatically
Try this:
$('#submit_application').click(function () {
var formData=new FormData();
formData.append('action','submit');
formData.append('someStringifiedJSON', ''+JSON.stringify(foo));
formData.append($('#image_upload').files[0]);
$.ajax({
url: 'submit.php',
type: 'post',
contentType:false,
data: formData,
success: function (data, status) {
// ...
},
error: function (xhr, desc, err) {
// ...
}
});
});
Make sure to add this contentType:false in ajax request.

Redirect to another page after eventlistener

I have an eventlistener that needs to run, once its run I need to redirect to another page. However when I add a window.location.href anywhere in my code it just jumps straight to the redirect and doesn't do the other code.
When I comment out the redirect it runs it...
document.getElementById('save').addEventListener('click', function () {
/*
* since the stage toDataURL() method is asynchronous, we need
* to provide a callback
*/
stage.toDataURL({
callback: function (dataUrl) {
//window.open(dataUrl);
// Send the screenshot to PHP to save it on the server
var url = 'export.php';
//alert(url);
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {
base64data: dataUrl,
yname: thename,
yemail: theemail,
company: thecomp,
twitter: thetwitter
}
});
}
});
}); //close listener
I believe in this case you need to add a success method to your last ajax call before running the redirect.
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {
base64data: dataUrl,
yname: thename,
yemail: theemail,
company: thecomp,
twitter: thetwitter
},
success: function() {
location.href = 'your_url';
}
});

Send a blob with ajax, don't work in my case

So, i have an image on my page with this for src attribut :
src="blob:47d2cdd6-0ff0-401f-a195-a671d0db9b05"
I need to send this blob to php with ajax, for save this blob (a gif in my case) on my server.
This is my ajax :
var data = new FormData();
data.append('file', $('myImage').attr('src'));
$.ajax({
type:"POST",
url: "/webcam/",
data: data,
contentType: false,
processData: false,
success: function () {
parent.$.fancybox.close();
},
error: function() {
alert("not so boa!");
}
});
But, when i am on my php script, i don't know how to use this blob... When i try readimageblob() from imagick for example, i have an error.
Am i in the good way ?

Categories

Resources