Is there a possiblity to have a callback in javascript or in the backing bean when the selected files in the primefaces upload has changed?
Background: after the user has chosen the files he can define some attributes for each file. So I want to upload the files only if the has defined these attributes and clicked the save button. If all is uploaded and then the attributes are defined, I have to place the files somewhere on the server I think.
The user must be able to select each file chosen for the upload to edit the attributes. There I need the chosen files after each changing.
I am using PF 5.2.6 and JSF 2.2.11.
Regards
Oliver
At least I solved it with this javascript:
$(window).load(function() {
var fileUpload = PF('docUploadWidgetVar');
var filesAr = fileUpload.files;
Object.observe(filesAr, function(changes){
console.log('upload files array has changed');
filesAr.forEach(function(file) {
console.log(file.name);
});
});
});
For this HTML 5 is needed as I know. I am using the advanced and multiple primefaces upload which is required for this anyway as I know.
Related
I am using the FileUpload in advanced mode. I used it before on another page in the same application where it works.
But now I am trying to use it again on another page and I can't get it working.
The 3 buttons (choose, upload and cancel) appear. When I choose a file the buttons "upload" and "cancel" are enabled but the choosen file isn't shown under the buttons.
When pressing the upload button, I get the following message (and my handler is never called):
Uncaught TypeError: Cannot read property 'submit' of undefined
Source: fileupload.js.xhtml?ln=primefaces&v=5.2:1
I have been looking with the debugger in the javascript. The error occurs in the following block of code:
upload: function() {
for (var a = 0; a < this.files.length; a++) {
this.files[a].row.data("filedata").submit()
}
},
I think this error is caused because after choosing a file, it is added to the array named files but data("filedata") should also exist and doesn't exist for the file. So the script tries to call the submit method of something undefined. I guess the undefined thing is an input which should be added to the html after choosing a file and which isn't added.
Does any one have an idea what might be causing this problem?
I have no idea whether it's relevant, but the page where the FileUpload works is for uploading images and allowTypes is specified there, while on this page I am uploading text files and the attribute allowTypes isn't specified. So I tried to choose an image file (gif or png) but that isn't shown either and in that case the buttons Upload and Cancel remain disabled.
When specifying allowTypes and selecting a bad file the error message is shown under the buttons, but when a matching file is selected it's still the same. It doesn't work.
I also posted this question on the Prime Community Forum: http://forum.primefaces.org/viewtopic.php?f=16&t=46724&p=145363&sid=54403839b9ad4535b70087b19048cf04#p145363
I have got it working now. The FileUpload was embedded in 2 panelGrids. After removing both panelGrids the FileUpload works.
It seems that a panelGrid can mess up the HTML element tree structure in such way that the FileUpload doesn't find it's own files list table any more (It uses JQuery to find it).
So, I can go on with my work.
But I still don't know what exactly happened, and I would like to know.
I have an ASP.NET Web API web service which I want to use for file uploading. The way I do this is that the client posts a JSON object to the service at http://myserver.com/api/images/upload .
The object would contain a base64 string representation of the image, plus some metadata, e.g:
{ companyId: 12345, image: "someBase64encodedStringRepresentingTheImage" }
I would like to use TinyMCE on the client side, but I can't figure out how to customize it such that images are uploaded to the server in that format. (Actually, it doesn't seem like TinyMCE comes with an image uploader at all)
TinyMCE 4.2+ actually has its own built in process for handling the upload of images that you place in the editor:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you insert into the editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
There is an option for you to write your own image handler if the default one is not sufficient:
https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_handler
I would recommend trying to use the uploader that comes with TinyMCE so you don't have to write and maintain your own code going forward (always easier) but if the built in code is not appropriate you can indeed replace it with your own function.
I am trying to upload a file. It uploads fine, but while uploading it shows all file. I want to restrict to only selected files like pdf,jpg and jpeg files.
I need to while uploading a file when a browser window open that time only these files are visible remaining file should be hide. So that user is not able to select wrong file.
Can anyone tell me how can I do this?
I am using Vaadin 7.5.1 and Upload component and a Receiver.
The current Vaadin Upload component does not support this. There's an enhancement request for it which would be dead easy for Vaadin Inc (or a contributor) to implement now that all the major browsers support this functionality.
Here's the technical explanation: The Vaadin Upload component creates HTML like this:
<input type="file" name="foo">
but what you would have liked it to produce would be something like this:
<input type="file" name="foo" accept=".pdf,.jpg,.jpeg">
Here's how the above HTML will look in Firefox:
Basically the accept attribute will tell the browser to open a file selection dialog with a certain filter.
Note that this is a client-side thing. It doesn't prevent a savvy end user from uploading something that doesn't match your filter to your server. That goes for any kind of filtering done on the client-side no matter how it is done. For this reason you'll still need some server-side validation as well.
Piece of cake with JavaScript - you just have to check into the HTML source of page where that button/browse field is placed to find actuall class name of generated html element - this is example for .csv, Vaadin generates class name titled "gwt-FileUpload", so you have to set it like this to see only .csv files after clicking on "Import" button:
upload.setButtonCaption("Import");
JavaScript.getCurrent().execute("document.getElementsByClassName('gwt-FileUpload')[0].setAttribute('accept', '.csv')");
Add this dependency to your pom file
<dependency>
<groupId>com.wcs.wcslib</groupId>
<artifactId>wcslib-vaadin-widget-multifileupload</artifactId>
<version>1.10</version>
</dependency>
And use the following code to upload files, set filter using setAcceptFilter method:
UploadStateWindow uploadStateWindow = new UploadStateWindow();
uploadStateWindow.setOverallProgressVisible(true);
MultiFileUpload fileUpload = new MultiFileUpload(uploadFinishedHandler,
uploadStateWindow, true);
fileUpload.setAcceptFilter(".png,.jpg");
fileUpload.setImmediate(true);
fileUpload.getSmartUpload().setUploadButtonCaptions("upload", "upload");
I have a form and I'm using it to save() an ember model to the database.
This model should also have an image, so I want to create a zone like the one below:
User should be able to drag and drop a file from its file browser or selecting it using the blue button.
Also, how do I actually upload the file along with the other model properties?
You could use EmberDroplet addon and customize it to your needs (for example you can set file limit to 1 and customize CSS). To upload file you have to specify url property, eg:
App.XDropletComponent = Ember.Component.extend(Droplet, {
url: location.origin + '/upload'
});
And in your API endpoint (on server side) you could handle file upload + setting image path on model in database (simple string attribute with URL to your image so you can use it later in your application).
Then you could use didUpload hook to refresh your model (this way you get back image URL after upload).
Or you can use the filepicker.io Ember addon.
Source code and usage here.
Quick reference below.
Template:
{{ember-filepicker pickerOptions=pickerOptions
storeOptions=storeOptions onSelection='fileSelected'
onClose='onClose' onError='onError'}}
Controller actions:
fileSelected: function(params){
//save the params.url to your model
//the image is stored by filepicker on Amazon S3
},
I want to use something along the lines of JQuery file upload (i'm open minded) in a form with lots of other fields for the UI (ex. image previews, delete, file sizes .etc), but I want to submit the files along with the form as if i used a normal HTML file field.
Is this at all possible?
If you console.log() the form after submission you will get an object in return that has a bunch of information. Among that information you can find for example file information of the file you just upload.
You can check this http://jsfiddle.net/1r0Lprkj/1/ and open your console after you've submitted the form.
Then if you want to go deeper into this, then you can check out the Javascript FileReader which lets you do a bunch of cool stuff with the uploaded file. https://developer.mozilla.org/en-US/docs/Web/API/FileReader
To answer your question; Yes it is possible to achieve without AJAX.