# jihaduploader

> Uploader for apishka/framework-js/JihadForm

Latest version **1.3.16** (published 2017-05-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install jihaduploader
pnpm add jihaduploader
yarn add jihaduploader
bun add jihaduploader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.16 |
| Published | 2017-05-23 |
| First published | 2016-11-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | stepanmas |
| Maintainers | stepanmas |

## Links

- npm: https://www.npmjs.com/package/jihaduploader
- Repository: https://github.com/stepanmas/jihaduploader
- Homepage: https://github.com/stepanmas/jihaduploader#readme
- Issues: https://github.com/stepanmas/jihaduploader/issues
- npm.io page: https://npm.io/package/jihaduploader

## Dependencies (5)

- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [blueimp-load-image](https://npm.io/package/blueimp-load-image.md) ^2.12.2
- [blueimp-file-upload](https://npm.io/package/blueimp-file-upload.md) ^9.18.0
- [apishka-framework-js](https://npm.io/package/apishka-framework-js.md) ^1.3.12

## Recent versions

- 1.3.16 (latest) — 2017-05-23
- 1.3.15 — 2017-04-12
- 1.3.14 — 2017-04-12
- 1.3.13 — 2017-03-15
- 1.3.12 — 2017-03-15
- 1.3.11 — 2017-03-15
- 1.3.10 — 2017-02-23
- 1.3.9 — 2017-02-23
- 1.3.8 — 2017-02-22
- 1.3.6 — 2017-02-22
- 1.3.5 — 2017-02-21
- 1.3.4 — 2017-02-19
- 1.3.3 — 2017-02-19
- 1.3.2 — 2017-02-17
- 1.3.1 — 2017-02-16
- … 61 more at https://npm.io/package/jihaduploader/versions

## README

###JihadUploader:

Use for upload files to the server, using JihadForm.

    npm install jihaduploader --save-dev

- - - -

####Include dependence:

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
              integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="jihaduploader.css"/>
    <link rel="stylesheet" href="node_modules/apishka-framework-js/dist/css/apishka-js.css"/>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/blueimp-load-image/js/load-image.all.min.js"></script>
    <script src="node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="node_modules/blueimp-load-image/js/load-image.all.min.js"></script>
    <script src="node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.js"></script>
    <script src="node_modules/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>
    <script src="node_modules/blueimp-file-upload/js/jquery.fileupload-process.js"></script>
    <script src="node_modules/blueimp-file-upload/js/jquery.fileupload-image.js"></script>
    <script src="node_modules/apishka-framework-js/dist/js/apishka-js.js"></script>
    
    <script src="jihaduploader.js"></script>
- - - -

####Base use
    
    <div class="JihadUploader" data-ext="(jpe?g|png)$" data-url="{url for save}">
        <div class="JihadUploader-btn">Choose <input type="file" name="file"></div>
        <div class="JihadUploader-list">List items</div>
    </div>
   
    <script type="text/template" id="tpl-JihadUploader-item">
        <div class="JihadUploader-item" id="[[=it.id]]">
            <img src="[[=it.src]]" alt=""/>
            Added: [[=it.now]]
        </div>
    </script>
    
####Params

    data-limit="0"           - set limit upload files
    data-limit-error=""      - error if limit exceeded
    data-max-file="20"       - max size for one file (20MB)
    data-max-file-error=""   - error if file too big
    data-no-upload="true"    - put off upload a files, sending their use submit by form
    data-url=""              - url for upload files
    data-ext=""              - allow files have extensions..
    data-ext-error=""        - error if extension is forbidden
    data-no-speed=""         - don't show speed string when loading
    data-sortable="true"     - items sort use drag and drop
    data-sortable-url=""     - save new a position in server
    data-lng                 - set in order to have formatted a data for tpl
    data-max-width="1920"    - image resize before send to server
    data-max-height="1920"
    
    data-redirect="{some url}"         - redirect to url when success, don't work if there is result.redirect_url
    data-tpl-item="JihadUploader-item" - tpl of item for block it
    
    data-confirm-send=""     - text of confirm dialog if files are not loaded but user wish to send form
    
####Additional options

Add `data-sortable="true"` to div with `.JihadUploader` and include on page [Sortable.js](https://github.com/RubaXa/Sortable)

    <div class="JihadUploader" data-sortable="true" data-sortable-url="..." ...>

In order to delete or rotate image, you need add follow classes for any elements:

    <a href="" data-turn="left" class="JihadUploader-rotate">Turn left</a>
    <a href="" data-turn="right" class="JihadUploader-rotate">Turn right</a>
    <a href="" class="JihadUploader-delete">Delete</a> 
    or <a href="" class="JihadUploader-remove">Delete</a> // alias for delete without style
    
In order to send "form" using default submit (no use ajax submit) you need add property `data-no-upload="true"`.
Warning, don't use `js-ajax-form`!

    <div class="JihadUploader" data-no-upload="true" ...>
        
Set watermark.

    <input type="checkbox" name="" data-var-name="{your var. name or 'use' by default}" data-url="{url to save}">

####Events

Any event has next arguments e, data, block

    JihadUploader-fileChange   - file changed
    JihadUploader-progress     - process uploading
    JihadUploader-invalid      - file is not valid
    JihadUploader-add          - file start add
    JihadUploader-added        - file already added
    JihadUploader-done         - JihadForm method
    JihadUploader-success      - JihadForm method
    JihadUploader-successBlock - Call for block tag, similar with success
    JihadUploader-fail         - JihadForm method
    JihadUploader-error        - JihadForm method
        

####Where use

#####Motors:

 * /ru/registration/dealer/document
 * crm /ru/vehicle/create/rent/car
 
#####Property

 * /en/company/edit?company_id=275
 * /en/company/project
 * /en/company/property
 
#####CRM

 * /property/modify
 * /company/settings
 * /user/settings
 * /company/settings/properties
 
#####Localizer

 * /project/create/section/from/file/2
 * /settings/profile

---
_Source: https://npm.io/package/jihaduploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._