Skip to Content
Author's profile photo Deepak Anumula

Getting local file path in SAPUI5 application and display the uploading image on the page

Hi All,

When we are uploading a image to the SAP using fileuploader, after the completion of selecting the file i wanted to display the image on the screen.

For displaying the image by using the local system file path not from the project.

For this please follow the procedure:

Create a project and give the title and the view name usually how we give in the same way,

I am using the JS views.

In the view.js write code for the file uploader as shown below

new sap.ui.unified.FileUploader(“myupload”,{

  

     placeholder:”Select Image”,

     uploadOnChange: true,

  

     uploadComplete:[oController,oController.uploadc]

  }),

After this we need to display the image the one which we selected,so

new sap.m.Image(“img”,{width:”200px”})

Here we are not giving the source to the image because we have to set this source after selecting the image in run time.

Now we have to write function for uploadComplete in the controller.js

uploadc:function(evt)

{

          var f = evt.oSource.oFileUpload.files[0];  //here we will get the file which we have been selected in to the variable f

            var path = URL.createObjectURL(f);     // here we are generating the URL based on the local file system and will pass the url in to path

              

          var img = sap.ui.getCore().byId(“img”); // we are getting the id of the image

            img.setSrc(path);  //we are setting the source of the path to the image to display the image

}

please find the screen shots respective to the code:

1.PNG2.PNG3.PNG4.PNG5.PNG

Hope this document will be helpful,

If there is any mistake please let me know…

Thanks,

Deepak Raj.

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Soumya Nandi
      Soumya Nandi

      Hi Deepak,

       

      I am getting error on SAP hana cloud platform webide on the file read line "evt.oSource.oFileUpload.files[0]" as "property oSource is a private member of sap.ui.base.Event!"

      And even if I run it with the error it is giving "Cannot read property of 'files' of undefined"

       

      Can you please let me know how can we ready the image that we have uploaded.

       

      Regards,

      Soumya

      Author's profile photo Deepak Anumula
      Deepak Anumula
      Blog Post Author

      Hi Soumya,

       

      I have developed the above example from the eclipse  IDE.

      As you are developing in WEB-IDE please put a break point when the function triggers and check the path of your image from where it can be accessible.

       

      If you got any doubt please feel free to reach me at deepu.9291@gmail.com.

       

      Thansk,

      Deepak Raj.

      Author's profile photo Former Member
      Former Member

      Good Job! Very helpfully for implementing a preview before uploading the selected image.

      Thanks!

      Author's profile photo Deepak Anumula
      Deepak Anumula
      Blog Post Author

      Thanks Simon.

      Author's profile photo Former Member
      Former Member

      Hello. Thank you for your blog. I have a question about how to put the image in canvas and then show it in the canvas? I know it is simple when working with html/js pages but here when using sapui5 how can I achieve that? Thanks in advance.

       

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi,

      Can we store the uploaded files in my local system instead of uploading to Gateway server?

      That means I need to select files from C drive and store the files in E drive in my local PC when user clicks on upload button.

      thanks,

      venkatesh.

      Author's profile photo Victoria sangula
      Victoria sangula

      Hi,

      Do you have any idea of "How to upload multiple images from local system to ui screen" ??

      Author's profile photo Subha Palanichamy
      Subha Palanichamy

      which data you are sending to odata any conversion required to send create stream