Reproduce Choose Files button from Attachments on Main Page

Help / Discuss
1

For some pages in my XWiki, it is useful to attach related documents such as spread sheets or presentations. The idea is to store material related to the topic of the page on the page. I have also used the Attachments extension to show files attached to a page or written some velocity to show a subset. The FileManager application doesn’t really fit this use case because the file tree is not connected to the page.

I would like a way to reproduce the Choose Files button on the main page. Ideally with a velocity script.

image
image1132×612 46.5 KB

I found some old forum topics and came up with a start. Clicking the bottom allows me to choose files, but I am not sure what I should do next, but I suspect I need to add some redirect to upload to actually attach the files to the page.

{{velocity}}
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/upload.js', true))

{{html}}
<form action="$doc.getURL('upload')">
  <input type="hidden" name="form_token" value="$!{services.csrf.getToken()}" />
  <input id="xwikiuploadfile" type="file" name="filepath" size="40" class="uploadFileInput noitems" data-max-file-size="107374182400" multiple="">
</form>
{{/html}}
{{/velocity}}

{{attachments/}}
2

I should have looked in the old archives. [xwiki-users] HTML5 File Upload . This example uses the template on the attachments tab so I modified slightly for my example.

Here is the page content that uses the attachments macro.

{{velocity}}
## Important note - This works because of the JSX object that has been attached to the page
$xwiki.jsfx.use('uicomponents/widgets/upload.js', true)
$xwiki.ssfx.use('uicomponents/widgets/upload.css', true)
{{html}}
<form action="${doc.getURL('upload')}" enctype="mutipart/form-data"method="post"><div>
 <input type="file" name="filepath" id="my_upload" />
 <input type="hidden" name="form_token" value="$!{services.csrf.getToken()}" />
</div></form>
{{/html}}
{{/velocity}}

{{attachments /}}

Edit the page with the object editor and add a JavaScriptExtension object with this content:

document.observe('xwiki:dom:loaded', function() {
 var targetInput = $('my_upload');
 if(targetInput) {
   new XWiki.FileUploader(targetInput, {
     autoUpload: true,
     progressAutohide: true,
     responseURL: XWiki.currentDocument.getURL('get', 'xpage=attachmentslist'),
     responseContainer: $('my_upload_results')
   });
 }
});

Set the JSX object to be loaded “On this page or on demand”.