Question

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

        }  
 }    

Answer 1

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 🙂