Requirement: I have a demo.jspx to Upload and Display the image file from the Absolute Server Path. In case we load the demo.jspx for the first time it will display the screen as shown below:
The Absolute Server Path, in this case, is C:\Users\Susanto\Desktop\MyFolder
Now, when the user uploads the image it should display that uploaded image in the demo.jspx. The image file name will be generated based on some timestamp logic. The file will also be stored in the absolute server path.
Next time when the user uploads the new image it should display that newly uploaded image in the demo.jspx. The old file will be deleted from the absolute server path and the new file will be added now.
Solution: For the solution of the above requirement follow the steps as shown below:
Step 1: Create an ADF Fusion Web Application. We will not have any code in the Model project.
In the ViewController project create a demo.jspx page.
Step 2: In the demo.jspx drag and drop af:panelBox and text=”Uplaod and Show Image File From Absolute Server Path” and showDisclosure=”false”
Inside the af:panelBox drag and drop af:image and set inlineStyle=”height:250px;width:300px;” , partialTriggers=”b1″, and source=”/viewimageservlet?path=#{pageFlowScope.MyBean.imagePath == null ? ‘No’: pageFlowScope.MyBean.imagePath}”
Drag and drop af:inputFile and set value=”#{pageFlowScope.MyBean.imageFile}”
Then drag and drop af:button and set text=”Upload” and actionListener=”#{pageFlowScope.MyBean.uploadImageActionListener}”
Make sure that the usesUpload=”true” for the af:form
Thus, the complete code for the demo.jspx page is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
xmlns:af="">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="demo.jspx" id="d1">
<af:form id="f1" usesUpload="true">
<af:panelBox text="Uplaod and Show Image File From Absolute Server Path" showDisclosure="false"
id="pb1">
<af:image id="i1" inlineStyle="height:250px;width:300px;" partialTriggers="b1"
source="/viewimageservlet?path=#{pageFlowScope.MyBean.imagePath == null ? 'No': pageFlowScope.MyBean.imagePath}"/>
<af:inputFile id="if1" value="#{pageFlowScope.MyBean.imageFile}"/>
<af:button text="Upload" id="b1"
actionListener="#{pageFlowScope.MyBean.uploadImageActionListener}"/>
<f:facet name="toolbar"/>
</af:panelBox>
</af:form>
</af:document>
</f:view>
</jsp:root>The complete code for the MyBean.java class is shown below:
package susantotech.com;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.imageio.ImageIO;
import org.apache.myfaces.trinidad.model.UploadedFile;
public class MyBean {
public MyBean() {
}
private UploadedFile imageFile;
String imagePath = null;
public void setImagePath(String imagePath) {
this.imagePath = imagePath;
}
public String getImagePath() {
return imagePath;
}
public void setImageFile(UploadedFile imageFile) {
this.imageFile = imageFile;
}
public UploadedFile getImageFile() {
return imageFile;
}
public void uploadImageActionListener(ActionEvent actionEvent) {
File directory = new File("C://Users//Susanto//Desktop//MyFolder//");
File[] fList = directory.listFiles();
for (File file : fList) {
if (!"no-image.png".equalsIgnoreCase(file.getName())) {
file.delete();
}
}
String flag = uploadImage(imageFile);
if ("NO".equalsIgnoreCase(flag)) {
FacesMessage msg =
new FacesMessage("Please upload supported file. Valid file types are: .jpg, .png, .bmp, and .gif)");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
private String uploadImage(UploadedFile file) {
UploadedFile myfile = file;
if (myfile == null) {
} else {
if (myfile.getContentType().equalsIgnoreCase("image/jpeg") ||
myfile.getContentType().equalsIgnoreCase("image/png") ||
myfile.getContentType().equalsIgnoreCase("image/bmp") ||
myfile.getContentType().equalsIgnoreCase("image/gif")) {
String path = "C://Users//Susanto//Desktop//MyFolder//";
String type = "PNG";
String TypeVal = ".png";
if (myfile.getContentType().equalsIgnoreCase("image/jpeg")) {
type = "JPEG";
TypeVal = ".jpeg";
} else if (myfile.getContentType().equalsIgnoreCase("image/png")) {
type = "PNG";
TypeVal = ".png";
} else if (myfile.getContentType().equalsIgnoreCase("image/bmp")) {
type = "PNG";
TypeVal = ".png";
} else if (myfile.getContentType().equalsIgnoreCase("image/gif")) {
type = "GIF";
TypeVal = ".gif";
}
InputStream inputStream = null;
try {
DateFormat dateFormat = new SimpleDateFormat("yyMMdd_HHmmss");
Date date = new Date();
String dtTime = dateFormat.format(date);
dtTime = dtTime.replace(" ", "_");
String name = "IMG" + "_" + dtTime;
System.out.println("File name is : " + name);
inputStream = myfile.getInputStream();
BufferedImage input = ImageIO.read(inputStream);
File outputFile = new File(path + name + TypeVal);
ImageIO.write(input, type, outputFile);
imagePath = outputFile.getAbsolutePath();
} catch (Exception ex) {
ex.printStackTrace();
} finally {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
} else {
imagePath = "NO";
}
}
setImageFile(null);
return imagePath;
}
}Step 3: Now to show the uploaded image on the demo.jspx page. we have to create a Servlet. This servlet will process the image file into bytes and the show using af:image component. The servlet name will be ViewImageServlet
To create the Servlet, right click on ViewController project > Web Tier > Servlets > Click HTTP Servlet > Click OK
Set the below properties:
- Class: ViewImageServlet
- Package: susantotech.com
- Generate Content Type: HTML
- Registration: Configuration file (web.xml)
- Implement Methods: doGet()
Now, click Next
Let the Name be ViewImageServlet and URL Pattern be viewimageservlet
Click Next.
Click Finish
Thus, the complete code for the ViewImageServlet.java servlet file is as below:
package susantotech.com;
import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ViewImageServlet extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=UTF-8";
public void init(ServletConfig config) throws ServletException {
super.init(config);
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String path = (request.getParameter("path"));
OutputStream os = response.getOutputStream();
if (path.equalsIgnoreCase("No")) {
path = "C://Users//Susanto//Desktop//MyFolder//no-image.png";
}
if (request.getParameter("path") == "") {
path = "C://Users//Susanto//Desktop//MyFolder//no-image.png";
}
InputStream inputStream = null;
try {
File outputFile = new File(path);
inputStream = new FileInputStream(outputFile);
BufferedInputStream in = new BufferedInputStream(inputStream);
int b;
byte[] buffer = new byte[10240];
while ((b = in.read(buffer, 0, 10240)) != -1) {
os.write(buffer, 0, b);
}
} catch (Exception e) {
System.out.println(e);
} finally {
if (os != null) {
os.close();
}
if (inputStream != null) {
inputStream.close();
}
}
}
}Please note, we have to put the no-image.png file in the Absolute Server Path (C:\Users\Susanto\Desktop\MyFolder) from before.
Save all and run the application. Thus, the ran application is shown below:
Click on Choose File to browse the below file. Click on Upload button and we can see the image of the fruits being displayed as shown below. This is because we have uploaded the image of the fruits.
If we see the uploaded image name in the absolute server path the name is IMG_210327_190555
Now, let me choose and upload the image of the banana. Thus the old file (fruits with name as IMG_210327_190555) is now deleted from the absolute server path, and the new image of banana is available in the absolute server path. The name of the file is now changed to IMG_210327_191004
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
999 total views, 1 views today