documentation #458

7stud · 2014-12-15T08:42:42Z

The documentation is terrible. If you can't document what you created, then you didn't create anything of value to anyone else. What is the following garbled mess supposed to mean:

Syntax: <button|div|input type="file"|ng-file-select|... ng-file-select ng-model="myFiles" // binds the selected files to the scope model ng-file-change="fileSelected($files, $event)" // will be called upon files being selected // you can use $scope.$watch('myFiles') instead

ng-file-change does nothing for me. The only thing that works for me is:

Where is that documented?

Chrome Version 39.0.2171.95 (64-bit)

danialfarid · 2014-12-15T15:36:59Z

I am planning to create a website page with better doc format when I get time.
'ng-file-change' should work what version of the plugin are you using?
You can try it on the demo page, click on edit html and add ng-file-change to the input to try it out.

danialfarid · 2014-12-15T15:45:13Z

ng-file-select="doSomething($files)" is the old way of using this plugin: prior to version 2.x.
If you see the demo page the first form uses the ng-file-select to create the thumbnail of the selected image.

7stud · 2014-12-15T21:12:13Z

angular-file-upload version 2.0.5

Another issue: you use ng-accept in your demo html, yet it is undocumented

When I look at the demo code for:

$upload.http(): binary content with file's Content-Type

This is what is displayed:

