Scriptacu-list Tutorial(Part 7)
To complete our application we will allow our users to upload a picture of the contact so that it appears on the details drop down.
Got the Picture?
OK first we need to be able to upload a picture.
We will return to our MyContactEditor and modify the #renderContentOn: method to make the form a multipart form and add a file upload field.
html heading: 'Contact Details'.
self renderLabel: 'First Name: ' withInput: [html textInput on: #firstName of: contact] on: html.
self renderLabel: 'Surname: ' withInput: [html textInput on: #surname of: contact] on: html.
self renderLabel: 'Date of Birth: ' withInput: [html dateInput on: #dateOfBirth of: contact] on: html.
self renderLabel: 'Telephone: ' withInput: [html textInput on: #telephoneNumber of: contact] on: html.
self renderLabel: 'Email: ' withInput: [html textInput on: #emailAddress of: contact] on: html.
self renderLabel: 'Photograph ' withInput: [html fileUpload callback: [:file | self attachPhotograph: file]] on: html.
html span class: 'button';
with: [html submitButton on: #save of: self].
html span class: 'button';
with: [html submitButton on: #cancel of: self].
Now we need to code the #attachPhotograph: method that the uploaded file gets passed to.
| form sizedForm fileName tempStream|
tempStream := RWBinaryOrTextStream with: aFile contents.
form := ImageReadWriter formFromStream: tempStream.
sizedForm := form scaledToSize: 100@100.
fileName := contact identifier, '-photo.gif'.
GIFReadWriter putForm: sizedForm onOverwritableFileNamed: 'FileRoot', FileDirectory slash, fileName.]
This method takes the binary input stream and uses ImageReadWriter to obtain the “form” i.e. the picture. We then resize the picture to 100px by 100px and save it as a gif name fredbloggs-photo.gif (where fredbloggs is my contact’s identifier). I save the file in the directory FileRoot which I declared as my Document Root directory for my application.
Let’s see it Then
Now the final step is to amend the #renderDetailsDiv:on: method in MyContactDetailView so that it includes the image from our document root.
renderDetailsDiv: aString on: html
html div id: aString;
style: 'display: none';
style: ‘float: left; margin-right:10px’;
altText: (‘Picture of ‘, contact fullName);
resourceUrl: ‘/’, contact identifier, ‘-photo.gif’ .
html render: ‘Name: ‘, contact fullName.
html render: ‘Birthday: ‘, contact dateOfBirth printString.
html render: ‘Telephone: ‘, contact telephoneNumber.
html render: ‘Email: ‘. contact emailAddress.
Job done! (Apart from getting a good CCS/Graphic designer to make it look super cool – If anyone wishes to contribute one I’d be more than happy to replace my rather basic one in session 3.)
If you stuck with me all the way to the end then I hope you found it worthwhile. And if your just starting out on Seaside I’d just like to encourage you to blog your progress. It really helps to crystallize your thinking and their are others out there who can add new insights as you go.