Codeiginter - do_upload "File not selected" - codeigniter

Question

I'm trying to upload an image from a WYSIWYG textarea (TinyMCE), but it's not working, it gives me the error "File not selected".
I'm using multipart form, is it conflicting with other "input file" ?
Thanks.
Here is the code i'm using.
View (.twig)
{{ form_open_multipart() }}
...
<div class="form-group">
<label class="col-sm-2 control-label">Texto</label>
<div class="col-sm-10">
{{ form_textarea('text',set_value('text') ? set_value('text') : post.text|raw,'class="form-control editor"') }}
<input name="image" type="file" id="upload_img_wysiwyg" class="hidden" onchange="">
</div>
</div>
{{ form_close() }}
Controller
public function upload_image_tinymce() {
//Check whether user upload picture
if (!empty($_FILES['image']['name'])) {
$config['upload_path'] = ADDONPATH.'themes/escolamagica/img/escolamagica-blog/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';
$config['file_name'] = $_FILES['image']['name'];
$config['overwrite'] = TRUE;
$config['max_size'] = '10240';
$config['max_width'] = '10000';
$config['max_height'] = '10000';
$this->load->library('upload', $config);
$this->upload->initialize($config);
if ($this->upload->do_upload('image')) {
$picture = str_replace('\\', '/', base_url().'img/escolamagica-blog/'.$_FILES['image']['name']);
} else {
echo 'CONFIG';
var_dump($config);
echo 'IMAGE';
var_dump($_FILES);
echo 'ERROR';
$error = array('error' => $this->upload->display_errors());
var_dump($error);
die;
$picture = '';
}
} else {
$picture = '';
}
return $picture;
}
Javascript
function initImageUpload(editor) {
// create input and insert in the DOM
var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
$(editor.getElement()).parent().append(inp);
// add the image upload button to the editor toolbar
editor.addButton('imageupload', {
text: '',
icon: 'image',
onclick: function(e) { // when toolbar button is clicked, open file select modal
inp.trigger('click');
}
});
// when a file is selected, upload it to the server
inp.on("change", function(e){
uploadFile($(this), editor);
});
}
function uploadFile(inp, editor) {
var input = inp.get(0);
var data = new FormData();
data.append('image[file]', input.files[0]);
$.ajax({
url: BASE_URL + 'admin/blog/upload_image_tinymce',
type: 'POST',
data: data,
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success: function(data, textStatus, jqXHR) {
console.log(data);
editor.insertContent('<img class="content-img" src="' + data.url + '"/>');
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.responseText) {
errors = JSON.parse(jqXHR.responseText).errors
alert('Error uploading image: ' + errors.join(", ") + '. Make sure the file is an image and has extension jpg/jpeg/png.');
}
}
});
}
tinymce.init({
language: "pt_PT",
language_url: BASE_URL + "/admin/js/pt_PT.js",
selector: ".editor",
height: 600,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link imageupload",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: !0,
setup: function(editor) {
initImageUpload(editor);
}

Answer 1

You are using a different index for the upload in your form and the tinyMce image upload. Your html form has file input with the name "image". But your MCE ajax file upload has the name "pic". So, in your controller function upload_image_tinymce() replace $_FILES['image'] with $_FILES['pic']
Use this in controller :
public function upload_image_tinymce() {
//Check whether user upload picture
if (!empty($_FILES['pic']['name'])) {
$config['upload_path'] = ADDONPATH.'themes/escolamagica/img/escolamagica-blog/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';
$config['file_name'] = $_FILES['pic']['name'];
$config['overwrite'] = TRUE;
$config['max_size'] = '10240';
$config['max_width'] = '10000';
$config['max_height'] = '10000';
$this->load->library('upload', $config);
$this->upload->initialize($config);
if ($this->upload->do_upload('pic')) {
$picture = str_replace('\\', '/', base_url().'img/escolamagica-blog/'.$_FILES['pic']['name']);
} else {
echo 'CONFIG';
var_dump($config);
echo 'IMAGE';
var_dump($_FILES);
echo 'ERROR';
$error = array('error' => $this->upload->display_errors());
var_dump($error);
die;
$picture = '';
}
} else {
$picture = '';
}
return $picture;
}