flowjs / ng-flow Goto Github PK
View Code? Open in Web Editor NEWFlow.js html5 file upload extension on angular.js framework
Home Page: http://flowjs.github.io/ng-flow/
License: MIT License
Flow.js html5 file upload extension on angular.js framework
Home Page: http://flowjs.github.io/ng-flow/
License: MIT License
File drag must be in movement so that drop area effect would be active. This seems to be Ubuntu specific issue, because this does not occur on windows.
I dont use PHP and have not installed it on my computer. After getting the latest from the github site, in the apps.js, I changed the target to be '/temp/uploader', however the Upload button does not work correctly (errors on browser console) when running the samples\basic\index.html; please see the attachments. Everything else seems to be working fine, such as drag-and-drop, file selection, page layout (bootstrap), and so on.
what am do I need to do set be able to upload a selected file to c:\temp\uploader destination folder?
Thanks
I've binded flow to the parent scope and have access to it inside my controller method.
In the view:
<div flow-init flow-name="uploader.flow" flow-file-added="fileAdded($file)">
...
</div>
In the controller:
$scope.fileAdded = function(file){
if(file.size < 90000){
//Custom logic
showError('Image is too small!');
//Tried all of these but no dice.
file.cancel();
$scope.uploader.flow.removeFile(0);
$scope.uploader.flow.removeFile(file);
$scope.uploader.flow.removeFile(file.file);
}
}
What am I doing wrong here?
I found here in github this:
<img flow-img="$flow.files[0]" />
which will preview one image. How can I preview all of the images in $flow.files?
Trying to limit a single file upload and only image types.
Becuase the handle is instansiated at run time I'm wondering how its possible to attach this method to my flow handle?
Am I correct in my understanding that any <img>
within the element that contains the flow-init
attr is not a regular html element? Reusing the name is a little confusing.
How can I change GET request before uploading file to HEAD?
Is there an easy way to access the POST response after a fileSuccess?
how can i limit the single file size? Think you!
Hi, first off, great little library here. I've been implementing it into my website and I like it a lot!
I was wondering if it's possible to specify a custom upload directory based on certain ids in my application (product id, and/or user id)?
Thanks.
Hi,
If I click Select files in Basic example there is no dialog opening to choose the files.
So for some reason directive flow-btn doesnt work inside a-tag. Only works with input.
Could you have a look what the problem is please?
Thanks.
TL;DR Did zip files get mixed up during the release process?
I just downloaded the 2.0.0 build zip from the Releases page, but the zip file includes builds of the 1.0.0-beta3 code. At the top of the 2.0.0 minified file is:
/*! ng-flow 1.0.0-beta3 */
It doesn't seem to be just a comment issue, either — the module usage still needs to be prefixed with ng
, which appears to have been removed (yay!) with 2.0.0. When I clone the repo myself, do npm install
, then grunt build
, I get a proper 2.0.0 build.
I am unable to upload >2mb files from Chrome. IE and firefox work.
I am uploading 1 file at a time, allow chunking.
I get 'aw, snap!'
Thx help is much appreciated.
-start
is reserved word in attributes names.
Rename attribute to flow-upload-started
.
I have this working in my project, but I am using a variable that uses model data like this:
flow-init="{target: flowUrl}"
It uses the url before the model data is loaded in. The url is "/api/uploads", but once the model data is loaded it should be something like "/api/uploads/2". Is there a way to modify the target after the fact, like after the model data is loaded?
Hello,
By using the samples found in ng-flow repository (e.g., samples/basic) I'm unable to drag and drop a folder. Note that I'm able to select a folder with the button and to upload them.
When a folder is dragged and dropped to a flow-drop zone, the following error occurs in Chrome's console:
Uncaught #<FileError> ng-flow-standalone.js:243
readError
Problem occurred with angularjs 1.2.3, 1.2.15 and 1.2.16.
The demo (http://flowjs.github.io/ng-flow/) which seems to use a former version of ng-flow supports folder drag'n drop.
What do I need to do in order to enable folder drag'n drop?
How do you set the relative path?
I'm new to angular and I'm using ng-flow to append a file to a request with more data. ¿Could you add some example about calling $flow from a custom controller to get access to the files?
i'm using bower to get ng-flow. What it in bower_components is just src, there is not unified/minified dist file anywhere. I was expecting to see a dist/ng-flow.min.js.
When submitted the same image second time file array is empty.
$scope.$on('flow::filesSubmitted', function (flowEvent, flowObj, files, event) {
event.preventDefault();//prevent file from uploading
console.log(files);
});
On first time files array have files objects on second time is empty.
I am trying to preview image from server which is user already uploaded before. Basically I want to initialize the $flow object with already uploaded file in server. So this way when user will try to do edit they will see already uploaded image in preview and from there they can Select one or Remove.
Is it possible? Please help me out.
My files are uploaded, I log the event in console.
But I don't understand where and how to save them.
Here is my html code, upload is called.
<div flow-init flow-files-submitted="$flow.upload()">
<div class="drop" flow-drop ng-class="dropClass">
<span class="btn btn-default" flow-btn>Upload File</span>
<span class="btn btn-default" flow-btn flow-directory ng-show="$flow.supportDirectory">Upload Folder</span>
<b>OR</b>
Drag And Drop your file here
</div>
Here is my config
app.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: 'upload.php',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4,
singleFile: true
};
flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
// Can be used with different implementations of Flow.js
// flowFactoryProvider.factory = fustyFlowFactory;
}]);
upload.php is called, and $_GET is full with data,
<script>alert('alert' + array(8) {
["flowChunkNumber"]=>
string(1) "1"
["flowChunkSize"]=>
string(7) "1048576"
["flowCurrentChunkSize"]=>
string(6) "807855"
["flowTotalSize"]=>
string(6) "807855"
["flowIdentifier"]=>
string(11) "807855-3png"
["flowFilename"]=>
string(5) "3.png"
["flowRelativePath"]=>
string(5) "3.png"
["flowTotalChunks"]=>
string(1) "1"
}
)</script>
but when I'm here what I have to do to save my files?
I tried to do move_uploaded_file() on flowFilename and flowRelativePath but nothing append.
Thank you.
I'm using ng-flow on one of the pages in my route. For HTML5 compliant browsers everything works fine. But for IE8+9, which I unfortunately have to support (insert head banging) it's throwing an error. I've added the fusty flow files, but the directive (flow-init) is throwing an error that FustyFlow is undefined. Any ideas/suggestion on how to tackle this would be appreciated. Thanks!
My need is pausing upload for a while after each file is uploaded and resume. In this i can only find pause and resume option but i could find any option to upload files sequentially (uploading one file after another). I find only concurrent uploading but i need sequential uploading.
Please help me how can achieve using this library?.
I have a Cordova feature that allows me to fetch images from a users gallery.
I really like your solution and was wondering if it's possible to add an image via File URI to the current instance of Flow in the getPicture()
callback you see here:
$cordovaCamera.getPicture(options).then(function(imageData) {
window.resolveLocalFileSystemURI(imageData, function(file) {
//Could I pass flow a new image programmatically somehow?
//$scope.uploader.flow.addFile(file);
});
});
I see in your docs you have addFile()
but it's described as "Add a HTML5 File object to the list of files." and I'm not sure this would work because this isn't an HTML5 file object right?
Could any file be passed from the Cordova File API?
First, am I supposed to use ng-flow-standalone? or just ng-flow? Is there documentation on how to use both?
When I use ng-flow-standalone I am getting this error:
TypeError: Cannot call method 'assignBrowse' of undefined
and
TypeError: Cannot call method 'assignDrop' of undefined
Thanks.
Using the example code I'm getting a 415 error when trying to do a GET to an ASP.net WebApi service. Am I missing some config settings for WebApi? Here is the http header info:
Remote Address:127.0.0.1:80
Request URL:http://ramapi.localhost/Blog/SavePostImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=37709&flowTotalSize=37709&flowIdentifier=37709-primeshine-logopng&flowFilename=primeshine-logo.png&flowRelativePath=primeshine-logo.png&flowTotalChunks=1
Request Method:GET
Status Code:415 Unsupported Media Type
Request Headersview source
Accept:/
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,de;q=0.6,it;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Host:ramapi.localhost
Origin:http://ramadmin.localhost
Pragma:no-cache
Referer:http://ramadmin.localhost/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Query String Parametersview sourceview URL encoded
flowChunkNumber:1
flowChunkSize:1048576
flowCurrentChunkSize:37709
flowTotalSize:37709
flowIdentifier:37709-primeshine-logopng
flowFilename:primeshine-logo.png
flowRelativePath:primeshine-logo.png
flowTotalChunks:1
Response Headersview source
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:0
Date:Wed, 28 May 2014 15:18:31 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
I was trying to upload an image using flow.js .it is just creating a temp folder but not upload file. please help me
Hi!
I'm trying to execute something when upload is completed but nothing happens.
HTML:
<div ng-show="isEditingPolitician()" flow-init="flowConfig" flow-name="politician.flow">
</div>
Controller:
$scope.flowConfig = {
target: '/politico/upload',
singleFile: true,
query: function(flowFile, flowChunk) {
return {politician_id: $scope.politician.id};
}
};
$scope.$on('flow::complete', function (event, $flow, flowFile) {
$scope.politician = angular.copy($scope.editedPolitician);
$scope.cancelPoliticianEdition();
});
When i click in the button
<button ng-click="savePoliticianEdition()" type="button" class="btn btn-primary">
The function savePoliticianEdition is called, the upload is done but the event is not fired.
$scope.savePoliticianEdition = function() {
politicianService.updatePolitician($scope.editedPolitician).then(function(response) {
$scope.politician.flow.upload();
});
};
What i'm doing wrong ?
Thank you in advance for this awesome module!
Hello,
I would like to know how to access the content of the files selected/droped by the user.
I guess, listening to 'flow::fileAdded' events is a good starting point. Then, is there a need to instantiate a standard FileReader() object or are there ng-flow specifics?
Thanks
Hi, I notice that you include an upload.php file, I was wondering if this library would work with a node/express app and if so, are there any examples?
Thanks.
How would I support the image upload in a node endpoint?
Whats the reason for having to include so many files? Why not consolidate into one src file or have a build?
I ran into a problem of files not being uploaded today using flow-php-server together with Laravel. For me the problem was that the 404 header wasn't properly returned on the test function of flow.js. Instead it would just return a 200 which in turn caused flow.js to not send the POST request after the GET request to check for the chunk existence.
In Laravel you should do something like this in the controller method that handles the flow.js requests. (taken from the basic example):
if (\Flow\Basic::save('./uploads/name_of_new_file', './chunks_temp_folder')) {
// file saved successfully and can be accessed at './final_file_destination'
} else {
// This is not a final chunk or request is invalid, continue to upload.
$response = Response::make('', 404);
return $response;
}
When I started I left the else block empty. Now the whole thing makes sense to me, but I haven't done much backend before, so all in all this took me a couple of hours. I figured maybe posting this here helps someone else.
Hi Guys,
Great plugin, thanks for the efforts! I'm looking to integrate this with a RESTFUL PHP API and it makes sense that when sending data it is POSTED (Possibly using PUT if its the 2nd chunk, but lets ignore that for now) and when checking a chunk has uploaded it should be a GET request. Is this possible?
Thanks in advance,
Ben
Hello,
Congrats on ng-flow. Great module. I am working on a CRUD angular page and I need to provide edit image functionality. I simply link to a rest api to get an image for a particular thumbnail id and the image will show if it exists. I need to make this image editable or should I say replaceable. I am not sure how can I set this image as $flow.files[0] so I can update the preview later if the user chooses to upload a new image to replace the old one. What is the relationship of $flow and $scope? What kind of elements does the files array hold?
Thanks
Dino
This is not working in the controller:
$scope.$on('flow::fileAdded', function (event, $flow, flowFile)
I've changed the L1562 to $rootScope.$broadcast(event.name) and worked but I do not get the fileName!
Hi,
Maybe it's a stupid idea buy I am using a groovy server and I wouldn't mind if I could get the image as base64. I don't want to use the upload.php file. Is there a way to bind the base64 string to a ng-model?
Many thanks!
Tom
Is it possible to set a target/URL for each inviidual file? Our REST API uses endpoints like /api/file/1/data, /api/file/2/data, etc so we need the ability to set a URL target per file.
Thanks.
Hi;
I am getting this error in MEAN stack. I loaded flow.min.js in html and inject dependency in config.js.
How do I attach additional file information to the uploaded file?
I need to pass in a job number along with the uploaded file so I know where to store it and how to update a database.
As a quick fix, I have (in CoffeeScript)
fileSubmitted: (event, flow) =>
angular.forEach flow.files, (file) =>
file.uniqueIdentifier = "#{@$scope.jobNumber}_#{file.name}"
flow.upload()
I do not know if updating all uniqueIdentifiers with every submission is going to be a problem.
Hi,
I have discovered this module to Angular and it looks great, but as hard as I am trying, I can't figure out how to use it.
I have a directive, in which I have this code
<form class="ui form">
<div class="content ui segment">
<div class="field">
<input type="text" data-ng-model="data.title" placeholder="{{ 'Title'|translate }}">
</div>
<div flow-init="{target: '/api/outfit'}">
<button type="button" class="ui button" flow-btn data-ng-show="!$flow.files.length">Select file with photo</button>
<div class="field" data-ng-show="$flow.files.length">
<img flow-img="$flow.files[0]">
</div>
<input type="submit" class="ui blue submit button" value="{{ 'Add outfit'|translate }}" data-ng-show="$flow.files.length">
</div>
</div>
</form>
What do I have to do, to:
Thanks a lot in advance.
I don't know if it's only me but it took me some times to find out about the testChunks option and set it to false in order to avoid GET request.
This isn't an issue but a question. I'm trying to use ng-flow with my app. We use requirejs to load modules, and I can't get it to work for some reason. Does anyone have experience getting ng-flow to work with requirejs?
I have these lines in the paths in requirejs's config object:
'flow': 'lib/dist/ng-flow/ng-flow-standalone'
And the controller where I want to use flow starts as such ('angular' pointing to angular):
define([
'angular',
'flow'
], function (angular, flow) {
And this is the HTML code controlled by that controller:
<div flow-init>
<input type="file" flow-btn />
<table><tr ng-repeat="file in $flow.files">
<td>{{$index+1}}</td>
<td>{{file.name}}</td>
</tr></table>
</div>
The code isn't working though. I get a regular file input button, but no text appears underneath that input after I select some files.
In safari browser it is giving following error on load
'undefined' is not an object (evaluating 'this.events.hasOwnProperty')
ng-flow-standalone.js line:152
This is not an issue but a question rather. How can I combine the flow within a form that submits with ajax but not automatically as file is added. through angular controller method? The version I have on the site at the moment is rather clunky and not very angular best practice as it uses native httprequest over angular $http in order to catch progress events. Is there a way to use angular with flow to show upload progress over ajax on submit? Thanks again for great module!
Hello !
I don't get the module to work. It throws this error :
ReferenceError: Flow is not defined at factory (http://client.local/lib/ng-flow.min.js:2:136) [...]
I included the javascript file like this at the end of my html file:
<script src="/lib/ng-flow.min.js" type="text/javascript"></script>
Load the module into my angularjs app like this:
var myApp = angular.module('myApp', ['flow','ngRoute', 'ui.bootstrap','ngResource']);
And this is where I call the directive :
<div class="row" flow-init>
</div>
What am I doing wrong ?
Thanks in advance for your support !
Hi! thank you for great module.
My question is : if $flow is registered in root scope how can I unsubscribe from events? Should I pop event and callback every time I navigate away from controller?
I would like to override the $flow object created by the flow-init directive with an existing one.
For example, when I am on the A view I upload a file, the listener on flow::fileAdded save the $flow object. Then I browser to view B and then return to the view A, now, I would like to initialize the flow-init directive with the $flow saved before.
Thanks !
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.