Skip to content

Commit 4a4c63c

Browse files
itaibenariitaibenari
committed
better handling of raw files
1 parent 9542412 commit 4a4c63c

4 files changed

Lines changed: 118 additions & 100 deletions

File tree

‎samples/photo_album/src/main/webapp/WEB-INF/pages/direct_upload_form.jsp‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,13 @@
8383
.off("cloudinarydone").on("cloudinarydone", function (e, data) {
8484
$("#photo_bytes").val(data.result.bytes);
8585
$(".status").text("");
86-
$(".preview").html(
87-
$.cloudinary.image(data.result.public_id, {
88-
format: data.result.format, width: 50, height: 50, crop: "fit"
89-
})
90-
);
86+
if (data.result.resource_type == "image") {
87+
$(".preview").html(
88+
$.cloudinary.image(data.result.public_id, {
89+
format: data.result.format, width: 50, height: 50, crop: "fit"
90+
})
91+
);
92+
}
9193
view_upload_details(data.result);
9294
});
9395
});

‎samples/photo_album/src/main/webapp/WEB-INF/pages/photos.jsp‎

Lines changed: 84 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -45,89 +45,94 @@ requested transformations. This also shows how to chain transformations -->
4545
<c:forEach items="${photos}" var="photo">
4646
<div class="photo">
4747
<h2>${photo.title}</h2>
48-
<a href="<cl:url storedSrc="${photo.upload}" format="jpg"/>" target="_blank">
49-
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" width="150" height="150" crop="fit" quality="80" format="jpg"/>
50-
</a>
48+
<c:if test="${photo.upload.isImage}">
49+
<a href="<cl:url storedSrc="${photo.upload}" format="jpg"/>" target="_blank">
50+
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" width="150" height="150" crop="fit" quality="80" format="jpg"/>
51+
</a>
5152

52-
<div class="less_info">
53-
<a href="#" class="toggle_info">Show transformations</a>
54-
</div>
53+
<div class="less_info">
54+
<a href="#" class="toggle_info">Show transformations</a>
55+
</div>
5556

56-
<div class="more_info">
57-
<a href="#" class="toggle_info">Hide transformations</a>
58-
<table class="thumbnails">
59-
<td>
60-
<div class="thumbnail_holder">
61-
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="fill" height="150" width="150" radius="10" format="jpg"/>
62-
</div>
63-
<table class="info">
64-
<tr><td>crop</td><td>fill</td></tr>
65-
<tr><td>width</td><td>150</td></tr>
66-
<tr><td>height</td><td>150</td></tr>
67-
<tr><td>radius</td><td>10</td></tr>
68-
</table>
69-
<br/>
70-
</td>
71-
<td>
72-
<div class="thumbnail_holder">
73-
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="scale" height="150" width="150" format="jpg"/>
74-
</div>
75-
<table class="info">
76-
<tr><td>crop</td><td>scale</td></tr>
77-
<tr><td>width</td><td>150</td></tr>
78-
<tr><td>height</td><td>150</td></tr>
79-
</table>
80-
<br/>
81-
</td>
82-
<td>
83-
<div class="thumbnail_holder">
84-
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="fit" height="150" width="150" format="jpg"/>
85-
</div>
86-
<table class="info">
87-
<tr><td>crop</td><td>fit</td></tr>
88-
<tr><td>width</td><td>150</td></tr>
89-
<tr><td>height</td><td>150</td></tr>
90-
</table>
91-
<br/>
92-
</td>
93-
<td>
94-
<div class="thumbnail_holder">
95-
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="thumb" gravity="face" height="150" width="150" format="jpg"/>
96-
</div>
97-
<table class="info">
98-
<tr><td>crop</td><td>thumb</td></tr>
99-
<tr><td>gravity</td><td>face</td></tr>
100-
<tr><td>width</td><td>150</td></tr>
101-
<tr><td>height</td><td>150</td></tr>
102-
</table>
103-
<br/>
104-
</td>
105-
<td>
106-
<div class="thumbnail_holder">
107-
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" format="png" angle="20">
108-
<jsp:attribute name="transformation">
109-
<cl:transformation crop="fill" gravity="north" height="150" width="150" effect="sepia"/>
110-
</jsp:attribute>
111-
</cl:image>
112-
</div>
113-
<table class="info">
114-
<tr><td>format</td><td>png</td></tr>
115-
<tr><td>angle</td><td>20</td></tr>
116-
<tr><td colspan="2">and then</td></tr>
117-
<tr><td>crop</td><td>fill</td></tr>
118-
<tr><td>gravity</td><td>north</td></tr>
119-
<tr><td>effect</td><td>sepia</td></tr>
120-
<tr><td>width</td><td>150</td></tr>
121-
<tr><td>height</td><td>150</td></tr>
122-
</table>
123-
<br/>
124-
</td>
125-
</table>
57+
<div class="more_info">
58+
<a href="#" class="toggle_info">Hide transformations</a>
59+
<table class="thumbnails">
60+
<td>
61+
<div class="thumbnail_holder">
62+
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="fill" height="150" width="150" radius="10" format="jpg"/>
63+
</div>
64+
<table class="info">
65+
<tr><td>crop</td><td>fill</td></tr>
66+
<tr><td>width</td><td>150</td></tr>
67+
<tr><td>height</td><td>150</td></tr>
68+
<tr><td>radius</td><td>10</td></tr>
69+
</table>
70+
<br/>
71+
</td>
72+
<td>
73+
<div class="thumbnail_holder">
74+
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="scale" height="150" width="150" format="jpg"/>
75+
</div>
76+
<table class="info">
77+
<tr><td>crop</td><td>scale</td></tr>
78+
<tr><td>width</td><td>150</td></tr>
79+
<tr><td>height</td><td>150</td></tr>
80+
</table>
81+
<br/>
82+
</td>
83+
<td>
84+
<div class="thumbnail_holder">
85+
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="fit" height="150" width="150" format="jpg"/>
86+
</div>
87+
<table class="info">
88+
<tr><td>crop</td><td>fit</td></tr>
89+
<tr><td>width</td><td>150</td></tr>
90+
<tr><td>height</td><td>150</td></tr>
91+
</table>
92+
<br/>
93+
</td>
94+
<td>
95+
<div class="thumbnail_holder">
96+
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" crop="thumb" gravity="face" height="150" width="150" format="jpg"/>
97+
</div>
98+
<table class="info">
99+
<tr><td>crop</td><td>thumb</td></tr>
100+
<tr><td>gravity</td><td>face</td></tr>
101+
<tr><td>width</td><td>150</td></tr>
102+
<tr><td>height</td><td>150</td></tr>
103+
</table>
104+
<br/>
105+
</td>
106+
<td>
107+
<div class="thumbnail_holder">
108+
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" format="png" angle="20">
109+
<jsp:attribute name="transformation">
110+
<cl:transformation crop="fill" gravity="north" height="150" width="150" effect="sepia"/>
111+
</jsp:attribute>
112+
</cl:image>
113+
</div>
114+
<table class="info">
115+
<tr><td>format</td><td>png</td></tr>
116+
<tr><td>angle</td><td>20</td></tr>
117+
<tr><td colspan="2">and then</td></tr>
118+
<tr><td>crop</td><td>fill</td></tr>
119+
<tr><td>gravity</td><td>north</td></tr>
120+
<tr><td>effect</td><td>sepia</td></tr>
121+
<tr><td>width</td><td>150</td></tr>
122+
<tr><td>height</td><td>150</td></tr>
123+
</table>
124+
<br/>
125+
</td>
126+
</table>
126127

