Proof of concept - Image upload
This commit is contained in:
j2blake
parent
c59076a19a
commit
bf2ed5c339
9 changed files with 248 additions and 63 deletions
73
webapp/web/i18n/all.properties
Normal file
73
webapp/web/i18n/all.properties
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
#
|
||||
# Text strings for the controllers and templates
|
||||
#
|
||||
# Default (English)
|
||||
#
|
||||
save_changes = Save changes
|
||||
cancel_link = Cancel
|
||||
cancel_title = cancel
|
||||
required_fields = required fields
|
||||
or = or
|
||||
alt_error_alert = Error alert icon
|
||||
alt_confirmation = Confirmation icon
|
||||
|
||||
email_address = Email address
|
||||
first_name = First name
|
||||
last_name = Last name
|
||||
roles = Roles
|
||||
status = Status
|
||||
|
||||
ascending_order = ascending order
|
||||
descending_order = descending order
|
||||
select_one = Select one
|
||||
|
||||
type_more_characters = type more characters
|
||||
no_match = no match
|
||||
|
||||
request_failed = Request failed. Please contact your system administrator.
|
||||
|
||||
#
|
||||
# Image upload pages
|
||||
#
|
||||
upload_page_title = Upload image
|
||||
upload_page_title_with_name = Upload image for {0}
|
||||
upload_heading = Photo Upload
|
||||
|
||||
replace_page_title = Replace image
|
||||
replace_page_title_with_name = Replace image for {0}
|
||||
|
||||
crop_page_title = Crop image
|
||||
crop_page_title_with_name = Crop image for {0}
|
||||
|
||||
current_photo = Current Photo
|
||||
upload_photo = Upload a photo
|
||||
replace_photo = Replace Photo
|
||||
photo_types = (JPEG, GIF or PNG)
|
||||
maximum_file_size = Maximum file size: {0} megabytes
|
||||
minimum_image_dimensions = Minimum image dimensions: {0} x {1} pixels
|
||||
|
||||
cropping_caption = Your profile photo will look like the image below.
|
||||
cropping_note = To make adjustments, you can drag around and resize the photo to the right. \
|
||||
When you are happy with your photo click the "Save Photo" button.
|
||||
|
||||
alt_thumbnail_photo = Individual photo
|
||||
alt_image_to_crop = Image to be cropped
|
||||
alt_preview_crop = Preview of photo cropped
|
||||
|
||||
delete_link = Delete photo
|
||||
submit_upload = Upload photo
|
||||
submit_save = Save photo
|
||||
|
||||
confirm_delete = Are you sure you want to delete this photo?
|
||||
|
||||
imageUpload.errorNoURI = No entity URI was provided
|
||||
imageUpload.errorUnrecognizedURI = This URI is not recognized as belonging to anyone: ''{0}''
|
||||
imageUpload.errorNoImageForCropping = There is no image file to be cropped.
|
||||
imageUpload.errorImageTooSmall = The uploaded image should be at least {0} pixels high and {1} pixels wide.
|
||||
imageUpload.errorUnknown = Sorry, we were unable to process the photo you provided. Please try another photo.
|
||||
imageUpload.errorFileTooBig = Please upload an image smaller than {0} megabytes.
|
||||
imageUpload.errorUnrecognizedFileType = ''{0}'' is not a recognized image file type. Please upload JPEG, GIF, or PNG files only.
|
||||
imageUpload.errorNoPhotoSelected = Please browse and select a photo.
|
||||
imageUpload.errorBadMultipartRequest = Failed to parse the multi-part request for uploading an image.
|
||||
imageUpload.errorFormFieldMissing = The form did not contain a ''{0}'' field."
|
||||
|
||||
43
webapp/web/i18n/all_es.properties
Normal file
43
webapp/web/i18n/all_es.properties
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
#
|
||||
# Text strings for the controllers and templates
|
||||
#
|
||||
# Spanish
|
||||
#
|
||||
cancel_link = Cancelar
|
||||
or = o
|
||||
alt_error_alert = Icono de alerta con error
|
||||
|
||||
#
|
||||
# Image upload pages
|
||||
#
|
||||
upload_page_title = Subir foto
|
||||
upload_page_title_with_name = Subir imagen para {0}
|
||||
upload_heading = Subir foto
|
||||
|
||||
replace_page_title = Reemplazar imagen
|
||||
replace_page_title_with_name = Cambie la imagen por {0}
|
||||
|
||||
crop_page_title = Recortar imagen
|
||||
crop_page_title_with_name = Recorte imagen para {0}
|
||||
|
||||
current_photo = Foto actual
|
||||
upload_photo = Suba foto
|
||||
replace_photo = Reemplace foto
|
||||
photo_types = (JPEG, GIF, o PNG)
|
||||
maximum_file_size = Tamaño máximo de archivo: {0} megabytes
|
||||
minimum_image_dimensions = Dimensiones mínimas de imagen: {0} x {1} pixels
|
||||
|
||||
cropping_caption = La foto de tu perfil se verá como la imagen de abajo.
|
||||
cropping_note = Para realizar ajustes, arrastre alrededor y cambie el tamaño de la foto de la derecha. \
|
||||
Cuando esté satisfecho con su foto, haga clic en el botón "Guardar foto".
|
||||
|
||||
alt_thumbnail_photo = Foto de individuo
|
||||
alt_image_to_crop = Imagen que desea recortar
|
||||
alt_preview_crop = Vista previa de la foto recortada
|
||||
|
||||
delete_link = Borrar foto
|
||||
submit_upload = Subir foto
|
||||
submit_save = Guardar foto
|
||||
|
||||
confirm_delete = ¿Seguro que quiere borrar esta foto?
|
||||
|
||||
|
|
@ -4,7 +4,7 @@ $(document).ready(function(){
|
|||
|
||||
// Confirmation alert for photo deletion in image upload and individual templates
|
||||
$('#photoUploadDefaultImage a.thumbnail, a.delete-mainImage').click(function(){
|
||||
var answer = confirm('Are you sure you want to delete this photo?');
|
||||
var answer = confirm(i18n_confirmDelete);
|
||||
return answer;
|
||||
});
|
||||
});
|
||||
|
|
@ -21,20 +21,22 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.cs
|
|||
</#macro>-->
|
||||
|
||||
|
||||
<#assign i18n = i18n() >
|
||||
|
||||
<section id="photoCroppingContainer" role="region">
|
||||
<h2>Photo Upload</h2>
|
||||
<h2>${i18n.upload_heading}</h2>
|
||||
|
||||
<!-- This is the image we're attaching Jcrop to -->
|
||||
<section id="photoCroppingPreview" role="region">
|
||||
|
||||
<p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
|
||||
<p class="photoCroppingTitleBody">${i18n.cropping_caption}</p>
|
||||
|
||||
<section class="photoCroppedPreview" role="region">
|
||||
<img src="${imageUrl}" id="preview" alt="Image to be cropped"/>
|
||||
<img src="${imageUrl}" id="preview" alt="${i18n.alt_image_to_crop}"/>
|
||||
</section>
|
||||
|
||||
<section id="photoCroppingHowTo" role="region">
|
||||
<p class="photoCroppingNote">To make adjustments, you can drag around and resize the photo to the right. When you are happy with your photo click the "Save Photo" button. </p>
|
||||
<p class="photoCroppingNote">${i18n.cropping_note}</p>
|
||||
|
||||
<form id="cropImage" action="${formAction}" method="post" role="form">
|
||||
<!-- Javascript will populate these values -->
|
||||
|
|
@ -43,15 +45,15 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.cs
|
|||
<input type="hidden" name="w" value="" />
|
||||
<input type="hidden" name="h" value="" />
|
||||
|
||||
<input class="submit" type="submit" value="Save photo">
|
||||
<input class="submit" type="submit" value="${i18n.submit_save}">
|
||||
|
||||
<span class="or"> or <a class="cancel" href="${cancelUrl}" title="cancel">Cancel</a></span>
|
||||
<span class="or"> ${i18n.or} <a class="cancel" href="${cancelUrl}" title="${i18n.cancel_title}">${i18n.cancel_link}</a></span>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="photoCropping" role="region">
|
||||
<img src="${imageUrl}" id="cropbox" alt="Preview of photo cropped" />
|
||||
<img src="${imageUrl}" id="cropbox" alt="${i18n.alt_preview_crop}" />
|
||||
</section
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,29 +7,35 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></
|
|||
|
||||
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.css" />')}
|
||||
|
||||
<#assign i18n = i18n() >
|
||||
|
||||
<section id="photoUploadContainer" role="region">
|
||||
<h2>Photo Upload</h2>
|
||||
<h2>${i18n.upload_heading}</h2>
|
||||
|
||||
<#if errorMessage??>
|
||||
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="Error alert icon" />
|
||||
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="${i18n.alt_error_alert}" />
|
||||
<p>${errorMessage}</p>
|
||||
</section>
|
||||
</#if>
|
||||
|
||||
<section id="photoUploadDefaultImage" role="region">
|
||||
<h3>Current Photo</h3>
|
||||
<h3>${i18n.current_photo}</h3>
|
||||
|
||||
<img src="${thumbnailUrl}" width="115" height="115" alt="Individual photo" />
|
||||
<img src="${thumbnailUrl}" width="115" height="115" alt="${i18n.alt_thumbnail_photo}" />
|
||||
</section>
|
||||
|
||||
<form id="photoUploadForm" action="${formAction}" enctype="multipart/form-data" method="post" role="form">
|
||||
<label>Upload a photo <span> (JPEG, GIF or PNG)</span></label>
|
||||
<label>${i18n.upload_photo} <span>${i18n.photo_types}</span></label>
|
||||
|
||||
<input id="datafile" type="file" name="datafile" size="30" />
|
||||
<p class="note">Maximum file size: ${maxFileSize} megabytes<br />
|
||||
Minimum image dimensions: ${thumbnailWidth} x ${thumbnailHeight} pixels</p>
|
||||
<input class="submit" type="submit" value="Upload photo"/>
|
||||
<p class="note">${i18n.maximum_file_size(maxFileSize)}<br />
|
||||
${i18n.minimum_image_dimensions(thumbnailWidth, thumbnailHeight)}</p>
|
||||
<input class="submit" type="submit" value="${i18n.submit_upload}"/>
|
||||
|
||||
<span class="or"> or <a class="cancel" href="${cancelUrl}" title="cancel">Cancel</a></span>
|
||||
<span class="or"> ${i18n.or} <a class="cancel" href="${cancelUrl}" title="${i18n.cancel_title}">${i18n.cancel_link}</a></span>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
i18n_confirmDelete = ${i18n.confirm_delete}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,30 +7,36 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></
|
|||
|
||||
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.css" />')}
|
||||
|
||||
<#assign i18n = i18n() >
|
||||
|
||||
<section id="photoUpload" role="region">
|
||||
<h2>Photo Upload</h2>
|
||||
<h2>${i18n.upload_heading}</h2>
|
||||
|
||||
<#if errorMessage??>
|
||||
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="Error alert icon" />
|
||||
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="${i18n.alt_error_alert}" />
|
||||
<p>${errorMessage}</p>
|
||||
</section>
|
||||
</#if>
|
||||
|
||||
<section id="photoUploadDefaultImage" role="region">
|
||||
<h3>Current Photo</h3>
|
||||
<img src="${thumbnailUrl}" width="115" alt="Individual photo" />
|
||||
<h3>${i18n.current_photo}</h3>
|
||||
<img src="${thumbnailUrl}" width="115" alt="${i18n.alt_thumbnail_photo}" />
|
||||
|
||||
<a class="thumbnail" href="${deleteUrl}">Delete photo</a>
|
||||
<a class="thumbnail" href="${deleteUrl}">${i18n.delete_link}</a>
|
||||
</section>
|
||||
|
||||
<form id="photoUploadForm" action="${formAction}" enctype="multipart/form-data" method="post" role="form">
|
||||
<label>Replace Photo <span> (JPEG, GIF or PNG)</span></label>
|
||||
<label>${i18n.replace_photo} <span>${i18n.photo_types}</span></label>
|
||||
|
||||
<input type="file" name="datafile" size="30">
|
||||
<p class="note">Maximum file size: ${maxFileSize} megabytes<br />
|
||||
Minimum image dimensions: ${thumbnailWidth}x${thumbnailHeight} pixels</p>
|
||||
<input class="submit" type="submit" value="Upload photo">
|
||||
<p class="note">${i18n.maximum_file_size(maxFileSize)}<br />
|
||||
${i18n.minimum_image_dimensions(thumbnailWidth, thumbnailHeight)}</p>
|
||||
<input class="submit" type="submit" value="${i18n.submit_upload}">
|
||||
|
||||
<span class="or"> or <a class="cancel" href="${cancelUrl}" title="cancel">Cancel</a></span>
|
||||
<span class="or"> ${i18n.or} <a class="cancel" href="${cancelUrl}" title="${i18n.cancel_title}">${i18n.cancel_link}</a></span>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
i18n_confirmDelete = "${i18n.confirm_delete}"
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -77,3 +77,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_pl
|
|||
|
||||
${scripts.add('<script type="text/javascript" src="${urls.base}/js/imageUpload/imageUploadUtils.js"></script>',
|
||||
'<script type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>')}
|
||||
|
||||
<script type="text/javascript">
|
||||
i18n_confirmDelete = "${i18n().confirm_delete}"
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue