Solved

Angular Js Grid Related

Posted on 2016-10-24
18
24 Views
Last Modified: 2016-11-14
Hi,
I have a requirement like when we have grid as part of form,we have to upload multiple files.
Here we once files are  added to JSON object,we are receiving them as multipart array at Java.
Here we need to take the multiples uploaded files per row in the grid.
But the problem is,I am unable to add multiples file to JSON object,to which i already added remaining grid data and also how to recieve the same at Angular Js End.


How can we resolve the problem?.
-files.png
0
Comment
Question by:Finsol123
  • 7
  • 5
  • 4
  • +1
18 Comments
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
Are you talking about input multiple? What does "Here we once files are  added to JSON object" mean?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
how to recieve the same at Angular Js End.
AngularJS is front end code.

If you are not worried about browser versions (IE < 10) then you can take a look at FormData
This allows you to compile a request packet with file data included. You can then process the incoming files on the server side in the normal way.
0
 
LVL 27

Accepted Solution

by:
BigRat earned 500 total points (awarded by participants)
Comment Utility
The trick is to get Angular to send the file, so that the response of sending that file is the contents of the file itself (plus any other necessary data) which you can load the grid with on success.

Thus the HTML ought to be a bit like

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Or use a simple file input with a button which calls the uploadFile() function in scope.

and the code somewhat like
$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...a function to set the grid... ).error( .report something... );

};

Open in new window

where the "...a function to set the grid..." probably calls some $scope.myGrid.loadUp() function. The problem above is that FormData is not available in IE 9. Follow this blog article for things about Formdata.

The trick with "undefined" in the header is it allows Angular to get the content-type correct and the "transformRequest" to get the boundary correct in the multipart/formdata mime type to whivch Julian has referred.

You could also use the  ng-file-upload directive (https://github.com/danialfarid/ng-file-upload) and even the HTML/5 API FileReader which works for most browsers both pc and mobile and IE 10, better 11 or Edge.
0
 

Author Comment

by:Finsol123
Comment Utility
"Are you talking about input multiple? What does "Here we once files are  added to JSON object" mean?"---Means

The above sentence means,as part of grid we have multiple rows,per single row i need to upload images/files.Here  i fill the row and add images for the row.i repeat in per every row.
But on form submit only the row data and corresponding images per row has to be added to the final JSON  Object or Normal Java Script Object before sending the object to server.Here for every row image data should also be added with the object.

I need this way to upload files/Images in angular JS. Please help us soon
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
I am going to try and rewrite your request because your explanation has me somewhat confused.

You have a grid made up of rows
Q: Does the grid start out being empty and you ad rows OR
Are there already rows with data and you are adding to them.

On each row you can click a button / link which opens a form
On the form you can an image
Q: Are you adding only 1 image per row or multiple?

After adding the image(s) to the form you click submit and the image(s) are sent to the server with some identifier that associates the image with the row

The server processes the image and sends back the updated row data.

Remember with Angular the two way binding handles the interface update - all you need to do is updated the model. You have two options in this case

1. You update the model in the client after receiving a response from the server
2. You receive an entire update of the model from the server

2 is easier but may not be the best option if your data set is large.

Does the above describe your requirement?
0
 

Author Comment

by:Finsol123
Comment Utility
Q: Does the grid start out being empty and you ad rows OR
Are there already rows with data and you are adding to them.
A: the grid start out being empty and i add row

Q:  Are you adding only 1 image per row or multiple?
A: multiple images

on form submit i use ng-repeat and where i collect all the data,in addition to that i need to collect the image data
0
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
So to put it into simple words:

You want/need to transfer the entire information as one JSON to your backend service.
And your problem is to add a file to your DTO.

In this case you need imho FileReader from the File API (HTML5, not fully supported by all browsers).

e.g.
<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Title</title>
        <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                if (!(window.File && window.FileList && window.FileReader)) {
                    alert('No File API support.');
                }

                $('p').click(function () {
                    console.log('click');
                    var file1 = $('input')[0].files[0];
                    console.log(file1.name);
                    var fileReader1 = new FileReader();
                    fileReader1.readAsText(file1, "UTF-8");
                    fileReader1.onload = function (event) {
                        $('#pre1').html(event.target.result);
                    };
                    var file2 = $('input')[1].files[0];
                    console.log(file2.name);
                    var fileReader2 = new FileReader();
                    fileReader2.readAsText(file2, "UTF-8");
                    fileReader2.onload = function (event) {
                        $('#pre2').html(event.target.result);
                    };
                });
            });
        </script>
    </head>
    <body>
        <form>
            <input type="file">
            <input type="file">
            <p>Click</p>
        </form>
        <hr>
        <pre id="pre1"></pre>
        <hr>
        <pre id="pre2"></pre>
        <hr>
    </body>
</html>

Open in new window


And add it to your DTO by reading with  readAsArrayBuffer();
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Why a FileReader - if you are adding the file to the form then the data is already loaded into the form - you can get it with FormData.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
on form submit i use ng-repeat and where i collect all the data,in addition to that i need to collect the image data
ng-repeat is used to display the contents of your model.

How have your configured your form - can you explain around that.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 27

Expert Comment

by:BigRat
Comment Utility
So the requirements are more detailed. We are uploading one or more images - makes no difference one does these one at a time - and then we add the image to the grid.

The reply from the server ought to be - again one at a time - the URL of the image. There must be an API routine to add a cell together with its contents to the grid. The contents is simply an image tag whose src attribute is the URL of the image just uploaded.

I don't see why each time you have to upload the entire grid. Incidentally what grid are you actually using?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
makes no difference one does these one at a time
Why not multiple at the same time?
0
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
@Julian: But how to get it in a custom DTO then? , I'm not aware of a method to get the file contents.
0
 
LVL 27

Expert Comment

by:BigRat
Comment Utility
@Julien: Because it is simpler and probably the user will ony load them one at a time. One simply makes an asynchronous loop around the files array. I think it is always better to get something working first and optimize it later - especially if one is new to something.

@ste5an: Nice bit of JQuery which requires the FileReader interface. The questioner, I think, is looking for an Angular solution with, I hope, a standard grid - or at least one that he did not make himself.
0
 
LVL 32

Expert Comment

by:Stefan Hoffmann
Comment Utility
@BigRat: I interpret the original question as "Everthing must be packed into one custom object". It sounds like a must requirement.
Even we I don't think that this approach is the best one.

As far as I know, this cannot be done with the FormData object.
0
 
LVL 27

Expert Comment

by:BigRat
Comment Utility
As far as I know, this cannot be done with the FormData object.
Follow the blog article I posted in ID: 41856828
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Everthing must be packed into one custom object". It sounds like a must requirement.
I interpreted that as the link to the image must be in there - not the image data itself - can't see why you would want the image data?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Alternative to onchange on the <input file> is to name your form and store the name in the model.

When you create the popup use the name defined in the controller to name the form.

When you close the form you can retrieve the form with a simple document.forms[model.formName].

This can be passed to FormData which will then collect the File data automatically for you.

This can be passed to a service on the server which can process save and sends back an object which can be pushed into the model.

Will try workup a sample demonstrating this
0
 
LVL 27

Expert Comment

by:BigRat
Comment Utility
I have a lot of difficulty in responding to closing questions to which I have responded in a constructive - as distinct to advisory - way. I really do believe that sending one file at a time and replying with a load URL is the best way to achieve this solution. So I am going to blow my own whistle, probably for the first and last time.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Java Flight Recorder and Java Mission Control together create a complete tool chain to continuously collect low level and detailed runtime information enabling after-the-fact incident analysis. Java Flight Recorder is a profiling and event collectio…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
This tutorial covers a step-by-step guide to install VisualVM launcher in eclipse.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now