CODEWITHSUNDEEP
javascriptphpjqueryfile-upload
Taylor
Taylor

Reputation: 3141

Image Upload Not Working (Froala Editor)

I have read the Froala Help Docs over 10 times now. I still can't get it to work :(

When I click the upload icon in my editor and select an image to upload, nothing happens. The dialog box that asks you to choose an image pops up, and after selecting the image, it dismisses but nothing happens on the page afterwards.

It's definitely something wrong with my code. However, I can't figure out what it is.

My view page:

<textarea id="edit" name="message"> </textarea>

My js:

 $(function() {
      $('#edit').editable({
          height: 400,
          imageUploadURL: '/assets/upload_image.php',
          imageUploadParams: {id: "edit"},
          imageUploadParams: {id: "edit"},
          placeholder: "Write something...",
          inlineMode: false
      })
  });

My upload_image.php file:

    <?php
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png");

// Get filename.
$temp = explode(".", $_FILES["file"]["name"]);

// Get extension.
$extension = end($temp);

// An image check is being done in the editor but it is best to
// check that again on the server side.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

if ((($mime == "image/gif")
        || ($mime == "image/jpeg")
        || ($mime == "image/pjpeg")
        || ($mime == "image/x-png")
        || ($mime == "image/png"))
    && in_array($extension, $allowedExts)) {
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;

    // Save file in the uploads folder.
    move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "http://localhost/assets/uploads/" . $name);

    // Generate response.
    $response = new StdClass;
    $response->link = "http://localhost/assets/uploads/" . $name;
    echo stripslashes(json_encode($response));
}

What I have tried to fix this issue:

In upload_image.php, I have replaced the upload folder path (original: http://localhost/assets/uploads/ to just uploads and created an uploads folder in that directory. Still no luck.

I have tried placing all the files together in the same folder but no luck.

Any help is highly appreciated.

Upvotes: 2

Views: 5383

Answers (2)

Cesar Bielich
Cesar Bielich

Reputation: 4945

I am going to add an answer here because for one Froala's documentation is terrible. I had experienced multiple issues with both image and file uploads and spent many hours going crazy till after a few weeks I finally figured out the issue and hope this can help someone else.

First

fileAllowedTypes: ['*']

documentation

The following Froala specifies that this option will allow any file type to be uploaded...wrong. The thing that Froala is not telling you is that in order to be able to upload any file type you have to specify the extension of the file as well as the MIME-type. If you don't reguardless of this option it will not work. It will only allow PDF and TXT.

What to do

When you download the Froala SDK you need to head over to

wysiwyg-editor-php-sdk-master/lib/FroalaEditor/File.php //for File upload

and

wysiwyg-editor-php-sdk-master/lib/FroalaEditor/Image.php //for Image upload

In those files you will see something like

'allowedExts' => array('zip', 'txt', 'pdf'),
'allowedMimeTypes' => array(
      'text/plain',
      'application/pdf',
      'application/zip'
)

This is where you need to add your extensions and MIME-types that you want to allow. You must specify both the extension and MIME-type of the file.

If you are having trouble finding the MIME-type of a particular file just use this site.

I am guessing that this might apply to other languages as well or at least be a similar solution but I can confirm this for php

Hope this helps someone out in the future.

Upvotes: 1

Shailesh Prajapati
Shailesh Prajapati

Reputation: 31

I have gone through the same issue and I am sharing working code for you.

index.php

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/froala_editor.css">
   <style>
    body {
      text-align: center;
    }
    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }
  </style>
</head>

<body>
  <div id="editor">
    <form method="post">
      <textarea id='edit' name='edit' style="margin-top: 30px;" placeholder="Type some text">
        <h1>Textarea</h1>
        <p>The editor can also be initialized on a textarea.</p>
      </textarea>

      <input name="submit" type="submit">
    </form>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/froala_editor.min.js"></script>  
  <script type="text/javascript" src="js/plugins/image.min.js"></script>    
  <script>
      $(function() {
        $('#edit').froalaEditor({
          height: 300
        })
      });
  </script>
</body>
</html>

upload_image.php

<?php
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png");

// Get filename.
$temp = explode(".", $_FILES["file"]["name"]);

// Get extension.
$extension = end($temp);

// An image check is being done in the editor but it is best to
// check that again on the server side.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

/* if you want to check extension of a file, then please remove the below if condition */
/*if ((($mime == "image/gif")
|| ($mime == "image/jpeg")
|| ($mime == "image/pjpeg")
|| ($mime == "image/x-png")
|| ($mime == "image/png"))
&& in_array($extension, $allowedExts)) {*/
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;

    // Save file in the uploads folder.
    move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/" . $name);

    // Generate response.
    $response = new StdClass;
    $response->link = "http://localhost/test/editor-3/html/uploads/" . $name;
    echo stripslashes(json_encode($response));
//}
?>

Now Open included javascript file image.min.js and just find and change the imageUploadURL parameter to url of your upload_image.php file, in my case, it is:

imageUploadURL: "http://localhost/test/editor-3/html/upload_image.php",

Upvotes: 2

Related Questions