How to add a file upload picker on my Alfresco form

How can I add a file/data upload picker on my form in Alfresco Share? I need to click on my button then the file picker should appear. Can anybody help?

Check out the Manage Users console code defined in users.js, which features the ability to upload a CSV file containing user details.

First you need to define a HTML button control and then add some client-side script to bind that to an upload control

Define the button in your component's HTML template

<span class="yui-button yui-push-button" id="${args.htmlid?html}-uploadusers-button">
   <span class="first-child"><button>${msg("button.uploaduser")}</button></span>
</span>

Then create the YUI button in your client-side code (e.g. in your onReady() function)

var uploadUsersButton = Alfresco.util.createYUIButton(this, "uploadusers-button", this.onUploadUsersClick);

Then define the button click handler as a new function of your component's prototype - following example is from function ConsoleUsers_onUploadUsersClick() in users.js which you will need to modify as per your needs

onUploadUsersClick: function onUploadUsersClick()
{
   // Force the use of the HTML (rather than Flash) uploader because there are issues with the
   // Flash uploader in these circumstances when Sharepoint is being used. The Flash uploader
   // picks up the wrong JSESSIONID cookie which causes the upload to fail.
   if (!this.fileUpload)
   {
      this.fileUpload = Alfresco.util.ComponentManager.findFirst("Alfresco.HtmlUpload") 
   }

   // Show uploader for single file select - override the upload URL to use appropriate upload service
   var uploadConfig =
   {
      uploadURL: "api/people/upload.html",
      mode: this.fileUpload.MODE_SINGLE_UPLOAD,
      onFileUploadComplete:
      {
         fn: this.onUsersUploadComplete,
         scope: this
      }
   };

   this.fileUpload.show(uploadConfig);

   // Make sure the "use Flash" tip is hidden just in case Flash is enabled...
   var singleUploadTip = Dom.get(this.fileUpload.id + "-singleUploadTip-span");
   Dom.addClass(singleUploadTip, "hidden");
   Event.preventDefault(e);
}

Note the use of the uploadURL parameter in the config object. You should set this to the URL of a custom repository web script you create that knows how to handle the contents of the uploaded file.

The user upload example also defines a method onUsersUploadComplete() that you will see referenced. It is up to you to implement your own component method here to take appropriate action such as updating the UI based on the results of the upload.