127-
<div class="note">
128-
Take a look at our documentation of <a href="http://cloudinary.com/documentation/image_transformations" target="_blank">Image Transformations</a> for a full list of supported transformations.
128+
<div class="note">
129+
Take a look at our documentation of <a href="http://cloudinary.com/documentation/image_transformations" target="_blank">Image Transformations</a> for a full list of supported transformations.
130+
</div>
129131
</div>
130-
</div>
132+
</c:if>
133+
<c:if test="${!photo.upload.isImage}">
134+
<a href="<cl:url storedSrc="${photo.upload}"/>" target="_blank">Non Image File</a>
135+
</c:if>
131136
</div>
132137
</c:forEach>
133138
</c:if>

‎samples/photo_album/src/main/webapp/WEB-INF/pages/upload.jsp‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@
1010
<c:if test="${!empty photo}">
1111
<div class="photo">
1212
<h2>${photo.title}</h2>
13-
<a href="<cl:url storedSrc="${photo.upload}" format="jpg"/>" target="_blank">
14-
<cl:image storedSrc="${photo.upload}" format="jpg" extraClasses="thumbnail inline" />
13+
<a href="<cl:url storedSrc="${photo.upload}"/>" target="_blank">
14+
<c:if test="${photoUpload.isImage}">
15+
<cl:image storedSrc="${photo.upload}" extraClasses="thumbnail inline" />
16+
</c:if>
17+
<c:if test="${!photoUpload.isImage}">
18+
Non image file
19+
</c:if>
1520
</a>
1621
</div>
1722
</c:if>

‎samples/photo_album/src/main/webapp/WEB-INF/pages/upload_form.jsp‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,33 @@
1616
<form:errors path="title" extraClasses="error" />
1717
</div>
1818
</div>
19-
<c:if test="${!empty photoUpload.publicId}">
20-
<div class="form_line">
21-
<label>Image:</label>
22-
<div class="form_controls">
23-
<c:if test="${photoUpload.isImage}">
24-
<img src="${photoUpload.thumbnailUrl}"/>
25-
</c:if>
26-
<c:if test="${!photoUpload.isImage}">
27-
<a href="${photoUpload.url}">${photoUpload.publicId}</a>
28-
</c:if>
29-
</div>
30-
</div>
31-
</c:if>
32-
<c:if test="${empty photoUpload.thumbnailUrl}">
19+
20+
<c:if test="${empty photoUpload.publicId}">
3321
<div class="form_line">
3422
<label for="file">Image:</label>
3523
<div class="form_controls">
3624
<input type="file" name="file" id="file"/>
3725
</div>
3826
</div>
3927
</c:if>
28+
<c:if test="${!empty photoUpload.publicId}">
29+
<c:if test="${photoUpload.isImage}">
30+
<div class="form_line">
31+
<label>Image:</label>
32+
<div class="form_controls">
33+
<img src="${photoUpload.thumbnailUrl}"/>
34+
</div>
35+
</div>
36+
</c:if>
37+
<c:if test="${!photoUpload.isImage}">
38+
<div class="form_line">
39+
<label>Raw file:</label>
40+
<div class="form_controls">
41+
<a href="<cl:url storedSrc="${photoUpload}"/>">${photoUpload.publicId}</a>
42+
</div>
43+
</div>
44+
</c:if>
45+
</c:if>
4046
<div class="form_line">
4147
<div class="form_controls">
4248
<input type="submit" value="Submit Photo"/>

0 commit comments

Comments
 (0)