Skip to content

Commit 2427d7a

Browse files
VowowVowow
authored
Merge pull request #86 from sherlockode/feature/improve-drag-&-drop-ui
Improve drag & drop ui
2 parents 226d077 + 9bf4ff6 commit 2427d7a

File tree

3 files changed

+234
-69
lines changed

3 files changed

+234
-69
lines changed

Diff for: ‎Resources/public/css/ajax-uploader.css

+184-53
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,227 @@
1+
.afb_file_container .afb_upload_container {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
16
.afb_file_container .afb_dropzone {
2-
width: 100%;
3-
border: dashed 1px #acacac;
4-
min-height: 80px;
7+
padding: 20px;
58
text-align: center;
9+
cursor: pointer;
10+
border: 2px dashed #EBEDF3;
11+
border-radius: 0.42rem;
12+
}
13+
14+
.afb_file_container .afb_dropzone {
15+
text-align: center;
16+
cursor: pointer;
17+
border: 2px dashed #EBEDF3;
18+
border-radius: 0.42rem;
619
vertical-align: middle;
7-
line-height: 80px;
20+
}
21+
22+
.afb_file_container ul {
23+
list-style-type: none;
24+
}
25+
26+
.afb_file_container .afb_dropzone .afb_dropzone-title {
27+
margin: 2em 0;
28+
font-size: 1rem;
29+
font-weight: 400;
830
}
931

1032
.afb_file_container .afb_dropzone.hover {
1133
border-color: #000;
1234
cursor: copy;
1335
}
14-
.afb_file_container .afb_dropzone > label {
15-
display: block;
16-
}
36+
1737
.afb_file_container .afb_dropzone .afb_file_input {
1838
display: none;
1939
}
2040

21-
.afb_file_container .afb_upload_container {
22-
margin: 20px 0 0;
23-
padding: 0;
24-
list-style: none;
41+
42+
/*without preview option*/
43+
44+
.afb_file_container .afb_upload_container.afb_no_preview .afb_item {
45+
display: flex;
46+
justify-content: flex-start;
47+
margin-top: .75rem;
48+
border-radius: .42rem;
49+
padding: .5rem 1rem;
50+
background-color: #f3f6f9;
51+
}
52+
53+
54+
.afb_file_container .afb_upload_container.afb_no_preview .afb_filename {
55+
flex: 1;
2556
overflow: hidden;
57+
text-overflow: ellipsis;
58+
margin-top: auto;
59+
margin-bottom: auto;
2660
}
2761

28-
.afb_file_container .afb_upload_container .afb_item {
29-
display: block;
30-
margin-bottom: 20px;
62+
.afb_file_container .afb_upload_container.afb_no_preview .afb_remove_file {
63+
text-align: center;
64+
width: 25px;
65+
height: 25px;
66+
border-radius: 50%;
67+
line-height: 25px;
68+
margin: auto;
3169
}
3270

33-
.afb_file_container .upload-details {
34-
min-height: 25px;
35-
overflow: hidden;
71+
.afb_file_container .afb_upload_container.afb_no_preview .afb_file_progress {
72+
width: 100px;
73+
margin-left: 10px;
74+
}
75+
76+
.afb_file_container .afb_upload_container.afb_no_preview .afb_file_progress > div {
77+
width: 0;
78+
height: 100%;
79+
background: #ffb822;
80+
}
81+
82+
.afb_file_container .afb_upload_container.afb_no_preview .afb_item.afb_upload_complete .afb_file_progress > div {
83+
background: #26b89a;
84+
transition: background 1s ease;
85+
}
86+
87+
/*with preview option*/
88+
89+
.afb_file_container .afb_dropzone-preview .afb_item {
90+
position: relative;
3691
display: inline-block;
92+
vertical-align: top;
93+
margin: 16px;
94+
min-height: 100px;
95+
}
96+
97+
.afb_file_container .afb_dropzone-preview .afb_filename {
98+
position: absolute;
99+
top: 40%;
100+
left: 0;
101+
opacity: 0;
102+
font-size: 13px;
103+
min-width: 100%;
104+
max-width: 100%;
105+
text-align: center;
106+
color: rgba(0, 0, 0, 0.9);
107+
line-height: 150%;
37108
}
38109

39-
.afb_file_container .afb_upload_preview .upload-details {
110+
.afb_file_container .afb_dropzone-preview .afb_file_preview {
111+
border-radius: 0.42rem;
112+
overflow: hidden;
113+
width: 120px;
114+
height: 120px;
115+
position: relative;
40116
display: block;
117+
z-index: 10;
41118
}
42119

43-
.afb_file_container .afb_filename {
44-
width: 30%;
120+
.afb_file_container .afb_dropzone-preview .afb_file_preview img {
121+
width: 100%;
122+
height: 100%;
123+
object-fit: cover;
45124
}
46-
.afb_file_container .afb_upload_preview .afb_filename {
47-
width: auto;
125+
126+
.afb_file_container .afb_dropzone-preview .afb_item:hover img {
127+
transform: scale(1.05, 1.05);
128+
filter: blur(8px);
48129
}
49130

50-
.afb_file_container .afb_file_progress {
51-
border: 1px solid #ccc;
52-
height: 25px;
53-
width: 30%;
131+
.afb_file_container .afb_dropzone-preview .afb_item:hover .afb_filename {
132+
opacity: 1;
133+
z-index: 51;
54134
}
55135

56-
.afb_file_container .afb_upload_preview .afb_file_progress {
57-
width: auto;
136+
.afb_file_container .afb_dropzone-preview .afb_filename:not(:hover) {
137+
overflow: hidden;
138+
text-overflow: ellipsis;
139+
white-space: nowrap;
58140
}
59141

60-
.afb_file_container .afb_file_progress > div {
61-
width: 0;
62-
height: 100%;
63-
background: #ffb822;
142+
.afb_file_container .afb_dropzone-preview .afb_item .afb_filename span {
143+
background-color: rgba(255, 255, 255, .8);
144+
padding: 0 0.4em;
145+
border-radius: 3px;
146+
white-space: nowrap;
64147
}
65-
.afb_file_container .afb_file_progress.afb_file_upload_success > div {
66-
background: #26b89a;
148+
149+
.afb_file_container .afb_dropzone-preview.dz-complete .afb_file_progress {
150+
opacity: 0;
151+
transition: opacity 0.4s ease-in;
152+
}
153+
154+
.afb_file_container .afb_dropzone-preview .afb_file_progress {
155+
opacity: 1;
156+
z-index: 100;
157+
pointer-events: none;
158+
position: absolute;
159+
height: 16px;
160+
left: 50%;
161+
top: 50%;
162+
margin-top: -8px;
163+
width: 80px;
164+
margin-left: -40px;
165+
background: rgba(255, 255, 255, 0.9);
166+
border-radius: 8px;
167+
overflow: hidden;
67168
}
68-
.afb_file_container .afb_file_progress.afb_file_upload_error > div {
69-
background: #b83041;
169+
170+
.afb_file_container .afb_dropzone-preview .afb_file_progress > div {
171+
background: #333;
172+
background: linear-gradient(to bottom, #666, #444);
173+
position: absolute;
174+
top: 0;
175+
left: 0;
176+
bottom: 0;
177+
width: 0;
178+
transition: width 300ms ease-in-out;
70179
}
71-
.afb_file_container .afb_upload_preview .afb_remove_file.upload-details {
72-
display: block;
180+
181+
.afb_file_container .afb_dropzone-preview .afb_upload_complete .afb_file_progress {
182+
opacity: 0;
183+
transition: opacity 0.4s ease-in;
73184
}
74-
.afb_file_container .afb_remove_file.upload-details {
75-
text-align: center;
76-
width: 25px;
77-
height: 25px;
78-
background: #eee;
79-
border-radius: 50%;
80-
line-height: 25px;
81-
margin: auto;
185+
186+
.afb_file_container .afb_dropzone-preview .afb_upload_progressing .afb_file_progress {
187+
opacity: 1;
188+
transition: all 0.2s linear;
82189
}
83190

84-
.afb_file_container .afb_preview_item {
191+
.afb_file_container .afb_dropzone-preview .afb_file_success-mark,
192+
.afb_file_container .afb_dropzone-preview .afb_file_error-mark {
193+
pointer-events: none;
194+
opacity: 0;
195+
z-index: 50;
196+
position: absolute;
85197
display: block;
86-
float: left;
87-
width: 33%;
88-
text-align: center;
198+
top: 50%;
199+
left: 50%;
200+
margin-left: -27px;
201+
margin-top: -27px;
89202
}
90203

91-
.afb_file_container .afb_preview_item img {
92-
width: 100%;
93-
height: auto;
204+
.afb_file_container .afb_dropzone-preview .afb_upload_complete .afb_file_success-mark {
205+
opacity: 1;
206+
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
94207
}
95208

209+
.afb_file_container .afb_dropzone-preview .afb_remove_file {
210+
position: absolute;
211+
top: -12.5px;
212+
right: -12.5px;
213+
background-color: #fff;
214+
border-radius: 50%;
215+
box-shadow: 0 0 13px 0 rgba(0, 0, 0, .1);
216+
width: 22px;
217+
height: 22px;
218+
z-index: 20;
219+
cursor: pointer;
220+
display: flex;
221+
align-items: center;
222+
justify-content: center;
223+
}
96224

225+
.afb_file_container .afb_dropzone-preview.afb_dropzone-started .afb_dropzone-title {
226+
display: none;
227+
}

Diff for: ‎Resources/public/js/ajax-uploader.js

+19-4
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,6 @@ let $ = jQuery;
5757
if (!isMultiple) {
5858
if (files.length > 1) {
5959
return alert('You can only upload one file');
60-
} else {
61-
container.find('.afb_dropzone').hide();
6260
}
6361
}
6462
if (isAsync) {
@@ -80,6 +78,11 @@ let $ = jQuery;
8078
}
8179

8280
function uploadFile(file, callback){
81+
let dz = container.find('.afb_dropzone');
82+
if (dz.length && !dz.hasClass('afb_dropzone-started')) {
83+
dz.addClass('afb_dropzone-started');
84+
}
85+
8386
var formData = new FormData(),
8487
xhr = new window.XMLHttpRequest(),
8588
uploadId = uploadCounter;
@@ -98,6 +101,8 @@ let $ = jQuery;
98101
xhr.upload.addEventListener("progress", function(evt) {
99102
var progression = (evt.loaded * 100) / evt.total;
100103
var listItem = container.find('.afb_upload_container .afb_preview_' + uploadId);
104+
105+
listItem.addClass('afb_upload_progressing');
101106
listItem.find('.afb_file_progress > div').css('width', progression + '%');
102107
});
103108
return xhr;
@@ -108,7 +113,11 @@ let $ = jQuery;
108113
processData: false,
109114
data: formData
110115
}).done(function(response) {
111-
var previewElement = $('.afb_preview_' + uploadId);
116+
let previewElement = $('.afb_preview_' + uploadId);
117+
118+
previewElement.addClass('afb_upload_complete');
119+
previewElement.removeClass('afb_upload_progressing');
120+
112121
if (response.id) {
113122
previewElement.find('.afb_remove_file').data('id', response.id);
114123
}
@@ -203,7 +212,7 @@ let $ = jQuery;
203212
function deleteFile(element) {
204213
element.closest('.afb_item').remove();
205214
if (container.find('.afb_item').length === 0) {
206-
container.find('.afb_dropzone').show();
215+
container.find('.afb_dropzone').removeClass('afb_dropzone-started');
207216
}
208217
}
209218

@@ -258,6 +267,12 @@ let $ = jQuery;
258267
return deletePreview(element, true);
259268
});
260269
});
270+
271+
container.on('click', '.afb_dropzone', function(e) {
272+
if (e.currentTarget === e.target || $(e.target).hasClass('afb_upload_container') || $(e.target).hasClass('afb_dropzone-title')) {
273+
$(this).find('.afb_file_input').click();
274+
}
275+
});
261276
});
262277
};
263278
})();

0 commit comments

Comments
 (0)