2

As the question mentioned, I have a question regarding how to upload image to server. I have searched through the internet and found some reference but I still don't understand as how they work. For example: AngularJS Image upload using php

How is the image being uploaded? As there are no submit button there. I have followed the code there and tried it, still can't upload the files.

I have also tried to see some available modules from here :File Upload using AngularJS After looking for couple of hours, I still don't understand how to use them. Is there any simpler or easier understand guides for me to follow? Thanks in advance.

Edit: If there are simpler example like just upload one file, please link me to it as there are many examples that are quite advance which consist of many parts such as upload multiple file etc.

Community
  • 1
  • 1
imationyj
  • 145
  • 2
  • 8
  • Why do you want to use angular js when uploading files to the server with php is very easy and scure too? – Amit Verma Jan 18 '15 at 13:34
  • I was thinking of using angularjs to call php for the uploading process. Is it a feasible way of uploading image files? As I'm trying to submit a form with data with images file that will be stored in a folded at database. – imationyj Jan 18 '15 at 13:38
  • **[GitHub-github.com/danialfarid/angular-file-upload](https://github.com/danialfarid/angular-file-upload)** – Amit Verma Jan 18 '15 at 13:43
  • I've tried to use this before already. Not so understand the example source code. It seems like its not using any php script too. – imationyj Jan 19 '15 at 01:06

1 Answers1

3

try this for html

<div type="file" ngf-drop ng-model="files" class="container drop-box text-center" 
ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"
ngf-accept="'.jpg,.png'"><input type="hidden" name="image_id" >Drop Images here</div>

try this in you controller

controller: function($scope,$http,$timeout,Upload) {

        $scope.$watch('files', function () {
             $scope.upload($scope.files);
        });

        $scope.upload = function (files) {
            if (files && files.length) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    Upload.upload({
                        url: 'php/upload.php', 
                        headers: {'Content-Type': file.type},
                        method: 'POST',
                        data: file,
                        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);
                        $scope.image_submit = function() {
            $http.post('php/slider.php?action=add_image', 
            {
            'img_name' : config.file.name, 
            'img_src' : '../images/' + config.file.name
            }
            )
            .success(function (data, status, headers, config) {
            $scope.get_image();
            })

            .error(function(data, status, headers, config){

            });
            };
            $scope.image_submit();
                    });
                }
            }
        };

and this in your php file

<?php

$filename = $_FILES['file']['name'];
$destination = '../images/' . $filename;
move_uploaded_file( $_FILES['file']['tmp_name'] , $destination );

?>

You also need to create a db connection and create 2 php functions one to grab the images from the database and one to create the image and one function in your controller to get the image.The function to add image i have already give it to you in the controller.

Triadis Nox
  • 33
  • 5
  • Can you please explain about ``upload`` because i am getting ``unknown provider : UploadProvider <- upload`` ?? – Sameer K Aug 11 '15 at 07:26