jihaduploader

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

<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