jsf - Multiple file upload with extra inputText -

jsf - Multiple file upload with extra inputText -

i need implement following:

multiple file upload in ajax style (without refreshing whole page) description field per file it must done jsf 2.0

there isn't problem 2 of 3 requirement in combination. multiple fileupload jsf 2.0 = primefaces, multiple file upload + description possible jsf 2.2 because has native upload element (i guess can ajaxed didn't check because can't utilize it), when 3 requirements stuck. on primefaces's p:fileupload there isn't description field , simple mode doesn't back upwards ajax. jsf 2.0 doesn't have native fileupload component. can bind description field primefaces's p:fileupload can't prevent user take multiple files , cause few files tied 1 description.

so, possible multiple file upload in ajax style description field in primefaces , jsf 2.0?

primefaces upload based on blueimp/jquery-file-upload.

when .serializearray() gets called, info within form serialized.

in case override primefaces implementation of add alternative append 1 input text each file.

so result this:

now 1 line of code, here:

.append('<td class="title"><label>title: <input name="title['+ file.name +']"></label></td>') //the modification have

the input text called title[filename], in case value of request parameter current file name.

public void handlefileupload(fileuploadevent event) { facescontext context = facescontext.getcurrentinstance(); map map = context.getexternalcontext().getrequestparametermap(); string paramname = "title["+event.getfile().getfilename()+"]"; string filewithtitle = (string) map.get(paramname); }

here's total implementation of add alternative (assuming widgetvar fileupload)

$(document).ready(function() { settimeout(fileupload, 1000); }) function fileupload() { pf('fileupload').jq.fileupload({ add: function(e, data) { $this = pf('fileupload'); $this.choosebutton.removeclass('ui-state-hover ui-state-focus'); if ($this.files.length === 0) { $this.enablebutton($this.uploadbutton); $this.enablebutton($this.cancelbutton); } if ($this.cfg.filelimit && ($this.uploadedfilecount + $this.files.length + 1) > $this.cfg.filelimit) { $this.clearmessages(); $this.showmessage({ summary: $this.cfg.filelimitmessage }); return; } var file = data.files ? data.files[0] : null; if (file) { var validmsg = $this.validate(file); if (validmsg) { $this.showmessage({ summary: validmsg, filename: file.name, filesize: file.size }); } else { $this.clearmessages(); //the modification have var row = $('<tr></tr>').append('<td class="ui-fileupload-preview"></td>') .append('<td>' + file.name + '</td>') .append('<td class="title"><label>title: <input name="title['+ file.name +']"></label></td>') .append('<td>' + $this.formatsize(file.size) + '</td>') .append('<td class="ui-fileupload-progress"></td>') .append('<td><button class="ui-fileupload-cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"><span class="ui-button-icon-left ui-icon ui-icon ui-icon-close"></span><span class="ui-button-text">ui-button</span></button></td>') .appendto($this.filestbody); if ($this.iscanvassupported() && window.file && window.filereader && $this.image_types.test(file.name)) { var imagecanvas = $('<canvas></canvas') .appendto(row.children('td.ui-fileupload-preview')), context = imagecanvas.get(0).getcontext('2d'), winurl = window.url || window.webkiturl, url = winurl.createobjecturl(file), img = new image(); img.onload = function() { var imgwidth = null, imgheight = null, scale = 1; if ($this.cfg.previewwidth > this.width) { imgwidth = this.width; } else { imgwidth = $this.cfg.previewwidth; scale = $this.cfg.previewwidth / this.width; } var imgheight = parseint(this.height * scale); imagecanvas.attr({width: imgwidth, height: imgheight}); context.drawimage(img, 0, 0, imgwidth, imgheight); } img.src = url; } //progress row.children('td.ui-fileupload-progress').append('<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: none; width: 0%;"></div></div>'); file.row = row; file.row.data('filedata', data); $this.files.push(file); if ($this.cfg.auto) { $this.upload(); } } } }}); }

just included above code in js file , included before end of </h:body>

here's an online demo.

note: drag might have in approach, if user has selected multiple files the same exact name , extension first title twice!, okay, since user isn't supposed upload identical files.

this test on primefaces 5.0 , chrome.

jsf file-upload primefaces