Code Monkey home page Code Monkey logo

inlineattachment's Introduction

Inline Attachment 1.2.3 Master Branch Build Status project status

Adds upload functionality to a textarea or CodeMirror instance by either drag-dropping or pasting (only in chrome) an image inside it.

It mimics the comment system on issues which is used on Github.

demo

Download

The most recent minified versions can be found here

Usage

Configuration

All versions can be configured using the following options:

{
    /**
     * URL which handles the data
     */
    uploadUrl: 'upload_attachment.php',

    /**
     * Name of the POST field where the file will be sent.
     * Defaults to 'file'.
     */
    uploadFieldName: 'file',

    /**
     * Name of the field from the response where the file can be downloaded.
     * Defaults to 'filename'
     */
    downloadFieldName: 'file',

    // List of allowed MIME types
    allowedTypes: [
        'image/jpeg',
        'image/png',
        'image/jpg',
        'image/gif'
    ],

    /**
     * Will be inserted on a drop or paste event
     */
    progressText: '![Uploading file...]()',

    /**
     * When a file has successfully been uploaded the last inserted text
     * will be replaced by the urlText, the {filename} tag will be replaced
     * by the filename that has been returned by the server
     */
    urlText: "![file]({filename})",

    /**
     * When a file is received by drag-drop or paste
     *
     * @param {Blob} file
     */
    onReceivedFile: function(file) {},

    /**
     * When a file has succesfully been uploaded
     *
     * @param {Object} json JSON data returned from the server
     */
    onUploadedFile: function(json) {}

    /**
     * Custom upload handler, must return false to prevent default handler.
     * Can be used to send file via custom transport(like socket.io)
     *
     * @param {Blob} file
     * @return {Boolean} when false is returned it will prevent default upload behavior
     */
    customUploadHandler: function(file) { return true; }
}

jQuery

$('textarea').inlineattach(options);

CodeMirror

var editor = CodeMirror.fromTextArea(document.getElementById("textarea_editor"));
inlineAttach.attachToCodeMirror(editor, options);

Input field

inlineAttach.attachToInput(document.getElementById('inputfield'), options);

Handling image uploads

The Demo folder contains an example in PHP on how to handle uploads.

Build

To build the project you need node, npm and grunt installed. These tools can be installed on Ubuntu as follows:

Follow the Node.js guide: Node.js installation

Go to the project folder and run the following:

npm install
grunt

This should build the project and the files will appear in the dist/ folder

Changelog

1.2.3 (04-03-2012)

  • Updated Grunt.js tasks

1.2.2 (04-03-2012)

  • Fixed some documentation errors

1.2.1 (04-03-2013)

  • Added onUploadedFile callback (ROMB)

1.2.0 (27-02-2013)

  • Added 201 code on upload to make it compatible with a REST create response
  • Now supports custom field names for upload
  • Added default filename for Chrome's paste
  • Better newline handling for pastes

Thanks to micho for this patch!

1.1.1 (22-02-2013)

  • Fixed paste, drag & drop and CodeMirror events in Firefox

1.1.0 (05-01-2013)

  • Changed options parameters, upload_url to uploadUrl and allowed_types to allowedTypes.
  • Added onReceivedFile and onUploadedFile hooks.
  • Changed the way different editors are handled.
  • The markdown syntax can now be replaced by changing the progressText and urlText options.

1.0.0 (30-12-2012)

  • Markdown, jQuery, Codemirror and standard Textarea support.

inlineattachment's People

Contributors

romb avatar

Watchers

Pablo Villalba avatar James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.