uploading photo in the personal Information form

[Former Member]

Hai all,

I have a requirement where the user should fill the personal information and also upload his photo in the form.I think we should use upload UI element for this.(suggest other ways too)But please do guide me with codings and step by step procedure to achieve the same.Any help in this regard will be appreciated.

Thanks n Regards

Sharanya.R

Edited by: Sharanya.R on Jun 4, 2008 6:03 AM

[nikhil_bose · Accepted solution]

IWDResource resume = wdContext.current<your node>Element().getFileData();
// FileData is of type Resource and mapped to your upload UI. 
byte fileData[] = null;
InputStream fileIs = resume.read(false);
ByteArrayOutputStream bOut = new ByteArrayOutputStream();
int length;
byte[] part = new byte[10 * 1024];
while ((length = fileIs.read(part)) != -1) {
bOut.write(part, 0, length);
}
fileIs.close();
fileData = bOut.toByteArray();
bOut.close();
if(null != fileData){
IWDResource cache = WDResourceFactory.createCachedResource(fileData,fileName,WDWebResourceType.JPG_IMAGE);
// fileName is the name of the file of type String.
wdContext.nodeImage().currentImageElement().setImageSrc(cache.getUrl(0));
// ImageSrc is the attribute mapped to source property of your image UI.
} 

[Former Member · Accepted solution]

hai all,

Thanks for the response.But plz understand that the image is in my machine(eg in c:).I should upload that image and i should make that visible in my image UI element in the view.Is that possible.

please help me in this regard

Regards

Sharanya.R

[nikhil_bose · Accepted solution]

above code does. what is the problem you are getting?

try byte array size to some large amount or make it as

byte[] binarydata = new byte[file.length()];

nikhiL

[Former Member · Accepted solution]

hai nikhil,

should i place an file upload UI for this ...?where should i place this coding exactly?

Thanks n Regards

Sharanya.R

[Former Member · Accepted solution]

hai Nikhil,

can u give me step by step procedure where Ui elements are created and regarding the context and mappings and then actions (if there) ..where to place ur codings.

Thanks n Regards

Sharanya.R

[srinivas_sistu]

Hi Sharanya,

Please have a look at the below code, may be helpful.....

//FileImage is your File Upload Node.

//filename is context attribute of type string.

//Upload is context attribute of binary type.

String fileName =wdContext

.nodeFileImage()

.currentFileImageElement()

.getFileName();

fileName =fileName.substring(

fileName.lastIndexOf("
") + 1,

fileName.length());

//If Incase you want to validate the Image size then below code

//likeu2026 extension matching, file size etc.,u2026

String extn =fileName.substring(fileName.lastIndexOf(".") + 1,fileName.length());

if (extn.equalsIgnoreCase("jpg")

|| extn.equalsIgnoreCase("jpeg")

|| extn.equalsIgnoreCase("gif")

|| extn.equalsIgnoreCase("tif")

|| extn.equalsIgnoreCase("png")) {

File imageFile = new File(fileName);

FileOutputStream outPutStream =

new FileOutputStream(imageFile);

if (wdContext.currentFileImageElement().getUpload()

!= null) {

fileData = wdContext.currentFileImageElement().getUpload();

if ((fileData.length / 1024) < 50) {

outPutStream.write(fileData);

BufferedInputStream bufInStream =

new BufferedInputStream(

new FileInputStream(imageFile));

outPutStream.close();

//With above code you have created a File with your Image as data.

}

else {

wdComponentAPI.getMessageManager().reportException(u201CImage size exceeded the limitu201D);

}

Regards,

Srinivas.

[Former Member]

hai Everybody ,

Thanks for all your responses but all I need is to load an image in the imgae UI element using file upload.Please help me in doing the same and not files.I have placed an image UI element and an upload UI element in my web dynpro view.Now when i click on the upload UI element I should be able to select the image and that image should be loaded in the image UI element.

Thanks n Regards

Sharanya.R

[srinivas_sistu]

Hi Sharanya,

are using K.M? In such a case store this Image you got as a file from file upload UI in K.M and then use this K.M location as a link for the image UI.

If incase you are using K.M and you need any help on displaing Image I can help you....

Regards,

Srinivas.

Edited by: srinivas sistu on Jun 4, 2008 4:10 PM

[Former Member]

Hi,

Create a value attribute Ctx_va_FilePath in the context of the view of type binary.Set the data property of file upload UI element to this value.

Create a value attribute Ctx_va_FileName in the context of the view of type string.Set the file name property of file upload UI element to this value.

Then on click of upload button, check if the file name ends with .jpg or whatever extension you want to support using

if (wdContext.currentContextElement().getCtx_va_FilePath() != null)

{

if (wdContext.currentContextElement().getCtx_va_FileName().endsWith(".jpg")== true)

{

// code here

}

}

[Former Member]

hai sudeep,

I want to place the uploaded image into image UI element just suggest me the codings for doing the same

Thanks n Regards

Sharanya.R

[Former Member]

Hi

just make sure that ur default path is mimes folder of ur project.

In order to show the uploaded Image in Image UI element do the following.

Create a context of string type say ctx_Image.

Bind this context to source property of Image UI element.

set ctx_Image with the context(say ctx_filename) that u have bound with file name property of file upload UI element.

Then u can use the following code.

wdContext.currentcontextelement.setCtx_image(wdContext.currentcontextelement.getCtx_filaname));

Place this code below wherever u are showing the message of successful upload.

Regards

Surender Dahiya

[Former Member]

Hi

Use fileUploadUiElement and bind it to context.

create a context element of Resource type and data source element of binary type. For resource type go to dictionary simple type -> Choose com.sap.ide.webdynpro.uielementdefinitions -> Resource.

Go through this blog for detailed information

/people/bertram.ganz/blog/2007/05/25/new-web-dynpro-java-tutorials--uploading-and-downloading-files-in-sap-netweaver-70

Thanks

Mandeep Virk

Edited by: Mandeep Virk on Jun 4, 2008 12:08 PM

[nikhil_bose]

sharanya,

FileUploadUIElement will do better as it has built in File Chooser too.

IWDResource is binded to this element from which you can get binary (byte[]) to pass to another File or RFC.

nikhil

[Former Member]

Hai Nikhil,

Thanks for the response.I have never used file upload UI element.Can u just guide me with some codings to upload image and some links related to the same.

Thanks n Regards

Sharanya.R

[nikhil_bose]

Go through this [blog|/people/rekha.malavathu2/blog/2006/12/12/handling-fileupload-and-filedownload-in-netweaver-developer-studionwds-2004s]

Usage of FileUploadUI control:

1. create a FileUploadUI element in your layout

2. create a context value attribute of type binary

3. make the binary attribute modifiable (in wdInit of the view controller)

wdContext.getNodeInfo().getAttribute(IPrivate<YOUR_VIEW>.IContextElement.<YOUR_BINARY_VALUE_ATTRIBUTE>).getModifiableSimpleType();
[/code]

4. create a button to trigger the upload from the ui

nikhil