On 02/21/2013 01:04 PM, dmnrmr wrote:

Hello! I have school project where i need to make a page where used could input some information (name, surname etc...) + be able to upload doc/pdf files. So i wanted to make a file upload option so i googled it.

I have found this page: http://platform.xwiki.org/xwiki/bin/view/DevGuide/HTML5Upload

My code looks like:

{{html}} <form action="" enctype="mutipart/form-data" method="post">

The action of the form should point to the "upload" action of XWiki, not back to the view mode. Try: action="${doc.getURL('upload')}" This code needs to be placed in a {{velocity}} macro, so if you're not already using one, you can just write: action="{{velocity}}${doc.getURL('upload')}{{/velocity}}"

<input type="file" name="file" id="my_upload" /> </form>

{{/html}}

The problem is that i can sleect file to upload, progress bar appears, but then nothing happens (see attachment image). Could you help me to resolve this issue?

<http://xwiki.475771.n2.nabble.com/file/n7583955/Untitled-1.png>

-- Sergiu Dumitriu http://purl.org/net/sergiu

update: i've removes this part of the code: var targetInput = $('my_upload'); if(targetInput) { new XWiki.FileUploader(targetInput, { autoUpload: true, progressAutohide: true }); } and all, that is left: {{html}} <form action="{{velocity}}${doc.getURL('upload')}{{/velocity}}" enctype="mutipart/form-data" method="post"> <input type="file" name="file" id="my_upload" /> </form> {{/html}} This resulted in the same upload error as if i had all previous code. However, if in object editor i remove any object typed as JavaScriptExtension, the code just does nothing ( -- View this message in context: http://xwiki.475771.n2.nabble.com/HTML5-File-Upload-tp7583955p7583959.html Sent from the XWiki- Users mailing list archive at Nabble.com.

On 02/23/2013 02:37 AM, dmnrmr wrote:

Guys any help? I would really appreciate too see a simple sample how to upload and save files to local page?

There are a few missing pieces of information from the documentation, so it's kind of normal not to be able to get it working on your own, sorry about that. Here are some hints: - In XWiki we try to prevent CSRF attacks by requiring that every change request be accompanied by a token. To make the upload form work, you must include this in the <form>: <input type="hidden" name="form_token" value="$!{services.csrf.getToken()}" /> - The upload action only accepts file inputs named "filepath" (or filepath_X, where X is a number), so you must change the name of the file input to "filepath" in order for it to be taken into account - You MUST keep the JSX object, otherwise the HTML5 upload has no way of working. - What you see after the file is uploaded (like in the first screenshot) is kind of normal, since the HTML5 upload widget doesn't know what you want to display afterwards. See the "responseURL" parameter. So, this parameter is almost mandatory if you want something meaningful to appear. A simple solution is to use the existing attachmentslist.vm template, which just lists the files uploaded so far to that wiki page, like in the Attachments tab at the bottom. Here's some code that works:

{{velocity}} $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> <div id="my_upload_results"> #template('attachmentslist.vm') </div> {{/html}} {{/velocity}}

And the JSX:

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') }); } });

-- Sergiu Dumitriu http://purl.org/net/sergiu

On 02/24/2013 04:03 PM, dmnrmr wrote:

Glad you came up with solution. But i can't get this code work properly. I've added this code to the page, but i keep getting Failed to execute the [html] macro erorr. I've added spaces between {{html}} tags and it still didn't help.

Can you put your exact code on pastebin? -- Sergiu Dumitriu http://purl.org/net/sergiu

Remove the whitespace that is after {{/html}} on the same line. This is what makes the HTML macro inline (i.e. it is followed by inline content). Then you can remove the need for empty lines before and after the HTML macro by: * either moving the 2 $xwiki.*.use lines inside the HTML macro, at the beginning (because they generate white space and whitespace doesn't matter in HTML) * or by writting: #set ($discard = $xwiki.jsfx.use('uicomponents/widgets/upload.js', true)) In any case, be more careful with the whitespace you leave at the end of the lines. Whitespace is preserved and has meaning in wiki syntax, unlike in HTML. Hope this helps, Marius On Mon, Feb 25, 2013 at 8:22 AM, dmnrmr <[email protected]> wrote:

here you go: http://pastebin.com/YrJYesiL

-- View this message in context: http://xwiki.475771.n2.nabble.com/HTML5-File-Upload-tp7583955p7583982.html Sent from the XWiki- Users mailing list archive at Nabble.com. _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users