Carolina Santos
Rank: #1142
470Views
6Comments
Solved
[Multiple File Upload] Multiple File - How To Use Component
Question
Forge
Multiple File Upload
Forge component by Hugo Pinheiro
57
Published on 26 Jun 2019

Hello there!

So, I'm developing sort of a knowledge repository for my company. I wanted to give the user the possibility to upload a file along whit it's ''knowledge content'' .

First I though I could do it using only de outsystem's widget (file upload) but after some research on google i realized i had to use a ''external api/component'' from FORGE.

I've download the multiple file app and added the dependencies to my module, where i wanted it to work but i dont know how to implement it even tho I tried. I tried to drop the ''Multiple File'' on a container after adding the dependencies but it requests fields that i dont know how to fill and what they're, because prolly there's some ''programming'' knowledge that I don't know so I can't do this. 

0
0
on 2019-05-14
Copy link to comment
Craig St.Jean
mvp_badge
MVP
Rank: #177
Solution

Hello Carolina,

Have you looked at how MultiFileUpload_Demo (which comes with it) is setup?  Basically:

  1. User uploads a file
  2. The component stores it in its UploadCache table
  3. The component fires an On Notify after a file is uploaded
  4. In your On Notify, you can then retrieve the file from the UploadCache table

Regarding the fields:

  • Multiple
    • True/False if you want to allow uploading more than 1 file
  • DivId
    • A reference to the container that you want to use.  You must put a name on the container, and then reference it as <ContainerName>.Id
  • SessionId
    • Not the best name for what this does, it is a name that allows you to find the uploaded file in UploadCache.  This can be anything, for example if you were uploading an image for a user profile you could call it "UserProfileImage" + UserProfileId
  • ButtonText
    • Text of the button to upload files
  • ButtonStyle
    • CSS class name(s) of the button to upload files.  If you are not familiar with CSS classes, add a normal button to your page and copy the Style Classes property from that button into this property
  • FileProcessURL
    • Unless you are going to implement some custom handling of when files are uploaded, leave this the same as what the demo has
      Substr(GetOwnerURLPath(),0,Index(GetOwnerURLPath(),GetPersonalAreaName())+Length(GetPersonalAreaName()))+"/MultipleFileUpload/Upload"+GetPageExtension()
  • SupportedExtensions
    • Comma separated list of file extensions you want to allow the user to upload, e.g.
      "zip,png,pptx"

Does that help?  Is there something specific I can answer?

1
0
on 2019-05-15
Copy link to comment
Carolina Santos
Rank: #1142

Yes, this helped a lot 

I was able to implement it and make it work. Thanks! I didn't notice there's was a demo!

But now i've got this doubt:

How can i make the ''Upload Cache'' table to display only files that were uploaded inside a certain ''knowledge content'', like how can i associate the uploadcache id with the ''post id'' ? 

Usually I make it happen on the table filters but this time i cant even get the proper ''UploadCache ID''. Everytime i upload something, it assumes the same ID as before 

0
0
on 2019-05-15
Copy link to comment
Craig St.Jean
mvp_badge
MVP
Rank: #177

Hey Carolina,

That is where the SessionId property comes in.  You can set it to something like "Post" + PostId (assuming PostId is a variable on your screen) and then put a filter on the UploadCache aggregate that uses the SessionId.

Also, something to be aware of, the UploadCache is only a temporary storage location.  There is a timer in the MultipleFileUpload component that will clear files that are older than 20 minutes.  So, in your On Notify, you can use an aggregate with a filter against SessionId and then save the file to somewhere more permanent (e.g. your own table, Amazon S3, Azure Storage, etc.)

0
0
on 2019-05-15
Copy link to comment
Carolina Santos
Rank: #1142

Hi!
So, I'm trying to do what you recommended but when i set de session id to ''Something'' + PostID (input parameter) and the upload a file it does not recognize the post id :( 

 

Web1.oml

0
0
on 2019-05-15
Copy link to comment
Craig St.Jean
mvp_badge
MVP
Rank: #177

Hey Carolina,

So here is what I did in your application:

  1. Went to https://X.outsystemscloud.com/Web/PostDetail.aspx?Postid=0&UserId=2
    1. My UserId is 2, I went to Postid of 0 to create a new Post
  2. I input Test into the fields and clicked Save
    1. I noticed that the feedback message gave the wrong Id (it uses Author instead of the Post id)
    2. I also noticed that the redirect in Save is not passing the Postid of the new post, it just passes null
  3. I re-navigated to my post by going to https://X.outsystemscloud.com/Web/PostDetail.aspx?Postid=1&UserId=2
    1. Otherwise I would just be on a new post again
  4. I uploaded a file
  5. The file appeared in the list

Can you tell me what you are doing and where it goes wrong?

0
0
on 2019-05-15
Copy link to comment
Maitha Khanji
Rank: #4069

hi, i created a clone of MultipleFileUpload because we added some custom logic to it. But now the Add Button is not showing. what is the correct value of FileProcessURL ?  I tried with both MultipleFileUpload and the new cloned module name CloneOfMultipleFileUpload 

Substr(GetOwnerURLPath(),0,Index(GetOwnerURLPath(),GetPersonalAreaName())+Length(GetPersonalAreaName()))+"/MultipleFileUpload/Upload"+GetPageExtension()


but nothing worked

0
0
on 2020-10-25
Copy link to comment