Develop Reference

Summernote 0.8.12 Image Upload And Delete

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

How to add PHP Session variable into FormData using AJAX?

I'd like to pass a PHP session variable (called 'profileid') using FormData and AJAX. I thought this below would work, it did not. Why?
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
imageData.append('profileid', <?php echo $_SESSION['profileid'];?>);
//Make ajax call here:
$.ajax({
url: '/upload-image-results-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
//leaving out the rest as it doesn't pertain

You could add the profileid in the $.ajax URL parameter instead of adding it in FormData:
$(document).ready(function (e) {
$('#uploadImageForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "/upload-image-results-ajax.php?profileid=<?= $_SESSION['profileid']; ?>",
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response){
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}));
$('#uploadImage').on("change", function() {
$("#uploadImageForm").submit();
});
});
Don't forget to place session_start(); at the beginning of your code.

Post array using formData

I am trying to add images, few string information and array using formData. I can successfully add images, string but can't add array information while adding. It always passes array as a string.Any help would be appreciated. My code
var reader = new FileReader();
var form_data = new FormData();
form_data.append('departure_city',departure_city);
form_data.append('inclusion_icons', inc_icons);
form_data.append('theme_icons',theme_icons);
$.ajax({
url: url,
type: "POST",
async: false,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',
data: form_data,
}).done(function (data) {
console.log("Success");
console.log(data);
}).fail(function (data) {
console.log("Error");
console.log(data);
});
inclusion_icons and theme_icons are arrayz, however I'm getting them as a string.

Saving tinyMCE value before submiting to php

I am trying to accomplish this. it does work but I have to submit the form twice before tinyMCE value get stored.
$("form#data").on('submit',function(e){
e.preventDefault();
tinymce.init({
selector: "textarea",
statusbar: false,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
var formData = new FormData($(this)[0]);
$.ajax({
url: 'includes/new_post.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
The Ajax part of the code works perfectly its just that the form like wise other forms but the tinyMCE text area wont submit on first go. if i click the button twice then it will save please assist.

Looks like you're doing the initializing in the wrong place.
The first time you submit the form, the tinymce gets initialized. Instead you should initialize it on page load.

you should do it like this:
tinymce.init({
selector: "textarea",
statusbar: false,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
$("form#data").on('submit',function(e){
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'includes/new_post.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});

Is it possible to send entire form including the files to server using jquery/ajax?

Is it possible to submit entire form (all the fields including fileupload) to server (webmethod or handler etc) using Jquery/Ajax? If yes, how?
ASPX:
$.ajax({
type: "POST",
url: "SupplierBidding.aspx/SubmitBid",
data: JSON.stringify({ id: $('#txtbidderid').val(), bidamt: $('#txtbidamt').val() }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data, status) {
span.fadeIn("slow", function () {
span.text(data.d).fadeOut('slow');
});
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
setTimeout(function () {
btn.prop('disabled', false);
}, 3000);
}
});
}
WebMethod:
[WebMethod]
public static string SubmitBid(string id, string bidamt)
{
//code
return "";
}
I would like to replace data: JSON.stringify({ id: $('#txtbidderid').val(), bidamt: $('#txtbidamt').val() }) with entire form including files also.

You can use Formdata.
FormData Docs
Code example.
var fdata = new FormData();
fdata.append( 'file', input.files[0] );
$.ajax({
url: 'http://yourserver.com/upload.php',
data: fdata,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log('siceess')
}
});

Did you try jQuery Form plugin?
It handles file uploads.
Worked for me before.