var fileReader = new FileReader();
fileReader.onload = function(e) {
    $timeout(function() {
        file.upload = $upload.http({
            url: 'https://angular-file-upload-cors-srv.appspot.com/upload' + $scope.getReqParams(),
            method: 'POST',
            headers : {
                'Content-Type': file.type
            },
            data: e.target.result
        });

        file.upload.then(function(response) {
            file.result = response.data;
        }, function(response) {
            if (response.status > 0)
                $scope.errorMsg = response.status + ': ' + response.data;
        });

        file.upload.progress(function(evt) {
            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }, 5000);
}
fileReader.readAsArrayBuffer(file);

Where does the variable 'file' come from in the line:

file.upload =  $upload.http({....

For that matter, where does $upload come from?

7stud · 2014-12-15T21:21:18Z

Okay, I got the following to work:

html:

<!DOCTYPE html>
<html>

<head>
  <!-- For html5 (default is UTF-8) -->
  <meta charaset="UTF-8">

  <!-- For Bootstrap -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>AngularJS Examples</title>

  <!-- Bootstrap CSS -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-app="myApp">

<div ng-controller="FileUploadCtrl">

  <div>Button:</div>
  <div>
    <button 
      ng-file-select="" 
      ng-model="files" 
      ng-file-change="myUpload(files)" 
      ng-multiple="true">Upload File</button>  
  </div>

  <div>Input:</div>
  <div>
    <input type="file"
      ng-file-select="" 
      ng-model="files" 
      ng-file-change="myUpload(files)" 
      ng-multiple="true">  
  </div>

</div>


<!-- JQuery 2.1.1 (load before Angular)-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Angular 1.3.3 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>

<!-- Angular File Upload 2.0.5 (load after Angular)-->
<script src="angular-file-upload-all.js"></script>

<!-- app.js -->
<script src="app.js"></script>

</body>
</html>

app.js:

var app = angular.module('myApp', ['angularFileUpload']);

app.controller('FileUploadCtrl', ['$scope', function($scope) {

  $scope.myUpload = function(files) {
    console.log(files);
  };

}])

brianfeister · 2014-12-17T14:25:45Z

@danialfarid @7stud - I am having the same problem - the documentation is incomplete, the very first thing you see as a developer is a variable called file that is never defined. I'm going to test out @7stud's code right now, but I couldn't agree more, seeing an undefined variable in the example code is a huge red flag and makes me slightly terrified to use the library.

brianfeister · 2014-12-17T14:27:48Z

@7stud - is jQuery 2.1.1 a required dependency?

danialfarid · 2014-12-17T15:27:09Z

When you use ng-file-change the parameter should be $files instead of files but if you bind it to the model then you don't really need ng-file-change, you can just have a $watch in your controller to look for files changes.

@brianfeister what undefined variable file are you talking about?

driek · 2014-12-19T06:31:12Z

@brianfeister It is a required dependency for Bootstrap which he uses. I do not believe it is required for angular-fileupload though.
I am also having trouble getting everything working correctly because of the confusing documents (I see two requests being made to my server, strange indeed).
@danialfarid It is sad that your documentation is difficult to understand as one look at your code reveals that you have put quite some effort in making this library, and for that I thank you and give you credits.

danialfarid · 2014-12-19T08:54:45Z

@driek What parts of the docs is confusing? Feel free to contribute to the docs but I would keep it minimum since too much seems too complicated.

driek · 2014-12-19T09:57:58Z

@danialfarid For example, I see everywhere

$scope.upload = $upload.upload({..upload parameters..});

What is the reason for putting a reference in the scope variable? It was not clear whether the file is being uploaded already or that some method has to be invoked on this $scope.upload.
Also you put fileSelected(...) but it is not defined in the js file below
(location where fileSelected is written)

<button|div|input type="file"|ng-file-select|...
    ng-file-select ng-model="myFiles" // binds the selected files to the scope model
    ng-file-change="fileSelected($files, $event)" // will be called upon files being selected
                                                  // you can use $scope.$watch('myFiles') instead
    ng-multiple="true|false" // default false, allows selecting multiple files
    accept="image/*,*.pdf,*.xml" // see standard HTML file input accept attribute
    resetOnClick="true|false" // default true, reset the value to null and clear selected files when
                              // user cancels file select popup. (default behaviour in Chrome)
>Upload</button>

Also you mentioned that $scope.$watch('myFiles') can be used, but again, it would be useful to see a code sample of it.

At the demo page, you have created some very useful elements and how it can be used in the real world, however, again we are missing code. The HTML part seems to be OK but it is the JavaScript code that is lacking. (I would like know how to implement a simple file selection with Thumbnail generation and a submit button. Only when the submit button is clicked, the picture should be uploaded. But it was very hard for me to find out how to make the JS side of it.)
Also, on that Demo page, when you click + edit upload script, you see

var data = $scope.formUpload ? {
    username: $scope.username
} : {};

file.upload = $upload.upload({
    url: 'https://angular-file-upload-cors-srv.appspot.com/upload' + $scope.getReqParams(),
    method: 'POST',
    headers: {
        'my-header' : 'my-header-value'
    },
    data: data,
    file: file,
    fileFormDataName: 'myFile',
});

file.upload.then(function(response) {
    $timeout(function() {
        file.result = response.data;
    });
}, function(response) {
    if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
});

file.upload.progress(function(evt) {
    // Math.min is to fix IE which reports 200% sometimes
    file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});

file.upload.xhr(function(xhr) {
    // xhr.upload.addEventListener('abort', function(){console.log('abort complete')}, false);
});

However, it is unclear where this file variable comes from. That is what "brianfeister" meant with his comment.

If you have time, please also take a look on my bug report. (it is rather a question than a bug maybe, but still..)
Thanks in advance and again thank you for your effort in making this module.
(Many people like to use it, but many are also stuck on how to use it. No matter how great the things is you made, if no one else can use it, there is not much value to it. That is what 7stud meant, but in very harsh words in my opinion.)

danialfarid · 2014-12-19T16:43:43Z

@driek thanks for the detailed response, I will work on improving those.

brianfeister · 2014-12-19T17:37:55Z

Thanks also for spelling it out @driek - that is an accurate summary of my thoughts as well.

clabough · 2015-01-28T00:17:10Z

The missing piece is that the code is actually wrapped by this function in your demo, which is left out of the documentation/explanation. It declares the 'file' variable.

$scope.$watch('files', function(files) {
    $scope.formUpload = false;
    if (files != null) {
        for (var i = 0; i < files.length; i++) {
            $scope.errorMsg = null;
            (function(file) {
                $scope.generateThumb(file);
                eval($scope.uploadScript);
            })(files[i]);
        }
    }
    storeS3UploadConfigInLocalStore();
});

danialfarid · 2015-01-28T01:53:06Z

@clabough I added that feature to the demo page to be able to dynamically modify the upload script so it would actually cal eval on the script string that could be edited by the user. I think this caused too much confusion as how the js is being executed. I will remove this feature in the next releases and just have all the js scripts in one file

clabough · 2015-01-28T05:50:12Z

Yes, I figured that was the case. I just wanted to note here where it was coming from.

…#449

danialfarid · 2015-02-04T01:26:26Z

I have updated the documentation and sample a lot in version 3.0.0.
Open a separate issue if you see other issues.

…#449

shiva-p17 · 2016-01-26T22:12:41Z

I have implemented as follows
var file = $scope.myFile;
console.log('file is ' );
$scope.upload = Upload.upload({
url: 'server/upload/url',
method: 'POST',
fields: { 'branch[name]': $scope.branch.name,'branch[enabled]':$scope.branch.enabled},
file: file,
fileFormDataName: 'branch[image]'
});

I'm getting the file attributes from my directive. But am getting an error when I submit is as follows

ReferenceError: Upload is not defined

Can you please help me on this

danialfarid · 2016-01-26T23:13:24Z

Inject Upload and ngFileUpload dependencies to your app and controller. See the jsfiddle and docs samples.

7stud changed the title ~~Why did you create this?~~ Documentation Dec 15, 2014

7stud changed the title ~~Documentation~~ documentation Dec 15, 2014

danialfarid pushed a commit that referenced this issue Feb 4, 2015

fixed #528 #527 #525 #523 #520 #519 #515 #504 #502 #499 #487 #486 #458 …

9410fb0

…#449

danialfarid closed this as completed Feb 4, 2015

danialfarid pushed a commit that referenced this issue Feb 4, 2015

Fixed #528 #527 #525 #523 #520 #519 #515 #504 #502 #499 #487 #486 #458 …

5442234

…#449

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

documentation #458

documentation #458

7stud commented Dec 15, 2014

danialfarid commented Dec 15, 2014

danialfarid commented Dec 15, 2014

7stud commented Dec 15, 2014

7stud commented Dec 15, 2014

brianfeister commented Dec 17, 2014

brianfeister commented Dec 17, 2014

danialfarid commented Dec 17, 2014

driek commented Dec 19, 2014

danialfarid commented Dec 19, 2014

driek commented Dec 19, 2014

danialfarid commented Dec 19, 2014

brianfeister commented Dec 19, 2014

clabough commented Jan 28, 2015

danialfarid commented Jan 28, 2015

clabough commented Jan 28, 2015

danialfarid commented Feb 4, 2015

shiva-p17 commented Jan 26, 2016

danialfarid commented Jan 26, 2016

documentation #458

documentation #458

Comments

7stud commented Dec 15, 2014

danialfarid commented Dec 15, 2014

danialfarid commented Dec 15, 2014

7stud commented Dec 15, 2014

7stud commented Dec 15, 2014

brianfeister commented Dec 17, 2014

brianfeister commented Dec 17, 2014

danialfarid commented Dec 17, 2014

driek commented Dec 19, 2014

danialfarid commented Dec 19, 2014

driek commented Dec 19, 2014

danialfarid commented Dec 19, 2014

brianfeister commented Dec 19, 2014

clabough commented Jan 28, 2015

danialfarid commented Jan 28, 2015

clabough commented Jan 28, 2015

danialfarid commented Feb 4, 2015

shiva-p17 commented Jan 26, 2016

danialfarid commented Jan 26, 2016