ng-flow
Flow.js html5 file upload extension on angular.js framework
Angular file upload - flow.js flow.js html5 file upload extension on angular.js framework. no third party dependencies required for angular file upload library.
I am using ng-flow directive for uploading files to server. Is there a way i can use normal upload instead of chunked upload that is used in ng-flow module?
Source: (StackOverflow)
I have seen many examples with ng-flow having the php side server to upload the files. But as I am not an expert in php and I need some help in the webapi, can someone please help me to find a working example or tutorial of ng-flow with webapi files upload.
Thanks everyone.
Source: (StackOverflow)
I am using ng-flow in my app, is there any way to limit the number of files for upload?
A code sample:
<div class="thumbnail" ng-show="$flow.files.length">
<img flow-img="$flow.files[0]" />
</div>
<div>
<a rel='nofollow' href="#" class="btn" ng-hide="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Select image</a>
<a rel='nofollow' href="#" class="btn" ng-show="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Change</a>
<a rel='nofollow' href="#" class="btn btn-danger" ng-show="$flow.files.length"
ng-click="$flow.cancel()">
Remove
</a>
</div>
Source: (StackOverflow)
I am currently using ng-flow to perform a file upload. It appears that the default action of selecting a file is to upload immediately. I'd like to override this so that files are selected and only uploaded on button click. Perhaps I am misreading the documentation, but thus far I have the following:
<div flow-init="{target: '/upload'}"
flow-files-submitted="$flow.upload()"
flow-file-success="$file.msg = $message">
<input type="file" flow-btn/>
Input OR Other element as upload button
<span class="btn" flow-btn>Upload File</span>
<table>
<tr ng-repeat="file in $flow.files">
<td>{{$index+1}}</td>
<td>{{file.name}}</td>
<td>{{file.msg}}</td>
</tr>
</table>
</div>
This appears to work and I can see the network request going out. I located flow.js upload file on click and attempted to follow the suggested answer, however $flow was undefined in the respective function.
So, how does one programmatically upload files using ng-flow?
Source: (StackOverflow)
I am using ng-flow to upload multiple file to server from AngularJs. the client code is ok but I don't know how to handle the uploaded files in server.
They have provided one php sample server code here. But I need it's Jsp or groovy equivalent. How can I get upload files? Under which parameter label? I tried request.getFile('file'). But doesn't work. I need to save uploaded images to file system. Anyone knows how to do it?
Source: (StackOverflow)
Seems that the lib keep the original file name and there is no way that the server can tell ng-flow the new file name, my server output this on complete:
{
"success":true,
"flowTotalSize":58110,
"flowIdentifier":"10152987551505362-2e68232139983ba857669baf3c2d45c7_development.jpg-58110",
"flowFilename":"4498b3d20302c1c3b75ce37c1e5fefac",
"flowRelativePath":"http:\/\/localhost\/images\/users\/4498b3d20302c1c3b75ce37c1e5fefac"
}
my upload php script:
<?php
$path = __DIR__ . '/../public/images/users/';
$tmp = __DIR__ . '/../tmp/';
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$chunkDir = $tmp . DIRECTORY_SEPARATOR . $_GET['flowIdentifier'];
$chunkFile = $chunkDir.'/chunk.part'.$_GET['flowChunkNumber'];
if (file_exists($chunkFile)) {
header("HTTP/1.0 200 Ok");
} else {
header("HTTP/1.0 404 Not Found");
}
}
// $file = $path . (isset($_FILES['file']) ? $_FILES['file']['name'] : $_GET['flowFilename']); // this is using original name, but in this case the file sooner or later will be overrite by other user that upload a file with the same name
$file = $path . md5(time()); // The way I want, it need to add the extension but it was a test only
if (isset($_FILES)) {
copy($_FILES['file']['tmp_name'], $file);
echo json_encode([
'success' => true,
//optional
'flowTotalSize' => $_FILES['file']['size'],
'flowIdentifier' => $_FILES['file']['name'] . '-' . $_FILES['file']['size'],
'flowFilename' => basename($file),
'flowRelativePath' => 'http://localhost/images/users/' . basename($file)
]);
} else {
if (\Flow\Basic::save($file, $tmp)) {
echo json_encode([
'success' => true,
//optional
'flowTotalSize' => $_GET['flowTotalSize'],
'flowIdentifier' => basename($file),
'flowFilename' => basename($file),
'flowRelativePath' => 'http://localhost/images/users/' . basename($file)
]);
}
}
Also posted on github but no answers there, I'm trying to do this on php but if there is a way to do in js will be useful too
Source: (StackOverflow)
I am using ng-flow to upload an image to my webAPI like so:
<div class="form-horizontal" role="form" flow-init="config"
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
flow-files-submitted="$flow.upload()">
<img flow-img="$flow.files[0]" style="max-width:150px; max-height:150px;" />
<span class="btn btn-success" flow-btn flow-attrs="{accept:'image/*'}">Upload Image</span>
</div>
and
$scope.config = {
query: function (flowFile, flowChunk) {
// function will be called for every request
return {
id: 2, source: 'flow_query'
};
}
};
The question is how do I access the 'id' parameter inside my api controller, I tried accessing Content-D. with no luck:
string root = HttpContext.Current.Server.MapPath("~/Content/Images/User");
var provider = new MultipartFormDataStreamProvider(root);
try
{
// Read the form data.
await Request.Content.ReadAsMultipartAsync(provider);
// This illustrates how to get the file names.
foreach (MultipartFileData file in provider.FileData)
{
//Console.WriteLine(file.Headers.ContentDisposition.FileName);
//Trace.WriteLine("Server file path: " + file.LocalFileName);
var PId = file.Headers.ContentDisposition.Parameters.First(x => x.Name.Contains("id"));
Source: (StackOverflow)
I'm currently trying to populate ng-flow with images from my webserver(nodejs http-server), and I found this thread:
Populating image files with ng-flow.js from json
As you can see in the answer from Aidas, he says that you need to add the data to a blob and then use addFile(blob)
But... when I use $resource to GET an url like:
http://localhost:8080/3c6397ff-cbb4-4a1c-98b3-5304e02c1bd4.jpg
and then take the value from $resource, and adding it to a blob the image is missing - In ng-flow it says that the blob is 15kb - and not the 700kb the actually image is.
I've read that the picture could be base64 formatted, but my google dev console says:
content-length:780831
content-type:image/jpeg; charset=utf-8
If I take a look at the response data in google dev console, there's alot of questionmarks (it cannot display the character I guess).
How do I get the response formatted correctly, so I can add it to ng-flow using the addFile(blob) function?
Source: (StackOverflow)
I am new to flow js and want to upload a file in angularjs. Below are my script
Views/html
<td flow-init="{singleFile:true,target: '../../api/upload.php'}" flow-error=" ... properties '$file', '$message' can be accessed ... " flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-file-success="$file.msg = $message">
<div class="thumbnail" ng-show="$flow.files.length">
<img flow-img="$flow.files[0]" />
</div>
<div>
<span class="btn btn-primary" ng-show="!$flow.files.length" flow-btn>Select image</span>
<span class="btn btn-info" ng-show="$flow.files.length" flow-btn>Change</span>
<span class="btn btn-danger" ng-show="$flow.files.length"
ng-click="$flow.cancel()">
Remove
</span>
</div>
</td>
My php file is not called. My Folder Structure
administrator/
|__________________api/
|________upload.php
|__________________views/
|_______foldername/
|__________html for upload
I am seeing the preview image but my file is not saved.
upload.php script (from example)
<?php
$tempDir = __DIR__ . DIRECTORY_SEPARATOR . 'temp';
if (!file_exists($tempDir)) {
mkdir($tempDir);
}
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$chunkDir = $tempDir . DIRECTORY_SEPARATOR . $_GET['flowIdentifier'];
$chunkFile = $chunkDir.'/chunk.part'.$_GET['flowChunkNumber'];
if (file_exists($chunkFile)) {
header("HTTP/1.0 200 Ok");
} else {
header("HTTP/1.0 404 Not Found");
}
}
// Just imitate that the file was uploaded and stored.
sleep(2);
echo json_encode([
'success' => true,
'files' => $_FILES,
'get' => $_GET,
'post' => $_POST,
//optional
'flowTotalSize' => isset($_FILES['file']) ? $_FILES['file']['size'] : $_GET['flowTotalSize'],
'flowIdentifier' => isset($_FILES['file']) ? $_FILES['file']['name'] . '-' . $_FILES['file']['size']
: $_GET['flowIdentifier'],
'flowFilename' => isset($_FILES['file']) ? $_FILES['file']['name'] : $_GET['flowFilename'],
'flowRelativePath' => isset($_FILES['file']) ? $_FILES['file']['tmp_name'] : $_GET['flowRelativePath']
]);
I got two targets.
1.Upload the file to specific directory.
2.Save the image name to my database with userid.
Please dont refer me to their documentation as I have spent more than 5 hours to figure it out.
Additional details
Out of the project, i tried this in a seperate folder
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
require_once 'Flow/Autoloader.php';
require_once 'Flow/Config.php';
require_once 'Flow/ConfigInterface.php';
require_once 'Flow/Basic.php';
$config = new Config(array(
'tempDir' => './chunks_temp_folder'
));
$request = new Request();
if (\Flow\Basic::save(__DIR__ . '/' . $request->getFileName(), $config, $request)) {
echo "Hurray, file was saved in " . __DIR__ . '/' . $request->getFileName();
};
Again i get error as ConfigInterface is not found. Hope i justified why i dont want you to refer their documentation.
Source: (StackOverflow)
How would I go about submitting a multipart form via $http using Flow.js?
I am able to use these solutions for form submissions independent of other data, but have not had success combining with an existing form.
I've been working on this for a while now without success, any guidance is appreciated.
For example, using flow.js, how do I access the file object within my controller without submitting? I've been reading the documentation, but it doesn't seem clear to me.
According to the documentation on "How can I catch an event in a controller?"
I should be able to access the file object using the following:
$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
event.preventDefault();//prevent file from uploading
});
I am using the as controller syntax. Does flow still attach to $scope?
Source: (StackOverflow)
Imagine an admin page (CRUD) for managing products in AngularJS.
The page I am working on is the Update product.
I call an API to load a product data and then I offer to the user the posibility edit product and upload files (using ngflow).
Need to pass the product reference as POST parameter (ref) along the file itself, so I called a controller function 'flowInit' from flow-init attribute as below:
<h1>Editing {{product.ref}}</h1>
<div class="row voffset-2" flow-init="flowInit(product.ref)"
flow-files-submitted="$flow.upload()"
flow-file-success="$file.msg = $message">
I pass product.ref as parameter.
While product parameter is populated fine in the tag just above, the value that I get as parameter in then controller is just a promise, and when I try to use $scope.product.ref I get undefined value:
$scope.flowInit = function(ref){
console.log(ref); //undefined
console.log($scope.product.ref); //undefined
return {
target: '/uploads/uploadProductAttachment',
testChunks: false,
query: {ref: ref}
};
};
What I am doing wrong? It seems that flow-init is executed before scope is pupulated from API.
Kind Regards.
Source: (StackOverflow)
I am using enter link description here thas is an example using mvc and angular with ngFlow. I was trying to save each chunks on a database to be merge and save at the end. i need this because i have a server farm environment. Same one have any clue?
Source: (StackOverflow)
I would like to know if it's possible to check if ng-flow is supported by browser.
I saw that flow.js has this flow.support() method.
Is there any equivalent to this method in ng-flow ?
Source: (StackOverflow)
I have gone through the documentation of ng-flow and it didn't help me much to create a working code. Therefore, could you provide me a working plunker to better understand ng-flow. I intend to upload folder containing images and pdf and then display each of them.
I would be a lot of thankful and i thank you from the depth of my heart for your time and effort :)
Source: (StackOverflow)
The use case is: when creating a new record (e.g. Product) the user can select the photos of the product in which it will immediately upload to the server without saving the Product form yet.
How can we handle those photos being uploaded to the server if it's related entity (i.e. Product) does not exists yet?
Source: (StackOverflow)