CODEWITHSUNDEEP
phpimageuploadnicedit
dab
dab

Reputation: 51

NicEdit: Picture upload to own server doesn't work -> configuration wrong?

I have a problem regarding the nicEditor for textareas, to be more precise; the picture upload button.

My file index.php contains the where the nicEditor is called. In the same folder are two other folders: "images", where I want to store the files in and "includes", where nicEdit.js and nicUpload.php (which contains the Upload Code provided from the official site) are.

My problem is: When I want to upload a picture via nicEdit, the error message "Failed to upload image." appears, although I have set the follwoing parameters:

I wasted hours just doing try and error but I wasn't able to get any positive results doing so...

[edit]:

When I upload a bigger file, I can see the upload bar progessing, but as soon as it is complete, the "Failed to upload image" appears

the code in nicEdit.js includes:

var nicUploadButton=nicEditorAdvancedButton.extend({nicURI:'includes/nicUpload.php',errorText:"Failed to upload image",addPane:function ......

Upvotes: 4

Views: 12571

Answers (6)

Dinesh Gurjar
Dinesh Gurjar

Reputation: 528

When uploading to image on same server i also got this error [object ProgressEvent] because Access to XMLHttpRequest at 'http://example.com/upload-editor-images' from origin 'http://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Solution: change nicURI:"http://example.com/upload-editor-images" to nicURI:"upload-editor-images"

Upvotes: 0

Alejandro Cumpa
Alejandro Cumpa

Reputation: 2363

None of the answers work for me, so I made a PHP uploader file that retrieves almost the same object that imgur does.

This is the file:

uploader.php

<?php
require_once 'controllers/utils.php';

$target_image_dir = "views/images/inner_img/";
$target_file = ""; 

$response =  array('data' => [], 'success' => false, "status" =>499 );
$fotoLink = json_encode($_FILES);

if(!empty($_FILES["image"]['tmp_name'])){
        $imagen = $_FILES["image"];                     
        list($width, $height) = getimagesize($imagen['tmp_name']);
        $imageFileType = pathinfo($imagen["name"],PATHINFO_EXTENSION);
        $fileNameCoded = uniqid('', false).'.'. strtolower($imageFileType);
        $target_file = $target_image_dir.$fileNameCoded;
        $fotoLink = $target_file;        


       if (move_uploaded_file($imagen["tmp_name"], $target_file)){
            strtolower($imageFileType));    
            $littleImage = '/views/images/inner_img/'.$fileNameCoded;
            $fotoLink = SITE_URL.$littleImage;

            $data = array( "type"=> "image/".strtolower($imageFileType),                                    
                            "width"=> $width ,
                            "height"=> $height,                            
                            "name"=> "",                      
                            "link"=> $fotoLink);
            $response =  array('data' => $data, 'success' => true, "status" => 200 );
        }
}

$response =  array('data' => $data, 'success' => true, "status" => 200);

echo json_encode($response);

The utils.php check Image attrs:

utils.php

define('KB', 1024);
define('MB', 1048576);
define('GB', 1073741824);
define('TB', 1099511627776);
define('semana',  array('','Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado','Domingo'));

function checkImageAttrs($image, $targeFile)
{
    if(getimagesize($image["tmp_name"]) === false)
    {      
        return "El archivo de el archivo no es una imagen.";
    }

    if ($image["size"] > 10*MB) 
    {
       return "Ups, el archivo es muy grande.";        
    }

    $imageFileType = pathinfo($image["name"],PATHINFO_EXTENSION);

    if($imageFileType!="jpg" && $imageFileType!="png" && $imageFileType!="jpeg"  && $imageFileType!="gif" )
    {
        return "Ups, sólo están permitidos los archivos de tipo JPG, JPEG, PNG y GIF.";
    }

   return "OK";
}

function randomPassword($characters_count) {
    $alphabet = "abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ0123456789";
    $pass = array(); //remember to declare $pass as an array
    $alphaLength = strlen($alphabet) - 1; //put the length -1 in cache
    for ($i = 0; $i < $characters_count; $i++) {
        $n = rand(0, $alphaLength);
        $pass[] = $alphabet[$n];
    }
    return implode($pass); //turn the array into a string
}

WARNING: I am sure this is not secure enough if you will use this as a open uploader, but I had to do this for a restricted page, so it's doing the job.

This is working with the Version 0.9 r25 downloaded from : http://nicedit.com/download.php

Upvotes: 0

LikeItSimple
LikeItSimple

Reputation: 1

The simple solution still works with revision 25 (compressed). The res array is to replace, like mentioned above. Be sure about the correct syntax.
There is also some limit to the filesize - actually 2M. Try to change it in the code or the file. And do not forget to create the upload folder first and to add the correct link.
Hope this helps someone. Stay calm.

Upvotes: 0

LikeITSimple
LikeITSimple

Reputation: 1

If you are uploading from a htaccess protected zone, you have to delete the 

C.setRequestHeader("Authorization","Client-ID c37fc05199a05b7");

...in the var nicUploadButton to avoid a prompt popping up, not taking your login values. Seems to work now.

Upvotes: 0

Fabio Sodre
Fabio Sodre

Reputation: 349

Solution Simple!!!

1 - CREATE FILE image.php and paste code:

<?php
//Check if we are getting the image
if(isset($_FILES['image'])){
        //Get the image array of details
        $img = $_FILES['image'];       
        //The new path of the uploaded image, rand is just used for the sake of it
        $path = "upload/" . rand().$img["name"];
        //Move the file to our new path
        move_uploaded_file($img['tmp_name'],$path);
        //Get image info, reuiqred to biuld the JSON object
        $data = getimagesize($path);
        //The direct link to the uploaded image, this might varyu depending on your script location    
        $link = "http://$_SERVER[HTTP_HOST]"."/nicedit/".$path;
        //Here we are constructing the JSON Object
        $res = array("upload" => array(
                                "links" => array("original" => $link),
                                "image" => array("width" => $data[0],
                                                 "height" => $data[1]
                                                )                              
                    ));
        //echo out the response :)
        echo json_encode($res);
}
?>

2 - Open and edit nickedit.js:

Find the line starting like nicURI:"http://api.imgur.com/2/upload.json" 
Replace it with

nicURI:"image.php"


DONE ! Now try uploading something and it would go directly to your server :)

Font: http://manzzup.blogspot.com.br/2014/03/customize-nicedit-image-upload-to.html

Upvotes: 6

Ben
Ben

Reputation: 329

nicEdit developers did something bad.

They updated a version of nicUpload.js for the imgur.com, which is incompatible with nicUpload.php. When you download the lib from their page the server simply include the imgur version into nicEdit.js.

I figure out how to make this work.

Checkout their svn repository on version 23

  svn checkout http://svn.nicedit.com//trunk/nicUpload/
  svn update -r 23

Edit the uncompressed version of nicEdit.js, delete code between

/* START CONFIG */
var nicUploadOptions = {
    buttons : {
        'upload' : {name : 'Upload Image', type : 'nicUploadButton'}
    }

and

nicEditors.registerPlugin(nicPlugin,nicUploadOptions);

Paste nicUpload.js from nicUpload/ you got from svn.

And delete this line:

/* NICEDIT_REMOVE_START */,iconFiles : {'upload' : 'src/nicUpload/icons/upload.gif'}/* NICEDIT_REMOVE_END */

Upvotes: 3

Related Questions