[Multiple File Upload] Multiple File - How To Use Component

Forge Component
(45)
Published on 2 Jan by Remco Dekkinga
45 votes
Published on 2 Jan by Remco Dekkinga

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. 

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?

Solution

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 

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.)

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 :( 

 

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?