Giter Club home page Giter Club logo

attachment-directive's Introduction

Introduction

The purpose of this document is to explain the utility, integration and the use of the omni-attachment directive.

Using the attachment directive

Integrating the directive in the application

To integrate the directive in your angularJS application, you just have to import it in your application by adding the following line in your bower.json :

"omniAttachment": "http://10.10.1.170:10080/os-angularjs/omni-attachement.git",
...

You can then put the directive in anywhere of your html page by using the <omni-attachment></omni-attachment> html tag.

Directive attributes

This directive contain 4 attributes which provide the ability to customization all the operations offered by the directive (upload, download, delete and consultation).

  • id : The id of the entity to whom belongs the attachment
  • class-name : The complete name of the entity class
  • application-name : the name of the application
  • mode : write/read
    • read : offers the possibility to view and download attachments.
    • write : gives access to upload (size < 17MB) and delete attachments functionalities, in addition to what read mode offers.

The directive's rendering

The directive's rendering will appear as follows:

Read mode

Figure 1

You can click on the 'download' icon to download the file or preview it on your browser in case of PDF files.

Read mode

Figure 2

Here you have the possibility to upload, download and delete attachments.

NB: You should specify a name for your file before uploading it.

Directive's features

Auto-localization

The omni-attachment directive relies on the famous pascal precht translate directive to localize its output text. It sets automatically the language to use by looking at your browser preferences, settings ...

NB: Currently, the directive supports only english and french.

Controlling the directive's appearance

A bunch of css classes are available to give you total control of the appearance of all the components of the directive. The following schema shows you which css class controls which part of the directive's rendering.

  • attachment-container : controls the style of the whole container div of the directive

  • attachment-success-message : controls the style of the success message shown after a successful operation

    Figure 3

  • attachment-error-message : controls the style of the error message shown after a failure.

    Figure 4

  • attachment-progressbar : controls the style of the progress bar shown while uploading a file.

    Figure 5

  • Other components:

    Figure 6

attachment-directive's People

Contributors

zios07 avatar

Stargazers

 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.