CODEWITHSUNDEEP
javascriptjavaangularjsspring-mvcimage-uploading
Hema
Hema

Reputation: 986

Unable to upload multiple images in one request using Java and Angular js

I am able to upload single image with form data. But now i want to upload multiple images with form data.I have referred many answers but still in server code am getting null for files.

In Angular controller, form data appends list of files,But which is empty in Spring controller. Please help,

Entity

@Id
@Column(name="productId")
private Integer productId;

@Column(name="itemName", unique = true)
private String itemName;
     
@Column(name="twoDByteArray",columnDefinition="mediumblob")
private byte[][] twoDByteArray=new byte[10][];

Controller.java

@RequestMapping(value = "/addProduct", consumes = { "multipart/form-data" }, method = RequestMethod.POST)
@ResponseBody
public Product addProduct(@RequestPart("files") MultipartFile[] files, @RequestPart("product") Product product,HttpSession session, HttpServletRequest request, HttpServletResponse response)
        throws IOException, SerialException, SQLException {

    if(file!=null){
        byte[][] data1 = new byte[10][];  
        byte[] contents = file.getBytes();
        data1[0] = contents;
        product.setTwoDByteArray(data1);
    }
    return product;
}

Controller.js

scope.addProduct = function (product,files) {
    alert(product);
    alert(files);
        scope.files = files;
        if (files && files.length) {
            Upload.upload({
                url: '/Admin_Test/addProduct',
                /*fields: {'username': 'Roja'}, // additional data to send
                files: files*/
                data: {
                    files: files,'product':product
                }
            }).then(function (response) {
                timeout(function () {
                    scope.result = response.data;
                });
            }, function (response) {
                if (response.status > 0) {
                    scope.errorMsg = response.status + ': ' + response.data;
                }
            }, function (evt) {
                scope.progress = 
                    Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
        }
    };

Html

<input type="file" ngf-select ng-model="$files" multiple 
 name="file" accept="image/*" ngf-max-size="2MB" required /> 
        <!--  <div class="col-sm-4 form-group ">
            <input type="file" name="file" id="file" multiple="true" >
        </div> -->
                        
<input type="submit" name="Submit" class="btn btn-primary"
value="Submit" ng-click="addProduct(product,$files)" />

edit

After using ng-upload, i can see image details in console,but which are not present in file.

DEBUG CommonsMultipartResolver:287 - Found multipart file [files[0]] of size 3384 bytes with original filename [hh1.png], stored in memory

DEBUG CommonsMultipartResolver:287 - Found multipart file [files[1]] of size 8591 bytes with original filename [hh.png], stored in memory

Thank you.

Upvotes: 0

Views: 1216

Answers (2)

lefas
lefas

Reputation: 32

try this
frontend

function uploadFiles(files){
        return Upload.upload({
            url : "your_url",
            method : "POST",
            headers: {
                "Content-Type": undefined
            },
            file: files,
            arrayKey: ''
        });
}

backend

@RequestMapping(value = {"/uploadFiles"}, method = RequestMethod.POST)
public ResponseEntity<?> uploadFiles(@RequestParam("file") List<MultipartFile> file){...}

Upvotes: 2

hrdkisback
hrdkisback

Reputation: 908

Try below code.

Angular Controller

Upload.upload({
   url: '/Admin_Test/addProduct',
   files: files,
   data: product
})

Spring Controller

@RequestMapping(value = "/addProduct", method = RequestMethod.POST)
@ResponseBody
public Product addProduct(@RequestPart("files") MultipartFile[] files, Product product,HttpSession session, HttpServletRequest request, HttpServletResponse response)
        throws IOException, SerialException, SQLException {
    if(files!=null){
        System.out.println("In multiple img..."+files +"..."+product);
        System.out.println(product +""+ files);//null null
    }
}

Upvotes: 0

Related Questions