integration-examples/src/angularjs-nodejs/index.html at master · FineUploader/integration-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>

<!--

HTML for Fine Uploader UI jQuery (traditional endpoints) that depends on an AngularJS directive.
Maintained by Widen Enterprises.

This example:
 - Styles all buttons, progress bars, etc using Fine Uploader UI.
 - Styles an error message & preview popup using CSS and the native <dialog> element with a polyfill for non-compliant browsers.
 - Displays an on-demand scaled and oriented preview (where supported) in a dialog.
 - Orders a maximum 50x50 thumbnail to be displayed next to each submitted file.
 - Creates a visible drop zone with text (fed by the directive) that is scrollable & restricted in height.
 - Orders the directive to reject files that are not supported images.
 - Orders the directive to reject files that are too large (where supported).
 - Passes all options to the directive via attributes.

Requirements:
 - Fine Uploader 5.4 or 5.5
 - AngularJS 1.5
 - dialog-polyfill 0.4.2

-->

<html ng-app="fineUploaderDirective">
<head>
    <title>Fine Uploader AngularJS Integration Example</title>
    <meta charset="utf-8" />

    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader qq-gallery" ng-attr-qq-drop-area-text="{{dropZoneText}}">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>{{uploadButtonText}}</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                    <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <button class="thumbnail-button">
                        <div class="qq-thumbnail-wrapper">
                            <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                        </div>
                    </button>
                    <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
                    <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                        <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                        Retry
                    </button>

                    <div class="qq-file-info">
                        <div class="qq-file-name">
                            <span class="qq-upload-file-selector qq-upload-file"></span>
                            <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                        </div>
                        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                        <span class="qq-upload-size-selector qq-upload-size"></span>
                        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                            <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                        </button>
                        <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                            <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                        </button>
                        <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                            <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                        </button>
                    </div>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>

</head>
<body>
    <dialog class="large-preview">
        <button title="close" ng-click="closePreview()">X</button>
        <image ng-src="{{largePreviewUri}}" />
    </dialog>

    <div fine-uploader
            upload-server="/uploads"
            not-available-placeholder="node_modules/fine-uploader/fine-uploader/placeholders/not_available-generic.png"
            waiting-placeholder="node_modules/fine-uploader/fine-uploader/placeholders/waiting-generic.png"
            max-file-size="10000000"
            large-preview-size="500"
            allowed-mimes="image/jpeg, image/png, image/gif, image/tiff, image/bmp"
            allowed-extensions='{{["jpeg", "jpg", "png", "gif", "tiff", "tif", "bmp"]}}'></div>

    <link href="node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.min.css" rel="stylesheet" type="text/css"/>
    <link href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css"/>
    <link href="custom.css" rel="stylesheet" type="text/css"/>

    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/fine-uploader/fine-uploader/fine-uploader.js"></script>
    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
    <script src="client.js"></script>
</body>
</html>