Rovak / InlineAttachment

Easily paste and upload files/images in plain textareas
http://git.razko.nl/InlineAttachment
MIT License
618 stars 77 forks source link

Binded File Input Support #75

Open lodev09 opened 8 years ago

lodev09 commented 8 years ago

In github comment box, you have the option to drag/drop, paste or select file/images. This plugin lacks the "select" using file input.

I achieved this by directly modifying a dist js (jquery version) by adding the option bindedFileInput. This should trigger the upload when change event occurs on the input element. I'm not that familiar with grunt/npm and don't have the time implement a build so if your kind enough to add this bits of code for me that would be awesome.

init (jquery)

if (typeof options.bindedFileInput != 'undefined') {
  var $input = typeof options.bindedFileInput === 'string' ? $(options.bindedFileInput) : options.bindedFileInput;
  $input.bind('change', function(e) {
    inlineattach.onBindedFileInputChange(e.originalEvent);
  });
}

inside class definition

 /**
 * called on bindedFileInput change event occured
 * @param {Event} e
 * @return {Boolean} if the event was handled
 */
inlineAttachment.prototype.onBindedFileInputChange = function(e) {
  var result = false,
    files = e.target.files || [];

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (this.isFileAllowed(file)) {
      result = true;
      this.onFileInserted(file);
      this.uploadFile(file);
    }
  }

  if (result) { e.preventDefault(); }

  return result;
}

add the option to defaults

/**
 * Binded File Input element to trigger uploaded when changed
 */
bindedFileInput: undefined,

great plugin btw.

kylethielk commented 7 years ago

@lodev09 thanks for posting this. Exactly what I was looking for and worked like a charm.

Rovak commented 7 years ago

I'll add this to version 3.0

lodev09 commented 7 years ago

no problem @kylethielk glad I could help :)