Solved

Angular Js Grid Related

Posted on 2016-10-24
18
34 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 4
  • +1
18 Comments
 
LVL 34

Expert Comment

by:ste5an
ID: 41856631
Are you talking about input multiple? What does "Here we once files are  added to JSON object" mean?
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41856771
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)
ID: 41856828
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:Finsol123
ID: 41858011
"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 57

Expert Comment

by:Julian Hansen
ID: 41858080
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
ID: 41858317
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 34

Expert Comment

by:ste5an
ID: 41858341
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 57

Expert Comment

by:Julian Hansen
ID: 41858350
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 57

Expert Comment

by:Julian Hansen
ID: 41858353
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
 
LVL 27

Expert Comment

by:BigRat
ID: 41858358
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 57

Expert Comment

by:Julian Hansen
ID: 41858369
makes no difference one does these one at a time
Why not multiple at the same time?
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41858394
@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
ID: 41858428
@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 34

Expert Comment

by:ste5an
ID: 41858500
@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
ID: 41858541
As far as I know, this cannot be done with the FormData object.
Follow the blog article I posted in ID: 41856828
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41858545
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 57

Expert Comment

by:Julian Hansen
ID: 41858746
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
ID: 41886039
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

Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …

696 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