Skip to content
satheesh365 edited this page Apr 5, 2018 · 9 revisions

client side

 Upload.upload({
        url: 'upload',
        fields: {'username': 'zouroto'}, // additional data to send
        file: file
    }).progress(function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
        console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
    });

server side

@Controller
public class UiController {

    @ResponseStatus(HttpStatus.OK)
    @RequestMapping(value = "/upload")
    public void upload(@RequestParam("file") MultipartFile file, @RequestParam("username") String username ) throws IOException {

        byte[] bytes;

        if (!file.isEmpty()) {
             bytes = file.getBytes();
            //store file in storage
        }

        System.out.println(String.format("receive %s from %s", file.getOriginalFilename(), username));
    }

}

application config

<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="5000000"/>
</bean>

maven

    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>

Issue with multiple file upload

ng-file-upload by default submits array of files using names. Like file[0], file[1]., By setting the arrayKey value to empty string forces the files to be sent under the same file key.

Upload.upload({url: url, data: {file: arrayOfFiles}, arrayKey: ''})