How to Fetch File Name and Extension from Image Attachment and Reset in Canvas App

How to extract filename from image which is uploaded and trim the extension from filename and reset the image which is uploaded.

High level resolution steps

Here I’m taking examples where I have attached the image and I’m fetching the image filename with extension and, I’m resetting the image media.

Detailed resolution steps

Step 1: Here I’m taking examples where I have attach the “Add Picture” from media where I’m
uploading the image and for display the image I used “image” from media, showing the filename and
extension I used labels. Added one “Reset” button to remove the uploaded image.

Step 2: As you can see in the above screen no image is added , Now click on the “Tap or Click to add a picture” one tab will open with image list which is available in you folder. As soon as you select the image you can see it on the screen as shown below screen.

Step 3: After uploading the image now I want to fetch the filename in “Labelfilenameoutput”.
For that text property of “Labelfilenameoutput” add the below code.

Text property of Labelfilenameoutput:

AddMediaButton1.FileName

Step 4: After getting the filename in “Labelfilenameoutput” I want to show extension in
“Label_extensionoutput”. Now for that “Label_extensionoutput” text property add the below code.


Text property of Label_extensionoutput:-
If(
   !IsBlank(Labelfilenameoutput.Text) &&
   Find(".", Labelfilenameoutput.Text) > 0,
   Mid(
     Labelfilenameoutput.Text,
     Find(".", Labelfilenameoutput.Text) + 1,
     Len(Labelfilenameoutput.Text) - Find(".", Labelfilenameoutput.Text)
   ),
   "No extension"
)

Step 5: Now on click of the “Reset” button I want to reset the “AddMediaButton1”. For the we have
Reset property available.
OnSelect property of the “Button_reset” add the below code and Reset property of “AddMediaButton1”

OnSelect Property of Button_reset:

Set(resetimage,false);
Set(resetimage,true);

Reset Property of AddMediaButton1:

resetimage

Output:

In the below image you can see the attached file name and extension.