CODEWITHSUNDEEP
angularjsnode.jsexpresstinymce
Saeed
Saeed

Reputation: 5488

uploading images with tinymce to server

upload handler

i am going to write an upload handler for tinemce in server-side, after a lot searching, i find this example with PHP,

https://www.tinymce.com/docs/advanced/php-upload-handler/

i need this handler in NodeJs

my html code:

<textarea ui-tinymce="X.tinymceOptions" ng-model="X.lessonBody"></textarea>
<input name="image" type="file" id="upload" style="display:none;" onchange="">

initialling of tinymce in controller:

this.tinymceOptions = {
      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 imagetools codesample toc',
      toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
      image_advtab: true,
      image_title: true,
      // enable automatic uploads of images represented by blob or data URIs
      automatic_uploads: true,
      // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
      // here we add custom filepicker only to Image dialog
      file_picker_types: 'image',
      images_upload_url: '/upload',
      file_picker_callback: function (callback, value, meta) {
        if (meta.filetype == 'image') {
          $('#upload').trigger('click');
          $('#upload').on('change', function () {
            var file = this.files[ 0 ];
            var reader = new FileReader();
            reader.onload = function (e) {
              callback(e.target.result, {
                alt: ''
              });
            };
            reader.readAsDataURL(file);
          });
        }
      }
    };

and my request handler in server(using express js):

app.post('/upload', function (req, res) {

  var A= 1;
  var B= 1;
  var C= 1;

  var folderName = path.join(__dirname, '../client/X-' + A);

  if (!fs.existsSync(folderName)) {
    fs.mkdir(folderName, function (err) {
      if (err) {
        console.log(err);
      }
      else {

      }
    });
  }
  else {
    if (!req.files) {
      return res.status(400).send('No files were uploaded.');
    }
    console.log(req.files.file.mimetype);
    console.log(req.files.file.data.byteLength);
    var sampleFile = req.files.file;
    sampleFile.mv(path.join(__dirname, '../', 'client/', 'test.jpg'), function (err) {
      var temp = path.join(__dirname, '../', 'client/', 'test.jpg');
      mime.lookup(path.join(__dirname, '../', 'client/', 'test.jpg'));         // => 'text/plain'
      if (err) {
        return res.status(500).send(err);
      }
      res.send({ 'location': '../test.jpg' });
    });
  }
});

Upvotes: 3

Views: 2284

Answers (1)

Saeed
Saeed

Reputation: 5488

i add these line of codes in server side, and the file successfully uploaded:

var fileUpload = require('express-fileupload');
var mime = require('mime');
app.use(fileUpload({}));

Upvotes: 2

Related Questions