jsfjsf-2tomahawk

Load and display images in JSF


I am saving the images into a folder of my system. These are uploaded successfully. and then i am saving the image name into the database. Now for displaying image i am getting the name of the file and then trying to display it but its not working. the code is as follows

For the Uploading purpose

<h:outputLabel value="Select Image"></h:outputLabel>
    <x:inputFileUpload id="file"
                       value="#{schoolMember.image}"
                       required="true" size="40" />
 <h:outputText></h:outputText>

<h:commandButton value="Save Details"
                  action="#{schoolMember.saveMember}">
</h:commandButton>

Method used in Java Class

public void saveMember()
    {
        File savedFileName;
        String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(Calendar.getInstance().getTime());
        String dirPath = "B:\\ImagesUpload\\";
        InputStream fileContent = null;
        try {
            fileContent = image.getInputStream();
        } catch (IOException e) {
            e.printStackTrace();
        }

        String uploadFileName = trimFilePath(image.getName());
        String nameofFile=timeStamp + uploadFileName;
        this.setFileName(nameofFile);
        savedFileName = new File(dirPath +nameofFile);
        System.out.println(nameofFile);
        BufferedOutputStream bos = null;
        try {
            bos = new BufferedOutputStream(new FileOutputStream(savedFileName));
        } catch (FileNotFoundException e) {
        }

        byte[] buffer = new byte[1024];
        int len;
        try {
            while ((len = fileContent.read(buffer)) >= 0) {
                bos.write(buffer, 0, len);
            }
        } catch (IOException e) {
        }
        try {
            fileContent.close();
            bos.close();
        } catch (IOException e) {
        }
        SchoolMemberDao dao=new SchoolMemberDao();
        dao.saveSchoolMember(this);
        this.clearAll();

    }

This all is working Fine, Now i am getting name of File from Database as given below

public void memberByEmailEdit() throws IOException
    {
        String dirPath = "B:\\ImagesUpload\\";
        SchoolMemberDao dao=new SchoolMemberDao();
        List<SchoolMember> list=dao.memberByEmail(memberEmail);
        this.memberId=list.get(0).memberId;

        this.fileName=list.get(0).fileName;


        String uploadFileName = trimFilePath(list.get(0).fileName);
        System.out.println(uploadFileName);
        this.setImageFileName(uploadFileName);

        ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
        ec.redirect(ec.getRequestContextPath() + "/faces/views/SchoolMembers/Principal/editProfile.xhtml"); 

    }

the method where i am getting these values using Query is

public List<SchoolMember> memberByEmail(String mEmail)
    {
        Transaction trans=null;
        Session session=HiberUtil.getSessionFactory().openSession();
        try{
            trans=session.beginTransaction();
            String queryString="from SchoolMember s where s.memberEmail = :id and memberType = 'principal'";
            Query query=session.createQuery(queryString);
            query.setString("id", mEmail);

            List<SchoolMember> list=query.list();
            if(list.size()>0)
            {
                return list;
            }
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
        return null;
    }

Now here as given below i am giving the url to get the image but it is not displaying that image

<h:graphicImage height="100"
                width="100"
                url="B:\\ImagesUpload\\#{schoolMember.imageFileName}">
</h:graphicImage>

Solution

  • Your Web application is deployed on server. Application only known to its own resources. Upload images into web app folder instead of B:/ImagesUpload like: resouces/images/ than trying this

    Web server is looking imagefile in like: http://localhost:8080/B:/UploadedImages/xxx.jpg, of-course it cant be done.
    Example