https://github.com/asika32764/inline-uploader
A Simple library to support editor image drag & drop upload which like Github issues.
https://github.com/asika32764/inline-uploader
ace-editor code-editor codemirror drop-upload editor image-upload upload
Last synced: 11 months ago
JSON representation
A Simple library to support editor image drag & drop upload which like Github issues.
- Host: GitHub
- URL: https://github.com/asika32764/inline-uploader
- Owner: asika32764
- Created: 2016-02-19T07:54:47.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-04-04T21:14:10.000Z (about 10 years ago)
- Last Synced: 2025-06-13T07:11:25.638Z (12 months ago)
- Topics: ace-editor, code-editor, codemirror, drop-upload, editor, image-upload, upload
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Inline Uploader
A Simple library to support editor image drag & drop upload which like Github issues.
This library is a fork of https://github.com/Rovak/InlineAttachment and add some advanced features.
## Installation
Use bower
``` json
bower install inline-uploader
```
Or [download](https://github.com/asika32764/inline-uploader/releases) this package and include it.
## Support Editors
- ACE
- CodeMirror
## How to Use
### ACE Example
You must include `inline-uploader.js` and `adapter/ace-adapter.js` first.
``` javascript
var editor = ace.edit('my-editor');
var options = {
url: 'upload.php'
};
InlineUploader.init(new InlineUploader.AceAdapter(editor), options);
```
## Default Options
``` javascript
{
/**
* URL to upload the attachment
*/
url: 'upload.php',
/**
* Upload HTTP method used
*/
method: 'POST',
/**
* Request field name where the attachment will be placed in the form data
*/
field: 'file',
/**
* Add the file to the form data before adding the extra parameters
* (alternative being to add the file after the extra parameters)
*/
addFileBeforeExtraParameters: true,
/**
* Where is the filename placed in the response
*/
downloadFieldName: 'filename',
/**
* Where is the name placed in the response
*/
downloadLabelName: 'name',
/**
* Allowed types
*/
allowedTypes: [
'image/jpeg',
'image/png',
'image/jpg',
'image/gif'
],
/**
* Will be inserted on a drop or paste event
*/
progressText: '![Uploading... {name}]()',
/**
* 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: "",
/**
* Text for default error when uploading
*/
errorText: "Error uploading file",
/**
* Extra parameters which will be send when uploading a file
*/
extraParams: {},
/**
* Extra headers which will be send when uploading a file
*/
headers: {},
/**
* When a file is received by drag-drop or paste
*
* @param {Blob} file
* @param {Event} event
*
* @returns {string} The modified file name as id to replace upload progress text.
*/
onFileReceived: null,
/**
* Custom upload handler
*
* @param {Blob} file
* @param {string} name
*/
uploadHandler: null,
/**
* Custom error handler. Runs after removing the placeholder text and before the alert().
* Return false from this function to prevent the alert dialog.
*/
errorHandler: null,
/**
* Custom response parser
*
* @param {XMLHttpRequest} xhr
*
* @returns {Object} containing a parsed version of the response
* or a false value will default back to parsing the response as JSON
*/
responseParser: null,
/**
* When a file has successfully been uploaded
*
* @param {Object} data The data from remote response.
* @param {string} name The file id name to replace progress text.
*/
onFileUploaded: null
}
```