i'm trying to allow user to upload multiple images but when i validate the form with some files i get this error Incorrect value on the images field... Here is my code:
in the view:
#{form @save(id)}
#{ifErrors}
<p class="error">
Please correct these errors.
</p>
#{/ifErrors}
<p>
<label>Titre</label>
<input type="text" name="title" value="${flash.title}" id="title" />
<span class="error">#{error 'title' /}
</p>
<p>
<label>Description</label>
<textarea name="detail" value="${flash.detail}" id="detail" /></textarea>
<span class="error">#{error 'detail' /}
</p>
<p>
<label>Photos</label>
<input type="file" draggable="true" name="files" id="files" multiple="multiple"/>
<strong>(Max. 5 photos)</strong> <span class="error">#{error 'files' /}
</p>
<p>
<input type="submit" value="Publier l'annonce" />
</p>
#{/form}
the java function:
public static void save(long id, @Required String title, @Required String detail, File[] files) throws IOException{
if (id == 0){
validation.keep();
params.flash();
flash.error("Vous devez préalablement selectionner une catégorie...");
Application.setclassified();
}
// Action when form errors found
else if (validation.hasErrors() ) {
validation.keep();
params.flash();
flash.error("Veuillez corriger les erreurs...");
form(id);
}
//save uploaded images
for (File file : files) {
FileInputStream is = new FileInputStream(file);
String original = "/data/" + file.getName();
IOUtils.copy(is, new FileOutputStream(Play.getFile(original)));
}
}
You are using HTML5 field with the DnD file upload aren't you?, I don't know what kind of functionality the JS provides, but usually when you drop a file it will automatically upload it. I suggest you might want to mimick YouTube upload function. For example:
Once file is uploaded, return a json with a generated ID of the file so when you save records you can relate it to the file you just uploaded.
When I was playing with it usually the javascript will open a new POST request, that request you must get it from request.body
which is an InputStream
, use that InputStream with IOUtils to save the file, once saved return a JSON object with the filename or path of the file.
Thing is, I don't think it will never pass through File files[]
because the javascript opens a new POST request so it will always return Incorrect value since it's never filled when you submit the data to the server-side.
You could try this: create two routes, one that uploads the file, one that saves the meta-data of the file, with the one method you do all the file processing, the other one grabs the json return and relate it then save :)
I also posted some sample codes here to a similar question: PlayFramework: Ajax + Drag n' Drop + File Upload + File object in controller?
Cheers, sorry if I sound a tad redundant, kinda tired but I hope this helps you :)
File uploads need to be forced to 'multipart/form-data' for files to be processed in the play framework. Otherwise, the file array will be null.
Adjust your form like this:
#{form @save(id), enctype:'multipart/form-data'}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With