Codeiginter - do_upload "Datei nicht ausgewählt"

Question

Ich versuche ein Bild von einem WYSIWYG Textbereich (TinyMCE) hochzuladen, aber es funktioniert nicht, es gibt mir den Fehler "Datei nicht ausgewählt".

Ich verwende mehrteilige Form, widerspricht es anderen "Eingabedatei"?

Danke.

Hier ist der Code, den ich verwende.

Ansicht (.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() }} 

Steuerung

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

Du einen anderen Index für den Upload in Ihrer Form und dem TinyMCE Bild Upload. Ihr HTML-Formular enthält eine Datei mit dem Namen "image". Aber der Upload Ihrer MCE-Ajax-Datei hat den Namen "pic". Also, upload_image_tinymce() in Ihrer Controller-Funktion ersetzen $_FILES['image'] mit $_FILES['pic']

Verwendung dieses in der Steuerung:

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