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

Question

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.

jsfiddle.net/p7uuy2as try this code using ng-file-upload library — zabusa
– zabusa, Commented Dec 19, 2017 at 6:19
check the github.com/danialfarid/ng-file-upload you will find it in here — zabusa
– zabusa, Commented Dec 19, 2017 at 6:29
multiple files in one request is not good. You can't handle errors e.g. what do you do, if 1 file is not able to be uploaded? cancel whole request? some files were already uploaded, rollback? Just do 1 request per file and you are safe. — Eigi
– Eigi, Commented Dec 20, 2017 at 6:36
@CodeNashor But my requirement is to upload multiple images,lets say with form data of 3 fields, need to submit those images also. And entire object to be saved.Any help..? — Hema
– Hema, Commented Dec 20, 2017 at 6:40

lefas · Accepted Answer · 2018-02-16 13:41:27Z

2

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){...}

answered Feb 16, 2018 at 13:41

lefas

321 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hrdkisback · Accepted Answer · 2017-12-27 06:06:49Z

0

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
    }
}

answered Dec 27, 2017 at 6:06

hrdkisback

9088 silver badges20 bronze badges

8 Comments

Hema Over a year ago

Thank you for ur response..

org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'product' is not present

am getting bad request error

hrdkisback Over a year ago

What you got in alert(product);? And Can you post your POJO Product class ?

Hema Over a year ago

In alert i am getting product object with proper values. I have added POJO in my question

hrdkisback Over a year ago

Make sure angular's product object and your Java POJO Product class have same attributes so spring will Jackson Mapper automatically map your object's attribute.

Hema Over a year ago

I am getting this issue only for multiple files upload, for single file upload product will reach to server side controller

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related